前端监控系列-错误监控

错误监控主要是为了在sls看板上，能更加全面的展示我们项目的情况，所以这边加了个错误上报的口子，其实错误上报很简单，只需要全局捕获几种类型的错误就好了。

// 监听资源错误
window.addEventListener(
  'error',
  (e) => {
    // 避免重复上报
    if (e.target !== window) {
      reportError({ e_name: 'addEventListenerError', e_msg: nodeToString(e.target).replace('<', '<').replace('>', '>'), e_stack: e.target.currentSrc })
    }
  },
  true
)

// 监听js错误
window.onerror = function (msg, url, row, col, error) {
  if (msg && url && row && col && error) {
    reportError({ e_name: 'onError', e_msg: error.message, e_stack: error.stack })
  }
}

// 监听promise相关报错
window.addEventListener(
  'unhandledrejection',
  (e) => {
    if (e.reason) {
      reportError({ e_name: 'unhandledRejection', e_msg: e.reason.message, e_stack: e.reason.stack })
    }
  },
  true
)

// 监听console.error
const consoleError = window.console.error
window.console.error = function (e) {
  if (e.name || e.message) {
    reportError({ e_name: 'consoleError', e_msg: e.message, e_stack: e.stack })
  }
  consoleError && consoleError.apply(window, arguments)
}

window.onerror 和 window.addEventListener(‘error’)的异同:

相同点是：

1. 都可以捕获到 window 上的 js 运行时错误。

区别是：

1. 捕获到的错误参数不同
2. window.addEventListener(‘error’)可以捕获资源加载错误，但是 window.onerror 不能捕获到资源加载错误

window.onerror = function (msg, url, row, col, error) {
  /**
   * @param {String}  msg    错误信息
   * @param {String}  url    出错文件
   * @param {Number}  row    行号
   * @param {Number}  col    列号
   * @param {Object}  error  错误详细信息
   */
  console.log("+++++++++++++++++++++监听了onerror", msg, url, row, col, error);
  if (msg) {
    reportError({ errorName: "onerror", errorMsg: msg });
  }
  return true;
};


window.addEventListener('error', (e) => {
  console.log("+++++++++++++++++++++监听了onerror", msg, url, row, col, error);
  if (e.message || e.error) {
    reportError({ e_name: 'addEventListenerError', e_msg: e.message, e_stack: e.error.stack }) // stack数据太长，无法上报
  }
})