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

1. Safari 10.0.1 (12602.2.14.0.7)

1. FireFox 47.0
   

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

Windows (win7)

1. Chrome 51.0.2704.106
   

2. FireFox 55.0
   

3. IE9
   

4. IE10

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

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

1. 微信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}))