Vue错误捕获是分层防御体系：全局errorHandler兜底组件同步错误，errorCaptured钩子实现子组件精准拦截与UI降级，需叠加window.onerror、unhandledrejection等原生监听覆盖异步与资源错误盲区。
Vue 组件开发中，错误捕获不是“有或没有”的开关，而是分层、有侧重的防御体系。核心目标是：不崩溃、可定位、易上报、能降级。
全局错误拦截：兜底防线
所有未被局部捕获的组件级错误（如渲染异常、生命周期钩子同步报错），最终会落到 Vue.config.errorHandler。这是应用级错误处理的统一入口：
- 在
main.js或应用初始化处配置，接收err（错误对象）、vm（出错组件实例）、info（如"render function"或"mounted hook"） - 必须配合
Vue.nextTick调用状态更新或日志提交，避免响应式系统冲突 - 生产环境建议关闭
console.error，只做日志上报；开发环境可保留，辅助调试 - 它不捕获 Promise 拒绝、事件处理器内错误、资源加载失败（如图片 404）——这些需额外监听
组件级错误边界：精准拦截
errorCaptured 钩子让父组件主动拦截子组件的异常，是实现 UI 降级的关键：
- 触发时机明确：子组件
setup、render、onMounted等同步执行阶段出错时调用 - 返回
false可阻止错误继续冒泡，避免触发全局errorHandler；返回true或不返回则继续向上传递 - 常用于包裹第三方组件或不稳定模块，配合
v-if切换 fallback UI（如“加载失败，请重试”提示） - 注意：它无法捕获异步回调（如
setTimeout内抛错）或事件处理器中的错误
补充监听：覆盖遗漏场景
仅靠 Vue 自身机制会有盲区，必须叠加浏览器原生能力：
立即学习“前端免费学习笔记（深入）”；
-
window.onerror：捕获全局同步错误和宏任务（
setTimeout、setInterval）中未处理的异常，提供filename、lineno、colno -
window.addEventListener('unhandledrejection')：专门捕获未
catch的 Promise 拒绝，比如 API 请求失败且没写错误处理逻辑 -
资源加载失败：为
<img>、<script>等标签添加@error或onerror处理器，记录 404 或 CORS 问题
日志整合与上报实践
捕获只是第一步，结构化日志才能真正发挥作用：
- 统一收集点：将各类错误（Vue 错误、Promise 拒绝、资源加载失败）格式对齐，至少包含
message、stack、url、timestamp、user_id（如有） - 防抖与采样：高频错误（如快速连续点击触发）需节流，生产环境可按比例采样上报，避免日志风暴
- 敏感信息过滤：自动剥离
stack中的用户输入、token、密码字段，防止泄露 - 推荐组合：轻量项目用自建接口 + 前端聚合；中大型项目直接集成 Sentry、Bugsnag 等专业服务，它们已内置 Vue 插件和 sourcemap 支持
