window onerror各瀏覽器下表現總結

window onerror 多平臺調研

作前端錯誤上報，必然離不開window onerror，但window onerror在不一樣設備上表現並不一致，瀏覽器爲避免信息泄露，在一些狀況下並不會給出詳細的錯誤信息，本文的目的就是經過跑一些簡單的小例子，驗證onerror在不一樣瀏覽器下的具體表現。

準備

我會在Mac, Windows, Android和IOS平臺下分別進行測試並記錄。爲了模擬真實線上環境，我利用GitHub Page模擬線上靜態文件服務器，經過其餘設備訪問此地址便可。

測試用例

預期獲得錯誤Uncaught ReferenceError: Name is not defined，並打印onerror中的全部參數，其中包括行列號，Error對象中存在錯誤的堆棧信息等。

window.onerror = function(msg, url, line, col, error) {
  // 直接將錯誤打印到控制檯
  console.log(arguments)

  // 方便在未打開控制檯的時候，記錄錯誤對象
  window.demoError = arguments

}

function makeError () {
  var name = "geoff"
  var msg = "Hi, " + Name
  console.log(msg)
}

makeError()

. . . 測試結果在最後，，，各個瀏覽器下執行的截圖 . . .

先看結論

大多數現代瀏覽器對window onerror都支持良好。須要注意的點以下：

1. IE10如下只有行號，沒有列號， IE10有行號列號，但無堆棧信息。IE10如下，能夠經過在onerror事件中訪問window.event對象，其中有errorCharacter，也就是列號了。但不知爲什麼，列號老是比真實列號小一些。
2. IOS下onerror表現很是統一，包含全部標準信息
3. 安卓部分機型沒有堆棧信息

總之，瀏覽器關於onerror這件事，是這樣的一個演化過程，最先由於頁面中的js並不會很複雜，因此定位錯誤只須要一個行號就很容易找到，後面加上了列號，最後又加上了堆棧信息。

實驗數據

Mac (10.12.1)

1. Chrome 60.0.3112.90

2. Safari 10.0.1 (12602.2.14.0.7)

3. FireFox 47.0

4. QQ瀏覽器 （內核Chromium 48.0.2564.82）

Windows (win7)

1. Chrome 51.0.2704.106

2. FireFox 55.0

3. IE9

4. IE10

Android (5.1)

1. Chrome (59.0.3071.92)

{
"0": "Uncaught ReferenceError: Name is not defined",
 "1": "http://geoffzhu.cn/error-report/index.js",
"2": 14,
"3": 22,
"4": {}
}

2. UC

   {
   	    "0": "Uncaught ReferenceError: Name is not defined",
   	    "1": "http://geoffzhu.cn/error-report/index.js",
   	    "2": 14,
   	    "3": 22,
   	    "4": {}
   		}

3. 微信webview

   {
   	    "0": "Uncaught ReferenceError: Name is not defined",
   	    "1": "http://geoffzhu.cn/error-report/index.js",
   	    "2": 14,
   	    "3": 22,
   	    "4": {}
   		}

IOS (10.3.2)

1. Chrome

   {
   	"0": "ReferenceError: Can't find variable: Name",
   	"1": "http://geoffzhu.cn/error-report/index.js",
   	"2": 14,
   	"3": 26,
   	"4": {
   	    "line": 14,
   	    "column": 26,
   	    "sourceURL": "http://geoffzhu.cn/error-report/index.js"
   	 }
   	}

2. UC

{
	"0": "ReferenceError: Can't find variable: Name",
	"1": "http://geoffzhu.cn/error-report/index.js",
	"2": 14,
	"3": 26,
	"4": {
	    "line": 14,
	    "column": 26,
	    "sourceURL": "http://geoffzhu.cn/error-report/index.js"
	 }
	}

3. 微信webview

{
"0": "ReferenceError: Can't find variable: Name",
"1": "http://geoffzhu.cn/error-report/index.js",
"2": 14,
"3": 26,
"4": {
    "line": 14,
    "column": 26,
    "sourceURL": "http://geoffzhu.cn/error-report/index.js"
 }
}

關於代碼壓縮和source-map

我經過uglifyJs模擬webpack壓縮的配置將上文中的index.js壓縮，獲得source-map，經過mozilla/source-map的SourceMapConsumer接口，能夠經過將轉換後的行號列號傳入Consumer獲得原始錯誤位置信息。相應的node代碼以下

var fs = require('fs')
var sourceMap = require('source-map')

// map文件
var rawSourceMapJsonData = fs.readFileSync('./dist/index.min.js.map', 'utf-8')
rawSourceMapJsonData = JSON.parse(rawSourceMapJsonData)

var consumer = new sourceMap.SourceMapConsumer(rawSourceMapJsonData);

// 打印出真實錯誤位置
console.log(consumer.originalPositionFor({line: 1, column: 220}))