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 降级的关键：

vue-component-analyzer

递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。

下载

• 触发时机明确：子组件 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></script> 等标签添加 @error 或 onerror 处理器，记录 404 或 CORS 问题

日志整合与上报实践

捕获只是第一步，结构化日志才能真正发挥作用：

• 统一收集点：将各类错误（Vue 错误、Promise 拒绝、资源加载失败）格式对齐，至少包含 message、stack、url、timestamp、user_id（如有）
• 防抖与采样：高频错误（如快速连续点击触发）需节流，生产环境可按比例采样上报，避免日志风暴
• 敏感信息过滤：自动剥离 stack 中的用户输入、token、密码字段，防止泄露
• 推荐组合：轻量项目用自建接口 + 前端聚合；中大型项目直接集成 Sentry、Bugsnag 等专业服务，它们已内置 Vue 插件和 sourcemap 支持

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！