vue项目如何捕获错误进行上报

1. 监听Vue.config.errorHandler
2. 监听error事件
3. 监听unhandledrejection事件，捕获promise的报错

话不多说，直接上代码

import Vue from 'vue'
import * as api from '@/api/index'

Vue.config.errorHandler = (err) => {
  console.error(err)
  const {
    message, // 异常信息
    name, // 异常名称
    script, // 异常脚本url
    line, // 异常行号
    column, // 异常列号
    stack // 异常堆栈信息
  } = err
  // 错误上报到收集报错的平台
  captureError({
    name, errorMessage: message, scriptURI: script, lineNo: line, columnNo: column, error: stack
  })
}

window.addEventListener('error', function (errorMessage, scriptURI, lineNo, columnNo, error) {
  captureError({
    errorMessage, scriptURI, lineNo, columnNo, error
  })
})

window.addEventListener('unhandledrejection', function (errorMessage, scriptURI, lineNo, columnNo, error) {
  captureError({
    errorMessage, scriptURI, lineNo, columnNo, error
  })
})

function captureError (err) {
  const type = err.name || 'noType'
  const message = err.errorMessage || 'noMessage'
  const stack = err.error ? JSON.stringify(err.error) : 'noStack'
  api.postH5({
    key: 'qqRedPacketMallError',
    eventId: type,
    eventName: message,
    eventContent: stack
  })
}

由于这边对错误上报需要比较及时，所以没有做合并上报，需要的同学可以了解一下 navigator.sendBeacon

window.addEventListener('unload', logData, false);
 
function logData() {
    navigator.sendBeacon("/log", analyticsData);
}

具体的可以参考这篇文章：前端性能与异常上报