项目接入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这个错误，一开始觉得和1、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/

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

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

相关文章：
【推荐】 从海报视觉到网页设计