前端异常监控

[Inchill]

在前端工程化方兴未艾的今天，很多人会更多关注项目上线前的工程化问题，比如如何生成模版项目（脚手架）、代码测试、编译构建、流水线 CI 和 CD 等，很少会关注项目上线后的一些异常问题。对于前端异常，很多时候开发者始终处于一个被动感知的状态，当用户反馈到开发者这边时，往往线上已经出现大量 case 了。后端一般会有告警服务，前端在这方面的能力就比较缺失，所以如何用工程化的手段去解决异常监控就很有必要了。

异常类型

按照 ECMA-262 里的规范来看，一共有如下类型的异常：

• Error：基类异常
• SyntaxError：语法异常
• ReferenceError：引用异常
• RangeError：范围异常
• TypeError：类型异常
• InternalError：内部异常
• EvalError：Eval 方法异常
• URIError：URI 相关方法产生的异常

自定义 Error

Error 是所有异常的基类，所有错误共享相同的属性：

• Error.prototype.message
• Error.prototype.name
• Error.prototype.stack

当然，开发者也可以继承 Error 来自定义异常，一般而言一些库和框架会自定义异常。

异常监控

前端监控异常的方法如下：

• window.onerror
• 重写 setTimeout、setInterval 等方法，使用 try catch 来捕获错误
• window.addEventListener('unhandledrejection', errorHandler) 捕获未处理的异步 reject
• window.addEventListener('error', loadErrorHandler) 捕获资源加载异常
• 重写 fetch、XMLHttpRequest 来捕获接口错误

同步异常还比较好处理，因为会有完整的错误堆栈等信息，而异步错误就存在语焉不详的问题，因为异步错误缺失执行前的上下文环境，所以对于异步错误还需要借助前后埋点等方式作为辅助去定位错误源头。