vue 3错误处理核心是分层捕获+标准化封装+可控上传：组件内用errorhandler、边界用onerrorcaptured、全局用window.onerror、promise用unhandledrejection、请求在拦截器处理；日志含基础/环境/状态/关联字段；上报前缓存+节流+采样+脱敏+离线补传；通过traceid与后端日志联动。
Vue 3 中统一错误处理与全局日志收集上报，核心是分层捕获 + 标准化封装 + 可控上传。不是把所有错误一股脑发出去，而是按来源、严重程度、上下文做区分处理，再统一走一个日志通道。
前端错误分层捕获机制
不同错误类型需用不同方式捕获，缺一不可：
-
组件内运行时错误：靠
app.config.errorHandler兜底，它能捕获生命周期、模板渲染、响应式依赖等抛出的同步错误 -
组件树错误边界：用
onErrorCaptured钩子或第三方ErrorBoundary组件，控制局部崩溃范围，适合包裹关键业务模块 -
全局 JS 错误：监听
window.onerror，覆盖语法错误、资源加载失败等非 Vue 管理场景 -
未处理 Promise 错误：监听
unhandledrejection，避免异步错误静默丢失 - 请求异常：在 Axios 或 Fetch 拦截器中统一处理状态码、网络超时、响应解析失败，并附带 URL、method、参数等上下文
错误信息标准化采集
上报前必须丰富上下文，否则日志价值极低。建议每个错误 payload 至少包含：
- 基础字段：type（如 VUE_ERROR / API_FAIL / JS_RUNTIME）、message、stack、timestamp
- 运行环境：userAgent、platform、screen.width/height、navigator.language
- 应用状态：当前路由 fullPath、query/hash、pinia store 快照（可选脱敏）、用户 ID（如有登录）
- 关联标识：生成唯一 traceId，前后端联调时可追踪全链路；若已接入监控平台（如 Sentry），直接复用其 SDK 的 event ID
不建议在 error handler 里直接调用 fetch 上报——网络不稳定时可能丢日志。应先存入内存队列或 localStorage（限大小），再通过节流 + 重试策略发送。
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
可控日志上传策略
生产环境要防止日志刷屏或阻塞主线程，推荐以下控制逻辑：
- 节流去重：相同错误 message + stack hash 在 1 分钟内只上报一次，避免重复错误轰炸服务端
- 采样率控制：非关键错误（如 warn 级）可设 10% 采样，严重错误（5xx、白屏类）100% 上报
- 离线缓存：网络不可用时暂存至 IndexedDB 或 localStorage，恢复后自动补传（注意清理过期数据）
- 敏感过滤：自动剥离 request body 中的 password、token、手机号等字段，或配置正则规则脱敏
与 Node.js 后端日志联动
前端上报的错误，最好能在后端日志中看到对应痕迹。做法很简单：
- 前端在请求 header 中带上 traceId（如
X-Trace-ID） - Node.js 中间件统一注入该 ID 到 logger 实例（例如用 winston 的 child logger）
- 当后端发生异常，日志自动携带相同 traceId；运维查问题时，用这个 ID 就能串联前后端完整上下文
这样前端报错不再孤立，而是成为可观测体系中的一环。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
