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

叁叁肆2018-11-06 10:29

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

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

前言:


后端服务一般都有监控措施,一般可以及时发现线上错误,但是很多项目的前端却没有线上报警服务,即使有错误,前端根本无法感知,但实际上用户使用的系统、浏览器等环境十分复杂,还是有比较高的概率出现 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/


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

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


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