Skip to main content

异常监控

最外层

window.onerror = function (message, url, line, column, error) {
console.log(‘log—onerror::::’,message, url, line, column, error);
}

window.addEventListener(‘unhandledrejection’, event => {
console.log(event.reason);
});

为了便于分析发生的错误,一般利用 window.onerror 事件来监听错误的发生。 它比 try catch 的捕获错误信息的能力要强大。

注意事项​

window.onerror 可以捕获常见语法、同步、异步错误等错误; window.onerror 无法捕获 Promise 错误、网络错误; window.onerror 应该在所有 JS 脚本之前被执行,以免遗漏; window.onerror 容易被覆盖,在处理回调时应该考虑,被人也在使用该事件监听。

语法错误​

往往在 IDE 中就已经暴露 语法错误无法被 try catch 处理

同步错误​

JS 引擎在执行脚本时,把任务分块压入事件栈,轮询取出执行,每个事件任务都有自己的上下文环境, 在当前上下文环境同步执行的代码发生错误都能被 try catch 捕获,保证后续的同步代码被执行。

try catch 也能捕获 await 错误

异步错误​

常见的 setTimeout 等方法会创建新的事件任务插入事件栈中,待后续执行。 所以 try catch 无法捕获其他上下文的代码错误。

try {
setTimeout(() => {
error; // 异步错误
});
} catch (e) {
console.log("我感知不到错误");
}

网络错误​

由于网络请求异常不会冒泡,应此需要在事件捕获阶段才能获取到。 我们可以利用 window.addEventListener。比如代码、图片等重要 CDN 资源挂了,能及时获得反馈是极为重要的。

window.addEventListener(
"error",
(error) => {
console.log("404 错误");
console.log(error);
// return true; // 中断事件传播
},
true
);

window.onerror 与 window.addEventListener window.addEventListener 的好处,不怕回调被覆盖,可以监听多个回调函数,但记得销毁避免内存泄漏与错误。 但无法获取 window.onerror 那么丰富的信息。一般只用 window.addEventListener 来监控资源加载错误。

对于网络请求自定义错误,最好是手动上报。

Promise 错误​

如果你在使用 promise 时未 catch 的话,那么 onerror 也无能为力了。

Promise.reject("promise error");
new Promise((resolve, reject) => {
reject("promise error");
});
new Promise((resolve) => {
resolve();
}).then(() => {
throw "promise error";
});

同样你可以利用 window.onunhandledrejection 或 window.addEventListener("unhandledrejection")来监控错误。 接收一个 PromiseError 对象,可以解析错误对象中的 reason 属性,有点类似 stack。

具体兼容处理在 TraceKit.js 可以看到。

上报方式​

img 上报 ajax 上报

function report(errInfo) {
new Image().src = "http://your-api-website?data=" + errInfo;
}

ajax 应使用的类库而已,大同小异。

注意:img 请求有长度限制,数据太大最好还是用 ajax.post。

参考​

https://github.com/Godiswill/blog/issues/7