前端异常监控实战方案

本文简单分析前端异常监控的几种方式

一、自研代码监控sdk

下面讲述三种可以捕捉到的前端错误

1. 资源加载错误，通过 addEventListener('error', callback, true) 在捕获阶段捕捉资源加载失败错误。
2. js 执行错误，通过 window.onerror 捕捉 js 错误。
3. promise 错误，通过 addEventListener('unhandledrejection', callback)捕捉 promise 错误，但是没有发生错误的行数，列数等信息，只能手动抛出相关错误信息。

通过数组变量 errors 在错误发生时存储错误的相关信息,可以在控制台打印,项目有做监控系统,可以通过后台接口上传异常数据

let monitor = {
  errors: []
};
// 捕获资源加载失败错误 js css img...
addEventListener(
  "error",
  e => {
    const target = e.target;
    if (target !== window) {
      const errMsg = {
        type: target.localName,
        url: target.src || target.href,
        msg: (target.src || target.href) + " is load error",
        // 错误发生的时间
        time: new Date().getTime()
      };
      monitor.errors.push(errMsg);
      console.log(" 资源加载失败错误: ", errMsg);
    }
  },
  true
);
// 监听 js 错误
window.onerror = function(msg, url, row, col, error) {
  const errMsg = {
    type: "javascript",
    row: row,
    col: col,
    msg: error && error.stack ? error.stack : msg,
    url: url,
    // 错误发生的时间
    time: new Date().getTime()
  };
  monitor.errors.push(errMsg);
  console.log(" js 错误: ", errMsg);
};
// 监听 promise 错误 缺点是获取不到行数数据
addEventListener("unhandledrejection", e => {
  const errMsg = {
    type: "promise",
    msg: (e.reason && e.reason.msg) || e.reason || "",
    // 错误发生的时间
    time: new Date().getTime()
  };
  monitor.errors.push(errMsg);
  console.log(" promise 错误: ", errMsg);
});

vue2.2.0+ 版本可以通过以下方式监听vue项目中的异常

// vue全局异常处理
Vue.config.errorHandler = function(err, vm, info) {
  // handle error
  // `info` 是 Vue 特定的错误信息，比如错误所在的生命周期钩子
  // 只在 2.2.0+ 可用
  console.log("vue异常 err, vm, info: ", err, vm, info);
};

 二、sentry(商业收费)等项目监控平台

sentry官网:https://sentry.io

 三、React项目异常监控

react componentDidCatch

React 16 提供了一个内置函数 componentDidCatch，使用它可以非常简单的获取到 react 下的错误信息

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

网易云团队的方案

https://github.com/x-orpheus/catch-react-error