异常监控和上报

异常分类

1. JS 运行时异常
2. 资源加载错误
3. 未处理的 Promise 错误
4. 异步请求异常

JS 运行时异常捕获方法

可以使用window.onerror或window.addEventListener('error'捕获 JS 运行时异常

window.onerror = function(errorMessage, scriptURI, lineNo, columnNo, error) {
    console.log('errorMessage: ' + errorMessage); // 异常信息
    console.log('scriptURI: ' + scriptURI); // 异常文件路径
    console.log('lineNo: ' + lineNo); // 异常行号
    console.log('columnNo: ' + columnNo); // 异常列号
    console.log('error: ' + error); // 异常堆栈信息
};

跨域问题解决 onerror无法捕获跨域脚本的异常信息，统一返回 Script error。解决方案便是 script 属性配置 crossorigin="anonymous" 并且服务器添加Access-Control-Allow-Origin。

<script src="http://cdn.xxx.com/index.js" crossorigin="anonymous"></script>

sourcemap 支持 经过压缩混淆的代码上报的错误位置难以定位调试问题，我们可以在上报服务中间对进行处理，将处理过的错误信息上报到最终的统计分析平台。

MVVM 框架框架支持 很多 MVVM 框架框架都内置了错误处理，页面错误都被框架本身捕获处理了，onerror无法进行一场捕获。针对不同的 MVVM 框架我们需要结合框架的特性进行处理。

资源加载错误捕获

TODO:

未处理的 promise 错误捕获

当 promise 被 reject 并且错误信息没有被处理的时候，会抛出一个unhandledrejection。 这个错误不会被window.onerror以及window.addEventListener('error')捕获，但是有专门的window.addEventListener('unhandledrejection')方法进行捕获处理。

window.addEventListener('rejectionhandled', event => {
  // 错误的详细信息在reason字段
  console.log(event.reason);
});

fetch 与 xhr 错误的捕获

对于 fetch 和 xhr，我们需要通过改写它们的原生方法，在触发错误时进行自动化的捕获和上报。

重写console.error()

var consoleError = window.console.error;
window.console.error = function () {
    alert(JSON.stringify(arguments)); // 自定义处理
    consoleError && consoleError.apply(window, arguments);
};

前端监控系统

sentry bugsnag

参考文档

谈谈前端异常捕获与上报 页面错误监控知识点 一篇文章教你如何捕获前端错误