前端监控系统之异常情况

前端异常的几种情况

• JS编译时异常, 比如使用了一个并没有提供的属性/方法
• 运行时异常, 比如在需要判空的地方没有判空
• 加载前端资源的时候报错, 跨域, 服务器资源异常, CDN错误, 路径不正确等
• 接口请求时异常, 请求了一个不存在的地址, 或者请求方法不正确, 需要用POST, 但是你使用了GET之类 如果你使用了GraphQL, 有可能你的schema与服务端API提供的不符, 也会出错.

按照影响程度来看

资源类异常的表现为, 页面空白, 未显示出想要的效果, 排版错误 等. 如果只是样式文件出现问题, 本身并不影响使用, 似乎不应该排在影响程度最大的位置. 但是由于现在的前端站点已经越来越多的采用React, Angular, Vue之类的前端框架, 导致页面几乎都是由JS生成的, 如果资源类引用错误, 将直接导致页面无法渲染(在这里, 我们只讨论CSR的情况, SSR另当别论)

编译时错误的表现为, 代码提示信息错误. 如果非要忽略这个错误信息继续往下写的话, 代码就无法运行了, 你如果使用了webpack类的打包的工具, 就会直接报错. 所以这个的影响虽然比较大, 但是也是比较容易发现的.

运行时异常的表现为, 进行交互的时候页面会出错, 这里的出错指的是只要没有达到用户的预期效果, 都成为出错, 不限于在console输出error, 或者页面空白等. 这个错误当然也很严重, 但是因为不影响普通的展示, 所以往后面排.

接口请求异常, 请求的时候打开控制台看network 里面就有很清楚的解释了. 这里一般代码里都会做一些处理, 错误情况影响会比较小.

所以影响的程度排名这里定位:

资源类异常>编译时错误>运行时异常>接口异常

解决思路

对于编译时异常, 我们可以使用TypeScript来进行解决, 使用TypeScript你可以知道哪些API是系统提供的, 哪些是不提供的.

可是其它的错误信息, 我们应该怎么获取呢? 这里就要引入我们的主题了, 前端的错误监控

想要监控这些错误, 得依赖window提供的时间 onerror, 当JavaScript运行时错误（包括语法错误）发生时， window 会触发一个 ErrorEvent 接口的 error 事件，并执行window.onerror()。

这里是 onerror 的签名

window.onerror = function(message, source, lineno, colno, error) { … }

• message：错误信息（字符串）。可用于HTML onerror=“”处理程序中的event。
• source：发生错误的脚本URL（字符串）
• lineno：发生错误的行号（数字）
• colno：发生错误的列号（数字）
• error： Error对象 （对象）

后面我们会接着整理具体如何收集, 什么时机, 以及如何上报等.