JS

刘⼩杰

开发阶段做了“足够的”测试， 上线后还是在某些情况下出现错 误或异常，等发现的时候已经过 了很久。

QA汇报了错误，但是开发却很难 快速准确地定位到出现异常的源 码位置。

“万能的”window.onerror

于是捕获到了异常

msg Script error. file “” line 0 col 0 err undefined

“Script error.”的原因

当HTML与script不同域时，浏览器为了防止泄漏敏感信息， 对异常内容和位置信息做了mute处理。 http://blog.jeremiahgrossman.com/2006/12/i-know-ifyoure-logged-in-anywhere.html

参考方案

淘宝前端团队：JSTracker http://taobaofed.org/blog/2015/10/28/jstracker-howto-collect-data/  腾讯imweb团队：badjs https://github.com/BetterJS/badjs-report  其他 http://www.cnblogs.com/cathsfz/p/how-to-capture-andanalyze-javascript-error.html http://rapheal.sinaapp.com/2014/11/06/javascripterror-monitor/

“解决”Script error.

<scriptcrossoriginsrc=“…”></script>  Access-Control-Allow-Origin:页面域名

现实中的window.onerror



Browser Chrome≥ 30 Firefox≥31 Safari≥10 … baiduboxapp Baidubrowser BaiduHD UC … IE&Edge



crossorigin √ √ √



msg √ √ √



url √ √ √



≈3/4√



line col √√ √√ √√



error √ √ √



≈1/4√ ×

try&catch

异步

Error包含的信息



Browser IE≥10&Edge IE≤9



name √ √



message √ √



stack √ ×

IE≥10&Edge 输出如下

ReferenceError:gisnotdefined atf(…/f.js:3:3) atGlobalcode(…/f.js:6:3)

Errorstack

error.name:error.message atFunctionName(url:line:col) atFunctionName(url:line:col) ...  Errorstack没有被标准化，不同浏览器中格式会有 差异，最终上报前需要进⾏normalize处理。

Error没有 stack的浏览器 

怎么办？

代码埋点

组装“stack”

构建过程与工具



源码 babel+transformerplugin



埋点后的代码 + sourcemap



https://github.com/jacksky007/report-error

代码埋点的限制与不足

1. 以function为单位的代码埋点，定位的⾏列信息与实际异常抛 出的准确位置稍有偏差

2. ⽂件尺⼨增⼤，uglify & gzip -6 后增⼤ 5% ~ 15% 3. 对Promise的异常处理⽀持不够完美

分浏览器加载 JS



Browser



JS



Chrome≥ 30 Firefox≥ 31源JS Safari≥ 10



baiduXXX UC IE&Edge …



埋点后的JS

定位异常在源码中的位置（一）



f.js:6:3



f.min.js:1:31



f.min.map

定位异常在源码中的位置（二）

f.re.map f.re.js:13:5

f.re.min.js:1:87

定位异常在源码中的位置（二）



f.re.min.map



f.re.min.js:1:87

定位异常在源码中的位置（三）

f.js:5:0

上报、存储

Sentry  Sentry的JSclient（raven.js）集成了TraceKit， 上报前会对Error进⾏normalize处理。

发布

release f.js f.min.js f.min.map f.re.min.js f.re.min.map



sentry

统计

检索 (Chrome)

检索 (IE 10)

检索 (IE 8)

拓展应用

灰度发布与测试

已知问题与未来改进方向

1.把 functiondeclaration包进 try…catch 中在不同浏览器或者不同版本之间可能产⽣不⼀ 致⾏为。uglifyjs默认开启hoist_funs，可以 解决此问题，其它压缩⼯具需要注意。

2.更进⼀步减⼩⽂件尺⼨增⼤。 3.更精确的定位。 4.改进对Promise和async&await等的⽀持。 5.try…catch对性能的影响。

其他问题

Tengine的combo功能，如何处理sourcemap？

相关链接

window.onerror https://html.spec.whatwg.org/multipage/ webappapis.html#errorevent https://developer.mozilla.org/en-US/docs/Web/JavaScript/ Reference/Global_Objects/Error crossorigin https://trac.webkit.org/changeset/76429/trunk/Source/WebCore/ dom/ScriptExecutionContext.cpp https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ script#Browser_compatibility https://bugs.chromium.org/p/chromium/issues/detail?id=159566 Error https://developer.mozilla.org/en-US/docs/Web/JavaScript/ Reference/Global_Objects/Error 

联系方式

微信：右⽅⼆维码  微博：下相楚狂客  欢迎投简历给hax： heshijun@baixing.com  babeltransformerplugin https://github.com/jacksky007/report-error