vue错误监听.md

全局 JS 错误监听

1. window.onerror全局监听所有 JS 的报错，但问题是无法识别vue中的错误

在最上层的App.vue中进行全局监听：

<script>
export default {
    mounted(){
        /**
         * msg 错误信息
         * source 报错的文件
         * line 哪一行报错
         * column 哪一列报错
         * error 错误的对象实例
         */
        window.onerror = function(msg, source, line, column, error){
            console.log('window.error', msg, source, line, column, error)
        }
    }
}
</script>

不过如果错误被try...catch捕获后，错误信息不会向上抛出，不会别window.onerror监听

2. 使用window.addEventListener进行全局错误事件监听，event对象中包含了所有错误信息

<script>
export default {
    mounted(){
        /**
         * msg 错误信息
         * source 报错的文件
         * line 哪一行报错
         * column 哪一列报错
         * error 错误的对象实例
         */
        window.addEventListener('error', event => {
            console.log('window error',event)
        })
    }
}
</script>

vue中的自己错误监听

1. errorCaptured监听所有下级组件的错误，返回false会阻止事件向上传播

在最上层的App.vue中进行全局监听：

<script>
export default {
    mounted(){
        window.onerror = function(msg, source, line, column, error){
            console.log('window.error', msg, source, line, column, error)
        },
        /**
         * err 错误信息
         * vm 报错的组件实例
         * info 报错信息
         */
        errorCaptured:(err, vm, info) => {
            console.log('errorCaptured', err, vm, info)
            // 禁止向上传播，不会被window.onerror重复捕获
            return false
        }

    }
}
</script>

2. Vue 全局错误监听 errorHandler

所有组件错误都会汇总到这里，但errorCaptured返回false会阻止事件向上传播，则不会传播到这里

在main.js中进行监听

import { createApp } from 'vue'

const app = createApp(App)
app.config.errorHandler = (err, vm, info) => {
    console.log('errorHandler', err, vm, info)
}
app.mount('#app')

使用errorHandler之后，window.onerror就不会捕获错误

3. warnHandler全局监听警告⚠️

4. 异步错误捕获

异步回调中的错误，errorHandler是监听不到的，需要window.onerror进行监听

5. Promise 错误监听

Promise未处理的catch需要onunhandledrejection进行监听

总结

1. errorCaptured监听所有下级组件的错误，主要用在监听重要、有风险组价的错误，返回false会阻止事件向上传播，可以在App.vue中编写
2. errorHandler监听全局Vue 组件报错，在main.js中编写
3. window.onerror监听其他 JS 报错，比如异步
4. Promise未处理的catch需要onunhandledrejection进行监听

JS报错统计

埋点

上报

统计