- 监听Vue.config.errorHandler
- 监听error事件
- 监听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);
}
具体的可以参考这篇文章:前端性能与异常上报