app.config.errorhandler能捕获vue组件渲染、生命周期、事件处理等环节的未捕获js错误，包括setup()同步错误、模板渲染异常、生命周期钩子、事件处理器、watch/computed/onerrorcaptured及自定义指令等内部异常；但不捕获promise reject、定时器、微任务、dom事件回调及全局js错误。
直接在创建应用实例后配置 app.config.errorHandler，就能捕获组件渲染、生命周期、事件处理等环节中未被捕获的 JavaScript 错误。
它能捕获哪些错误
这个处理器覆盖 Vue 运行时内部抛出的多数未处理异常，包括：
- 组件 setup() 函数中同步抛出的错误
- 模板渲染过程中的异常（比如访问 undefined 属性）
- 生命周期钩子（onMounted、onUpdated 等）内抛出的错误
- 事件处理器（@click 等绑定函数）执行时的错误
- watch、computed、onErrorCaptured 钩子内部的异常
- 自定义指令、过渡（Transition）相关钩子中的错误
基本用法示例
在 main.js 或入口文件中设置：
import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)
app.config.errorHandler = (err, instance, info) => {
console.error('Vue 错误:', err)
console.log('出错组件:', instance?.type?.name || '未知')
console.log('错误来源:', info) // 如 'v-on handler'、'render function'、'mounted hook'
// 可选：上报到监控服务
// reportError({ message: err.message, stack: err.stack, info, timestamp: Date.now() })
}
app.mount('#app')
它捕获不到的错误类型
注意：app.config.errorHandler 不会捕获以下情况：
- Promise 中未被 catch 的 reject（需监听 unhandledrejection）
- 定时器（setTimeout/setInterval）或微任务（queueMicrotask）里抛出的错误
- 原生 DOM 事件回调（如 addEventListener）中的异常
- 全局 JS 错误（如语法错误、资源加载失败），需配合 window.onerror
搭配兜底方案更稳妥
为真正实现“全链路异常捕获”，建议同时注册两个全局监听：
- window.onerror：捕获同步脚本错误、资源加载失败等
- window.addEventListener('unhandledrejection')：捕获未处理的 Promise 异常
这样和 app.config.errorHandler 形成三层防护——Vue 内部错误、异步 Promise 错误、纯 JS 全局错误，基本覆盖绝大多数前端异常场景。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
