window onerror 各瀏覽器下表現(xiàn)總結(jié)

xiongzenghui 發(fā)布于2019-08-21 16:19 / 3489人閱讀

摘要：各瀏覽器下表現(xiàn)總結(jié)做前端錯誤上報，必然離不開，但在不同設(shè)備上表現(xiàn)并不一致，瀏覽器為避免信息泄露，在一些情況下并不會給出詳細的錯誤信息，本文的目的就是通過跑一些簡單的小例子，驗證在不同瀏覽器下的具體表現(xiàn)。

window onerror 各瀏覽器下表現(xiàn)總結(jié)

做前端錯誤上報，必然離不開window onerror，但window onerror在不同設(shè)備上表現(xiàn)并不一致，瀏覽器為避免信息泄露，在一些情況下并不會給出詳細的錯誤信息，本文的目的就是通過跑一些簡單的小例子，驗證onerror在不同瀏覽器下的具體表現(xiàn)。

準備

我會在Mac, Windows, Android和IOS平臺下分別進行測試并記錄。為了模擬真實線上環(huán)境，我利用GitHub Page模擬線上靜態(tài)文件服務(wù)器，通過其他設(shè)備訪問此地址即可。

測試用例

預(yù)期得到錯誤Uncaught ReferenceError: Name is not defined，并打印onerror中的所有參數(shù)，其中包括行列號，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()

.
.
.
測試結(jié)果在最后，，，各個瀏覽器下執(zhí)行的截圖
.
.
.

先看結(jié)論

大多數(shù)現(xiàn)代瀏覽器對window onerror都支持良好。需要注意的點如下：

IE10以下只有行號，沒有列號， IE10有行號列號，但無堆棧信息。IE10以下，可以通過在onerror事件中訪問window.event對象，其中有errorCharacter，也就是列號了。但不知為何，列號總是比真實列號小一些。

IOS下onerror表現(xiàn)非常統(tǒng)一，包含所有標準信息

安卓部分機型沒有堆棧信息

總之，瀏覽器關(guān)于onerror這件事，是這樣的一個演化過程，最早因為頁面中的js并不會很復(fù)雜，所以定位錯誤只需要一個行號就很容易找到，后面加上了列號，最后又加上了堆棧信息。

實驗數(shù)據(jù) Mac (10.12.1)

Chrome 60.0.3112.90

Safari 10.0.1 (12602.2.14.0.7)

FireFox 47.0

QQ瀏覽器（內(nèi)核Chromium 48.0.2564.82）

Windows (win7)

Chrome 51.0.2704.106

FireFox 55.0

IE9

IE10

![](https://static.oschina.net/uploads/img/201709/06152130_7MWq.png)

Android (5.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": {}
}

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

微信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)

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"
 }
}

    {
    "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"
     }
    }

微信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"
 }
}

關(guān)于代碼壓縮和source-map

我通過uglifyJs模擬webpack壓縮的配置將上文中的index.js壓縮，得到source-map，通過mozilla/source-map的SourceMapConsumer接口，可以通過將轉(zhuǎn)換后的行號列號傳入Consumer得到原始錯誤位置信息。相應(yīng)的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}))