windowonerror各浏览器性能总结前端报错肯定离不开windowonerror，但是windowonerror在不同设备上的表现是不一致的。在某些情况下，不会给出详细的错误消息。本文的目的是通过运行一些简单的例子来验证onerror在不同浏览器中的具体表现。在准备过程中，我会分别在Mac、Windows、Android和IOS平台下进行测试和记录。为了模拟真实的线上环境，我使用GitHubPage模拟了一个线上的静态文件服务器，通过其他设备访问这个地址。测试用例预计会得到错误UncaughtReferenceError:Nameisnotdefined，并打印onerror中的所有参数，包括行数和列数，Error对象中的错误堆栈信息等window.onerror=function(msg,url,line,col,error){//直接打印错误到控制台console.log(arguments)//方便在控制台未打开时记录错误对象window.demoError=arguments}functionmakeError(){varname="geoff"varmsg="Hi,"+Nameconsole.log(msg)}makeError()...测试结果在最后，，各浏览器下执行截图。..先看结论大多数现代浏览器对windowonerror都有很好的支持。注意事项如下：IE10及以下只有行号，没有列号。IE10有行号和列号，但是没有堆栈信息。IE10以下，可以在onerror事件中访问window.event对象，其中包含errorCharacter，也就是列号。但是由于某种原因，列号总是小于实际列号。IOS下onerror的表现非常统一，包括所有标准信息，Android部分机型没有堆栈信息。只需一个行号，然后是列号，最后是堆栈信息，就很容易找到。Mac（10.12.1）Chrome60.0.3112.90Safari10.0.1（12602.2.14.0.7）Firefox47.0qq浏览器内核内核内核内核内核铬48.0.2564.82）Windows（Win7）Windows（Win7）https://static.oschina.net/uploads/img/201709/06152130_7MWq.png)Android(5.1)Chrome(59.0.3071.92){"0":"UncaughtReferenceError:Nameisnotdefined","1":"http://geoffzhu.cn/error-report/index.js","2":14,"3":22,"4":{}}UC{"0":"UncaughtReferenceError:Nameisnotdefined","1":"http://geoffzhu.cn/error-report/index.js","2":14,"3":22,"4":{}}微信webview{"0":"UncaughtReferenceError:Nameisnotdefined","1":"http://geoffzhu.cn/error-report/index.js","2":14,"3":22,"4":{}}IOS(10.3.2)Chrome{"0":"ReferenceError:Can'tfindvariable: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"}}UC{"0":"ReferenceError:Can'tfindvariable: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"}}WeChatwebview{"0":"ReferenceError:找不到变量: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，即可得到原始错误位置信息。对应节点代码如下varfs=require('fs')varsourceMap=require('source-map')//mapfilevarrawSourceMapJsonData=fs.readFileSync('./dist/index.min.js.map','utf-8')rawSourceMapJsonData=JSON.parse(rawSourceMapJsonData)varconsumer=newsourceMap.SourceMapConsumer(rawSourceMapJsonData);//打印出真正的错误位置console.log(consumer.originalPositionFor({line:1,column:220}））
