Vue 3 统一错误处理需建立可识别、可扩展的语义化错误分类体系，通过继承 Error 的 BusinessError 类携带 code 和 data，在 errorHandler 及全局异常捕获中按 code 分流提示，并解耦提示逻辑至独立函数与配置表。

Vue 3 中统一错误处理要实现“不同错误类型对应不同提示”，关键不是写一堆 if-else 判断 message 字符串，而是建立可识别、可扩展的错误分类体系，并在 errorHandler 中按类型分支响应。

定义语义化业务错误类

原生 Error 对象只有 message 和 stack，无法区分“登录过期”和“网络超时”。需主动构造带 code 的错误：

• 新建 src/utils/BusinessError.ts，继承 Error 并添加 code 和可选 data
• 所有业务逻辑中抛错统一用它： throw new BusinessError('请求失败', 'NETWORK_TIMEOUT', { retry: true })
• API 请求层（如 Axios 响应拦截器）也应将 HTTP 状态码映射为标准 code，例如 401 → 'AUTH_EXPIRED'，403 → 'NO_PERMISSION'

在 errorHandler 中按 code 分流提示

main.ts 中配置 app.config.errorHandler 时，不再只做 console.error，而是根据 err.code 决定行为：

vue-composition-api-best-practices

Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。

下载

• 'AUTH_EXPIRED'：清 localStorage、跳转登录页，不弹窗（避免重复提示）
• 'NETWORK_TIMEOUT' 或 'NETWORK_ERROR'：显示“网络不稳，请稍后重试”，附带“重试”按钮
• 'VALIDATION_FAILED'：提取 data.field 和 message，聚焦对应表单项并显示 inline 提示
• 未识别的 code 或非 BusinessError：走兜底提示，如“系统开小差了”，并提供“反馈问题”入口

补充非 Vue 上下文错误的类型识别

window.error 和 unhandledrejection 捕获的错误没有 instance 和 info，但可通过错误特征辅助判断：

立即学习“前端免费学习笔记（深入）”；

• window.error：检查 event.filename 是否含 .js 或 .vue，event.message 是否含 “Loading chunk” → 资源加载失败，提示“页面功能暂不可用，请刷新”
• unhandledrejection：若 reason 是字符串且含 “timeout”、“aborted” → 归为 NETWORK_TIMEOUT；若 reason 是对象且有 statusText → 参照 Axios 响应逻辑映射 code
• 所有非 Vue 错误统一打上 type 字段（如 'js', 'resource', 'promise'），便于后续监控归类

提示层解耦：用事件总线或状态管理驱动 UI

不要在 errorHandler 里直接调用 $message 或 this.$notify。推荐方式：

• 定义一个全局提示函数 showErrorTip(code: string, payload?: any)，内部根据 code 查配置表获取文案、图标、动作
• 配置表可存于 src/constants/errorTips.ts，支持热更新和 i18n 扩展
• 提示组件监听自定义事件或订阅 Pinia store 中的 errorQueue，保持视图与错误处理逻辑完全分离