前端错误监控收集与上报

1、JavaScript 脚本错误(同步任务及除了 new Image() 之外的资源加载错误)：
当 JavaScript 脚本运行错误的时候或者资源 < img /> < script > 加载失败时，会触发 Event 接口的 error 事件，也能被 window.addEventListener 捕获到

window.addEventListener('error', (err) => {
    
     // 或者 window.onerror = function(err){
    
    }
    // 错误收集处理
    console.log(err)


    // 调用接口，进行错误上报
    ...
})

2、Promise 实例或者 async 错误
当 Promise 实例从 pending 状态到 reject 状态后并没有进行 catch 或者使用 reject 处理器处理时的错误，会触发 unhandledrejection 事件

// 错误收集
window.addEventListener('unhandledrejection', (event) => {
    
    
    // 错误收集处理
    console.log(event.reason)


    // 调用接口，进行错误上报
    ...
})

3、vue 语法或者规则的错误:
当你的工程项目是 vue 构建时，可以使用 vue.config.errorHandler 进行捕获关于 vue 语法或者规则的错误

vue2
import Vue from 'vue'
import App from './App.vue'
Vue.config.errorHandler = function(err, vm, info) {
    
    
    console.log(err, vm, info)
}
new Vue({
    
    
  render: h => h(App),
}).$mount('#app')


vue3
import {
    
     createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)
app.errorHandler = (err, vm, info) => {
    
    
    // 错误收集处理
    console.log(err, vm, info)


    // 调用接口，进行错误上报
    ...
}
app.mount('#app')