基于vue项目前端报错监控

最近要做一个vue项目的监控，来实时监听正式环境的异常，并且快速响应进行bug修改，其实vue项目报错主要从下面三个方法进行错误收集

1.

window.addEventListener('unhandledrejection', event => {

  event.promise.catch((e) => {

    utils.errorCatch(e, 3)

  })

})

 

2.

window.onerror = function (errorMessage, scriptURI, lineNo, columnNo, error) {

  // 记录堆栈信息

  if (error) {

    error.url = error.stack

  }

  utils.errorCatch(error, 4)

}

 

3.

Vue.config.errorHandler = function (err, vm, info) {

    if (err) {

      err.url = err.stack

    }

    utils.errorCatch(err, 5) //  发送请求给后端进行保存

  }

 

使用上面三个方法就能捕获收集绝多数的js报错，然后可以展示成一个列表供筛选如下：