这是我参与「第四届青训营」笔记创作活动的的第3天
如何捕获前端异常？
先说结论：
// final: Promise async/await unhandledrejection事件监听
window.addEventListener("unhandledrejection", e => {
throw e.reason
});
// 同步、异步、资源加载
window.addEventListener('error', args => {
console.log(
'error event:', args
);
return true;
}, true);
首先联想到异常捕获的时候，第一反应就是使用try-catch来收集错误。
但它不能捕获到异步错误如：
try {
//异步代码
} catch (err) {
}
这是因为JS代码开始后，会依照Run-to-completion执行同步代码(1)，结束后才会启动事件循环来监听时间。而try-catch 作为同步代码的异常捕获，在(1)之前就执行完了，那么异步发生在其之后，自然就不会被捕获了。
因此，我们选择了使用error事件监听（用于监听同步、异步、资源加载）和 unhandledrejection事件监听（用于Promise和async/await）来处理前端返回的异常。
对前端异常监控重要就是如果通过抛出的log来判断这个异常的名字、类型和发生位置，才能有效定位错误所在，因此以下将简单根据不同错误所抛出的信息进行解释。
error事件监听
同步、异步错误
同步JS错误：
异步JS错误：
常见的同步错误有以下几种：
- ReferenceError：引用的变量不存在
- TypeError：数据类型不正确
- RangeError：数据值不在其允许的范围内
- SyntaxError：语法错误
资源加载错误
从返回的信息差异可以看出，资源记在错误往往更像是url错误，因此没有message，但它可以更详细地展示错误资源的类型
Promise和async/await异常
可以看出抛出error.reason的信息中，就和刚刚提到的返回错误信息差不多，在reason中，我们可以清晰地看到错误名称、地址和错误返回信息等内容，而error本身的信息中，可以捕获到它是个unhandledrejection，并且清晰看到其事件时PromiseRejectionEvent以及异常发生的时间。
总结
通过error返回的信息，我们就能基本知道自己实际上需要收集和统计前端异常的那些数据来进行分析，其中包括但不限于异常的名字和类型，发生的时间和位置等。
参考资料：
