浏览器端 JavaScript 异常监控 For Dummies

mmm

2017/08/05 发布于 技术 分类

浏览器端 JavaScript 异常监控 For Dummies

文字内容
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
8. “解决”Script error. Access-Control-Allow-Origin: 页面域名
9. 现实中的window.onerror Browser crossorigin msg url line col error Chrome ≥ 30 √ √ √ √ √ √ Firefox ≥ 31 √ √ √ √ √ √ Safari ≥ 10 √ √ √ √ √ √ … baiduboxapp Baidu browser BaiduHD ≈3/4√ UC ≈1/4√ … IE & Edge ×
10. try & catch
11. 异步
12. Error包含的信息 Browser IE ≥ 10 & Edge IE ≤ 9 name √ √ message √ √ stack √ ×
13. IE ≥ 10 & Edge 输出如下 ReferenceError: g is not defined at f (…/f.js:3:3) at Global code (…/f.js:6:3)
14. Error stack error.name: error.message at FunctionName (url:line:col)'>url:line:col) at FunctionName (url:line:col)'>url:line:col) ... Error stack没有被标准化,不同浏览器中格式会有 差异,最终上报前需要进⾏normalize处理。
15. Error 没有 stack 的浏览器 怎么办?
16. 代码埋点
18. 组装“stack”
20. 构建过程与工具 源码 babel + transformer plugin 埋点后的代码 + 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 埋点后的JS IE & Edge …
23. 定位异常在源码中的位置(一) f.js:6:3 f.min.map f.min.js:1:31
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的JS client(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.  把 function declaration 包进 try … catch 中在不同浏览器或者不同版本之间可能产⽣不⼀ 致⾏为。uglifyjs默认开启hoist_funs,可以 解决此问题,其它压缩⼯具需要注意。 2.  更进⼀步减⼩⽂件尺⼨增⼤。 3.  更精确的定位。 4.  改进对Promise和async & await等的⽀持。 5. try … catch对性能的影响。
35. 其他问题 Tengine的combo功能,如何处理sourcemap?
37. 联系方式 微信:右⽅⼆维码 微博:下相楚狂客 欢迎投简历给hax: heshijun@baixing.com babel transformer plugin https://github.com/jacksky007/report-error