AirJD 焦点
AirJD

没有录音文件
00:00/00:00
加收藏

浏览器端JS异常监控

发布者 FEer   简介 前端技术
发布于 1481868674759  浏览 4189 关键词 JavaScript, 前端 
分享到

第1页

JS

刘⼩杰



第2页

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



第3页

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



第4页

“万能的”window.onerror



第5页

于是捕获到了异常

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



第6页

“Script error.”的原因

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



第7页

参考方案

淘宝前端团队: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/



第8页

“解决”Script error.

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



第9页

现实中的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√ ×



第10页

try&catch



第11页

异步



第12页

Error包含的信息



Browser IE≥10&Edge IE≤9



name √ √



message √ √



stack √ ×



第13页

IE≥10&Edge 输出如下

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



第14页

Errorstack

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



第15页

Error没有 stack的浏览器 

怎么办?



第16页

代码埋点



第18页

组装“stack”



第20页

构建过程与工具



源码 babel+transformerplugin



埋点后的代码 + sourcemap



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



第21页

代码埋点的限制与不足

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

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



第22页

分浏览器加载 JS



Browser



JS



Chrome≥ 30 Firefox≥ 31源JS Safari≥ 10



baiduXXX UC IE&Edge …



埋点后的JS



第23页

定位异常在源码中的位置(一)



f.js:6:3



f.min.js:1:31



f.min.map



第24页

定位异常在源码中的位置(二)

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

f.re.min.js:1:87



第25页

定位异常在源码中的位置(二)



f.re.min.map



f.re.min.js:1:87



第26页

定位异常在源码中的位置(三)

f.js:5:0



第27页

上报、存储

Sentry  Sentry的JSclient(raven.js)集成了TraceKit, 上报前会对Error进⾏normalize处理。



第28页

发布

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



sentry



第29页

统计



第30页

检索 (Chrome)



第31页

检索 (IE 10)



第32页

检索 (IE 8)



第33页

拓展应用

灰度发布与测试



第34页

已知问题与未来改进方向

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

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



第35页

其他问题

Tengine的combo功能,如何处理sourcemap?



第36页

相关链接

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 



第37页

联系方式

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



支持文件格式:*.ppt, *.pptx, *.pdf
上传最后阶段需要进行在线转换,可能需要1~2分钟,请耐心等待。