此文已由作者张磊授权网易云社区发布。
欢迎访问网易云社区,了解更多网易技术产品运营经验。
后端服务一般都有监控措施,一般可以及时发现线上错误,但是很多项目的前端却没有线上报警服务,即使有错误,前端根本无法感知,但实际上用户使用的系统、浏览器等环境十分复杂,还是有比较高的概率出现 bug 的。这时候线上错误的发现,一般有三个方向,要么依赖于用户报告,要么依赖于测试发现,要么是自己使用中发现问题。依靠用户报告,这就严重影响了体验,而且很多用户不会报告或者其他原因复现率低,导致没有报告。所以为了解决该问题,那前端需要一个服务,遇到错误的时候,能主动上报问题,并作提醒,进行排查。同时也可以在测试环境也部署该服务,有时候测试没有发现的问题,但这个主动上报就能帮我们提早发现代码 bug,再者我们可以和用户同时接收到错误信息,那么我们就可以及早修复问题,把问题的影响尽可能的缩小,静默解决。
项目是 NEJ 和 regular 开发的,以 SPA 页面为主。
这里是使用 apm 作为线上报警的基础服务。同时对线上线下环境分开处理。
上线该服务几个月,线上线下的报错发现的有几十个。最近越来越稳定,出错率越来越低了。当然也遇到了一些很难复现的 bug。
如果把错误仅仅当成错误来看,这肯定是不对的,应该从错误中发现些什么,以后注意那些坑,毕竟已经有几十个错误作为参照物了,也可以拿来分析了。错误可以归为几类:
Uncaught TypeError: Cannot read property 'ref0' of null这种一般是在 setTimeout 里对 this.$refs 进行操作,一般做法是在 setTimeout 里,进行二次检测,但更好的做法是 clearTimeout。
Uncaught TypeError: Cannot read property '__cache' of undefined这种一般是在 setTimeout 里对接口请求进行操作,此时路由页面已经触发 destory 掉了,导致访问 this 对象获取不到对应的方法。一般做法是在 setTimeout 里,进行二次检测,但更好的做法是 clearTimeout。
几率出错线下测试代码无问题发生,但是线上用户报错,这里一般是没有写清楚边界情况造成的。解决方案,通过错误查找到对应代码,分析逻辑。
Uncaught TypeError: Cannot read property 'indexOf'/'replace' of undefined后端数据返回不规范造成的,可能约定是 string 但是实际中没有返回值,又或者接口的错误处理有问题造成的。实际上两者皆有。
引入公司其他服务脚本报错 这些脚本的错误,一般是通知相关人员进行 fix。
因为扩展导致的报错 曾经一个测试装了一个扩展,只要访问某些页面,短时间可以出现 1000+ 的错误
第三方浏览器,或者手机浏览器报错
错误信息 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
这种一般是第三方加的脚本,忽略即可。
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: *
更多网易技术、产品、运营经验分享请点击。
相关文章:
【推荐】 从海报视觉到网页设计