项目接入apm后错误报警总结

此文已由做者张磊受权网易云社区发布。

欢迎访问网易云社区，了解更多网易技术产品运营经验。

前言：

后端服务通常都有监控措施，通常能够及时发现线上错误，可是不少项目的前端却没有线上报警服务，即便有错误，前端根本没法感知，但实际上用户使用的系统、浏览器等环境十分复杂，仍是有比较高的几率出现 bug 的。这时候线上错误的发现，通常有三个方向，要么依赖于用户报告，要么依赖于测试发现，要么是本身使用中发现问题。依靠用户报告，这就严重影响了体验，并且不少用户不会报告或者其余缘由复现率低，致使没有报告。因此为了解决该问题，那前端须要一个服务，遇到错误的时候，能主动上报问题，并做提醒，进行排查。同时也能够在测试环境也部署该服务，有时候测试没有发现的问题，但这个主动上报就能帮咱们提前发现代码 bug，再者咱们能够和用户同时接收到错误信息，那么咱们就能够及早修复问题，把问题的影响尽量的缩小，静默解决。

环境：

项目是 NEJ 和 regular 开发的，以 SPA 页面为主。

实施：

这里是使用 apm 做为线上报警的基础服务。同时对线上线下环境分开处理。

阶段成果：

上线该服务几个月，线上线下的报错发现的有几十个。最近愈来愈稳定，出错率愈来愈低了。固然也遇到了一些很难复现的 bug。

错误分析：

若是把错误仅仅当成错误来看，这确定是不对的，应该从错误中发现些什么，之后注意那些坑，毕竟已经有几十个错误做为参照物了，也能够拿来分析了。错误能够归为几类：

1. Uncaught TypeError: Cannot read property 'ref0' of null这种通常是在 setTimeout 里对 this.$refs 进行操做，通常作法是在 setTimeout 里，进行二次检测，但更好的作法是 clearTimeout。

2. Uncaught TypeError: Cannot read property '__cache' of undefined这种通常是在 setTimeout 里对接口请求进行操做，此时路由页面已经触发 destory 掉了，致使访问 this 对象获取不到对应的方法。通常作法是在 setTimeout 里，进行二次检测，但更好的作法是 clearTimeout。

3. 概率出错线下测试代码无问题发生，可是线上用户报错，这里通常是没有写清楚边界状况形成的。解决方案，经过错误查找到对应代码，分析逻辑。

4. Uncaught TypeError: Cannot read property 'indexOf'/'replace' of undefined后端数据返回不规范形成的，可能约定是 string 可是实际中没有返回值，又或者接口的错误处理有问题形成的。实际上二者皆有。

5. 引入公司其余服务脚本报错 这些脚本的错误，通常是通知相关人员进行 fix。

6. 由于扩展致使的报错 曾经一个测试装了一个扩展，只要访问某些页面，短期能够出现 1000+ 的错误

7. 第三方浏览器，或者手机浏览器报错

   错误信息    
   SecurityError (DOM Exception 18): Blocked a frame with origin "https://a.com" from accessing a frame with origin "https://b.com". Protocols, domains, and ports must match.
   堆栈信息    
   qqIframeRef@https://a.com/#/m/a/:54:67qqGetVideos@https://a.com/#/m/a/:68:53initVideoInstance@https://a.com/#/m/a/:115:45hook@https://a.com/#/m/a/:151:42global code@https://a.com/#/m/a/:320:26

   这种通常是第三方加的脚本，忽略便可。

8. Uncaught ReferenceError: t is not defined这个错误，一开始以为和一、2是相似的，边界未处理，再加上是 lib 库的代码。后来实际上研究了逻辑，才发现使用的 lib 部分代码丢失，在处理 ctrl + up 的时候的回调函数没了。。。后续解决方案，研究了下逻辑，不影响使用，删掉该段代码。

静态资源和后台服务不一样源

后来对静态资源单独一个域名，一开始没有考虑到不一样源的问题，apm 不报错，觉得是代码质量好了不少。后来发现错误集中在 firefox、ie 上，错误信息都是 script error。想到域名的问题，才发现 apm 至关于中止工做一段时间了。这个问题的解决方案，须要对 nej 打包进行处理，容许 script 标签添加属性。同时容许异步加载的 script 添加属性便可。接着对静态资源的服务器添加跨域 header 配置。

Access-Control-Allow-Origin: *

参考

1. https://stackoverflow.com/questions/28901166/how-do-i-add-the-crossorigin-tag-to-a-dynamically-loaded-script

2. https://developer.mozilla.org/zh-CN/docs/Web/API/GlobalEventHandlers/onerror

3. http://www.alloyteam.com/2017/03/jserror1/

免费体验云安全(易盾)内容安全、验证码等服务

更多网易技术、产品、运营经验分享请点击。

相关文章：
【推荐】 网易严选后台系统前端规范化解决方案