前端错误监控与上报

错误类型

我们一般比较关心以下三种类型的错误

• js执行错误
• 资源加载错误
• http请求错误

全局捕获错误

• window.onerror

 window.onerror = function (msg, url, row, col, error) {
    console.log({ msg, url, row, col, error });
 }

注意点：
1 window.onerror只能捕获在它定义之后的代码错误，在它定义之前的代
码错误无法进行捕捉，所以我们要将它写在所有 JS 脚本的前面。
2 无法捕获到网络异常的错误，例如图片加载失败等就无法进行捕获。
3 只有在返回 true 的时候，异常才不会向上抛出，否则即使是知道异常的
发生，控制台还是会显示 Uncaught Error: xxxxx。
4 无法捕获Promise 错误

• window.addEventListener()

  window.addEventListener('error', function (error) {
    console.log(error)
  }, true)

注意点：
1 window.addEventListener只能捕获在它定义之后的代码错误，在它定义之前的代码错误无法进行捕捉，所以我们要将它写在所有 JS 脚本的前面。
2 可以捕获到网络异常的错误，例如图片加载失败等就可以进行捕获，但是window.addEventListener的第三个参数必须是true才可以，这是因为网络请求异常不会事件冒泡，因此必须在捕获阶段将其捕捉。
3 无法捕获Promise 错误。

我们使用window.onerror来捕获js执行错误，使用window.addEventListener来捕获资源加载错误，对于http请求错误我们一般有 error回调函数去进行捕获。

上报

我们一般使用Ajax 发送数据实现上报，上报信息尽可能的详细，包括用户的设备信息，网络情况，错误信息，时间等等，上报并不是我们的终点，我们的终点是根据上报信息实现自动告警，除此之外，我们还有一个后台用于展示我们的上报信息。
代码示例：

// 上报函数
function send(data) {
  // 发起ajax请求
}
// 初始化函数
function init() {
    window.onerror = function (msg, url, row, col, error) {
      let jsError = {
         type: 'jsError',
         timestamp: Date.now(),
         url: url || location.href,
         row,
         col,
         msg
      }
      if(error && error.stack) {
        jsError['stack'] = error.stack.toString()
      }
      send(jsError)
    }
    window.addEventListener('error', function (event) {
      let sourceError = {
         type: 'sourceError',
         timestamp: Date.now(),
         url: url || location.href,
      }
      let eleArray = ["script", "link", "img"]
      let ele = event.target || event.srcElement
      let tagName = ele.tagName.toLowerCase()
      if (eleArray.indexOf(tagName) !== -1) {
          sourceError['msg'] = tagName === "link" ? ele.href: ele.src
          send(sourceError)
      }
      return false
    }, true)

}
let errorMonitor = {
    init,
    send
}

export default errorMonitor