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