FE.B-异常监控原理

共计 2813 个字符，预计需要花费 8 分钟才能阅读完成。

js 错误主要有 2 类：语法错误、脚本错误; 监控方式有 2 种：try-catch、window.onerror
try-catch 异常处理
try-catch 处理异常的能力有限，只能捕获到运行时的非异步错误，对于语法错误和异步错误就显得无能为力。
try{
error // <- 未定义变量
} catch(e) {
console.log(‘ 捕获到错误 ’);
console.log(e);
}
// 输出:
//ReferenceError: error is not defined
try {
var error = ‘error’；// <- 大写分号
} catch(e) {
console.log(‘ 捕获不到错误 ’);
console.log(e);
}
// 输出：
//Uncaught SyntaxError: Invalid or unexpected token
try{
setTimeout(function () {
error // <- 异步错误
}, 0)
} catch(e) {
console.log(‘ 捕获不到错误 ’);
console.log(e);
}
// 输出：
//Uncaught ReferenceError: error is not defined
window.onerror 异常处理
window.onerror 捕获异常的能力比 try-catch 稍强一点，无论是异步还是非异步的错误，onerror 都能捕获到运行时的错误
/**
* @param {String} msg 错误信息
* @param {String} url 出错文件
* @param {Number} row 行号
* @param {Number} col 列号
* @param {Object} error 错误详细信息
*/
window.onerror = function (msg, url, row, col, error) {
console.log(‘ 捕获到运行时同步错误了 ’);
console.log({
msg, url, row, col, error
})
return true;
};
error; // <- 未定义变量
// 输出：
// 捕获到错误了
//{msg: “Uncaught ReferenceError: error is not defined”, …}
window.onerror = function (msg, url, row, col, error) {
console.log(‘ 捕获到异步错误了 ’);
console.log({
msg, url, row, col, error
})
return true;
};
setTimeout(() => {
error; // <- 未定义变量
});
// 输出：
// 捕获到异步错误了
//{msg: “Uncaught ReferenceError: error is not defined”, …}
在实际使用中，onerror 主要用来捕获预料之外的错误，try-catch 则是用来在可预见情况下监控特定的错误，两者结合使用更加高效
但是对于语法错误，window.onerror 还是捕获不了，所以我们在写代码的时候要尽可能避免语法错误，不过一般这种错误比较容易察觉。
除了语法错误不能捕获之外，网络异常的错误也是不能捕获的
<script>
window.onerror = function (msg, url, row, col, error) {
console.log(‘ 我知道错误了 ’);
console.log({
msg, url, row, col, error
})
return true;
};
</script>
<img src=”./404.jpg”/>
输出：
GET http://localhost:8081/404.jpg 404 (Not Found)
这是因为网络请求是没有事件冒泡的，所以需要在捕获阶段才能捕获到异常，虽然这样可以捕获到网络的异常，但无法判断 http 的状态，比如该异常是 404 还是 500，想要知道这个状态就必须和服务日志一起排查了。
<script>
window.addEventListener(‘error’, (msg, url, row, col, error) => {
console.log(‘ 我知道错误了 ’);
console.log({
msg, url, row, col, error
})
return true;
}, true);
</script>
<img src=”./404.jpg”/>
输出：
GET http://localhost:8081/404.jpg 404 (Not Found)
我知道错误了
{msg: Event, url: undefined, row: undefined, col: undefined, error: undefined}
Promise 的错误没有使用 catch 去捕获的话，上述的方式都是不能捕获到错误的。但通过监听 unhandledrejection 事件，可以捕获未处理的 Promise 错误。但是需要注意的是，这个事件是有兼容问题的。
window.addEventListener(“unhandledrejection”, function(e){
e.preventDefault()
console.log(‘ 我知道 promise 的错误了 ’);
console.log(e.reason);
return true;
});
new Promise((resolve, reject) => {
reject(‘promise error’);
});
输出：
我知道 promise 的错误了
promise error
说完这些捕获异常的方式之后，该说说异常上报的常用方法了。
异常上报
当我们拿到报错信息之后，就需要上报这些异常信息，我们上报的方式通常有两种方法：

通过 Ajax 发送数据
通过动态创建 img 标签的形式

function report(error) {
var reportUrl = ‘http://xxxx/report’;
new Image().src = reportUrl + ‘error=’ + error;
}
script error 脚本错误
在一个域下引用了其他域的脚本，又没有去做额外的配资，就很容易产生 Script error。说到最后这就是因为浏览器的同源策略产生的。所以最好我们还是使用跨源资源共享机制 (CORS)
// http://localhost:8080/index.html
<script>
window.onerror = function (msg, url, row, col, error) {
console.log(‘ 我知道错误了，也知道错误信息 ’);
console.log({
msg, url, row, col, error
})
return true;
};
</script>
<script src=”http://localhost:8081/test.js” crossorigin></script>

// http://localhost:8081/test.js
setTimeout(() => {
console.log(error);
});