一、意义:
JavaScript报错严重影响业务逻辑,比如点击后js报错用户将操作不了,用户会觉得卡死,渲染JS报错将导致用户看到的页面异常,所以JS报错后果也是很严重的。为了应付用户线上环境各种异常,监控JavaScript报错也是很有必要
二、捕获方法:
首先要明确一点,所有错误都需要被window.onerror接收,因为该方法能解析出错误消息、错误文件、行、列、错误栈,通过这些信息为后面通过sourcemap还原源代码有重要作用。
1、通过window.onerror捕获JS事件队列错误
window.onerror = function (msg: string, file: string, line: number, column: number, err: Error) {
const stack = getStackMsg(err);
reportError({msg, file, line, column, stack});
return false;
};
2、通过window.onunhandledrejection捕获Promise未捕获的报错,并抛出
window.onunhandledrejection = function(event: PromiseRejectionEvent) {
if (event.reason instanceof Error) {
throw event.reason;
}
};
3、通过Vue.config.errorHandler捕获vue项目报错,并抛出
Vue.config.errorHandler = function (err: ErrorEvent) {
setTimeout(() => {
throw err;
});
}
三、上报参数:
window.onerror上报以下参数:
1、path: string // 页面url
2、msg: string // 错误消息
3、file: string // 错误文件
4、line: number // 错误行
5、column: number // 错误列
6、stack?: undefined|string // 错误堆栈
后面根据错误文件、行、列还原源代码
更快捷更准确接入前端监控