vue 3 中通过解耦错误捕获与 ui 展示实现全局轻提示：在 main.ts 的 app.config.errorhandler 中调用封装的 notifyerror；同时监听 unhandledrejection 和 error 事件，统一接入 notifyerror；所有业务错误均抛出 businesserror 或调用语义化通知函数，确保提示样式、去重逻辑、埋点行为完全一致。
Vue 3 中统一错误处理与 UI 库（如 Element Plus）结合实现全局轻提示通知，关键在于把「错误捕获」和「UI 展示」解耦，避免在 errorHandler 里直接调用 ElMessage，而是通过中间层触发标准化提示逻辑。
在 main.ts 中注册统一错误处理器
必须在 createApp() 后、app.mount() 前设置 app.config.errorHandler，这是捕获组件内同步错误、渲染异常、setup 函数抛错的唯一官方入口：
- 接收
err（原生 Error 或自定义 BusinessError）、instance（报错组件实例）、info（如render、onMounted） - 不直接写
ElMessage.error(...)，而是调用封装好的notifyError(err)函数 - 生产环境过滤敏感字段（如 token、用户手机号），只上报脱敏后的 message 和 code
封装 notifyError 并对接 Element Plus Message
新建 src/utils/notify.ts，集中管理所有轻提示行为，确保风格、时长、位置一致：
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- 导出
notifyError、notifySuccess、notifyWarning等语义化函数 - 内部统一使用
ElMessage，但预设好默认参数：duration: 4500、offset: 20、showClose: true - 对业务错误类（如
BusinessError）做识别：若err.code === 'AUTH_EXPIRED'，则先跳转登录页，再提示“登录已过期” - 支持自动去重：相同 message + type 的提示 3 秒内不重复弹出
补全非 Vue 上下文错误的通知能力
errorHandler 不会捕获 Promise 拒绝、setTimeout 抛错、资源加载失败等原生 JS 错误，需手动监听并复用同一套通知逻辑：
- 监听
window.addEventListener('unhandledrejection')，提取reason，判断是否为 Error 对象后传给notifyError - 监听
window.addEventListener('error')，过滤掉资源加载 404（event.filename为空或为undefined时忽略），其余调用notifyError - 确保这三处（errorHandler / unhandledrejection / error）最终都走到同一个
notifyError入口，保证上报格式、提示样式、埋点行为完全一致
表单与接口错误也走统一通道
业务代码中不再零散写 ElMessage.error('请求失败')，而是让错误自然冒泡或主动抛出标准错误：
- API 请求层（如 useRequest）在 catch 时，统一包装成
new BusinessError(msg, code, { api: '/user/list' })后 re-throw - 表单校验失败可调用
notifyWarning('请填写邮箱')，保持语气和时长与系统错误一致 - 所有成功反馈（如保存成功）也走
notifySuccess，避免出现ElMessage和alert混用
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
