异常监控
最外层
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。