前端错误监控与错误日志

平时工作中没怎么接触到这部分，对它的了解也零零碎碎的。今天看了几篇文章，算是有个完整的认识了，在这里总结记录一下。

项目上线之后肯定无法避免所有的bug，有些bug出现后开发人员并不知道，有的知道了缺无法快速准确的修复。这时候就需要在代码层面去处理bug，一是方便debug，二则是通过错误处理防止程序崩溃。

参考资料：

• 前端错误日志收集方案
• 前端错误监控与上报
• Vue SPA项目 + Sentry 实现前端错误监控

错误监控

最常用的错误监控当然是try catch，通过catch捕获到错误后进一步作出处理，但是try catch无法捕获异步产生的错误，并且实际工作中也不可能为所有的代码都加上try catch，所以能否全局捕获错误呢？

• React中

React的生命周期中提供了一个勾子用来处理错误：componentDidCatch，使用它可以非常简单的捕获react下的错误信息

componentDidCatch(error, info) {     
  console.log(error, info);
}

• Vue中

Vue中使用Vue.config.errorHandler勾子来处理错误

Vue.config.errorHandler = function (err, vm, info) {
  // handle error
  // `info` 是 Vue 特定的错误信息，比如错误所在的生命周期钩子
  // 只在 2.2.0+ 可用
}

• 其他项目中

对于没有使用Vue或React的项目，可以通过onerror或addEventlistener监控全局错误(当然使用 react 或 vue 的项目同样可以但没必要)
onerror 或 addEventListener 都可以捕获到一些未知的错误，然而这两个的用法有一些区别：

// onerror 中有多个参数，需要我们自行使用或组合
window.onerror = (msg, url, row, col, error) => {
  console.log({msg, url, row, col, error});
};
setTimeout(() => {
  undefined.map(v => v);
}, 1000);

// addEventListener 中直接返回封装好的错误事件对象
// 这里要注意，此时addEventListener的第三个参数要为true
// 即在捕获阶段触发，这样才能获取到错误事件
window.addEventListener('error', (e) => {
  console.log(e);
}, true);

// 除此之外，addEventListener 还可以捕获资源加载错误、未 catch 的 promise 错误。
// 捕获未 catch 的 promise 错误
window.addEventListener("unhandledrejection", e => {
  e.preventDefault();
  console.log(e);
});
Promise.reject('promiseError');

• ajax错误监控

项目使用了axios的话可以配置拦截器实现错误监控

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    return response;
  }, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
  });

错误上报

上边说了错误监控，错误上报其实就是在监控到出错之后，发送ajax请求，把错误信息发送给服务端。另外还可以利用Image对象来发送信息。

跨域js文件错误也是可以捕获的，会提示 script error

第三方异常监控平台

常用的方案有：

1. Sentry
2. Fundebug
3. Bugsnag
4. BetterJS

这里只了解了一下Sentry，他的文档很友好，对于Vue和React都做了支持，按文档引入即可。