vue 3 错误处理统一封装的核心是解耦捕获与处理，通过 useerrorhandler hook 统一分类、附加环境信息、配置响应行为并调用 reporterror 上报；集成于请求 hook、错误边界及全局监听器，所有错误最终归一上报，payload 包含 type、url、route、user_id、error_message、stack 和 extra。

Vue 3 中逻辑复用与异常日志上报的统一封装，核心是把“错误捕获”和“错误处理”解耦，让业务代码不写 try/catch，也不手动调用上报函数——而是靠组合式函数（Hook）或插件层统一拦截、分类、响应、上报。

用组合式函数封装错误捕获与上报逻辑

推荐创建一个如 useErrorHandler 的 Hook，它不直接抛错，而是接收错误上下文并触发标准流程：

• 内部预置错误分类规则（如网络超时、401 登录失效、500 服务异常、客户端 JS 错误）
• 自动附加环境信息：当前路由、用户身份标识、时间戳、UA、页面标题
• 支持可配置行为：是否弹 Message、是否跳转登录页、是否重试、是否静默上报
• 调用统一上报函数（如 reportError(payload)），使用 navigator.sendBeacon 保障离页前发送成功

在业务请求 Hook 中集成错误流

像 useFetch 或 useLazyData 这类数据获取 Hook，应在 catch 分支中调用 useErrorHandler 而非直接 ElMessage.error：

vue-component-analyzer

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

下载

• 避免组件内重复写错误提示逻辑，也防止同一错误被拦截器 + 组件双重处理
• 将错误对象传入 useErrorHandler，由其决定是否展示、是否上报、是否降级渲染
• 对 401/403 等业务码，可在 Hook 内部触发全局事件（如 bus.emit('auth:expired')），由 App 根组件监听并跳转

全局错误边界 + Vue 错误处理器联动

仅靠业务层不够，还需底层兜底：

• 在 app.config.errorHandler 中捕获未被捕获的组件渲染错误、watch 异常、生命周期钩子报错
• 该处理器只做一件事：标准化错误对象，然后交给 useErrorHandler 统一出口，不重复弹窗、不 console.log
• 配合 window.addEventListener('error') 和 window.addEventListener('unhandledrejection') 捕获全局 JS 错误和 Promise 拒绝
• 所有入口最终都流向同一个上报函数，确保线上错误 100% 可追踪、可聚合、可告警

上报 payload 设计要兼顾调试与归因

不要只传 error.stack，关键字段建议包含：

• type：'js-error' / 'api-fail' / 'render-error'
• url：当前完整路径 + query
• route：当前路由 name/path/meta
• user_id：脱敏后的用户标识（如有）
• error_message：err.message 或接口返回的 res.msg
• stack：堆栈（生产环境可裁剪，保留前 3 层）
• extra：业务自定义上下文，如请求参数、表单值快照（需脱敏）

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