Vue 2 中全局异常捕获需在 new Vue() 前配置 Vue.config.errorHandler，接收 err、vm、info 参数，兜底处理未被捕获的运行时错误；Promise 拒绝需通过 axios 响应拦截器 reject 并配合 unhandledrejection 监听；生产环境应脱敏上报、节流防重、按错误类型差异化处理。
Vue 2 中用 Vue.config.errorHandler 捕获全局未处理异常，核心是把它设为一个函数，在 main.js 初始化 Vue 实例前注册。它不拦截已用 try/catch 或组件 errorCaptured 处理过的错误，而是兜底捕获所有“漏网”的运行时异常——比如渲染函数出错、生命周期钩子抛错、计算属性或侦听器中未捕获的异常。
在 main.js 中正确注册 errorHandler
必须在创建根 Vue 实例 之前 设置，否则不会生效：
- 导入依赖（如 Element UI 的 Message）
- 配置
Vue.config.errorHandler，接收err（错误对象）、vm（出错组件实例）、info（错误来源描述，如"render function"或"mounted hook"） - 避免在 handler 内再抛错，否则可能引发无限循环
基础写法：控制台记录 + 用户提示
结合 Element UI 的 Message 做友好反馈：
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
import Vue from 'vue'
import { Message } from 'element-ui'
Vue.config.errorHandler = (err, vm, info) => {
console.error('全局异常:', err)
console.error('发生位置:', info)
console.error('所属组件:', vm?.$options?.name || '未知')
Message({
message: err.message || '系统发生未知错误',
type: 'error',
duration: 5000
})
}
// ✅ 必须在此之后 new Vue(...)
new Vue({ render: h => h(App) }).$mount('#app')
配合 axios 拦截器做业务错误统一归口
errorHandler 不处理 Promise 拒绝（如接口 404/500），这部分需靠响应拦截器提前 reject，再由上层 catch 或全局 Promise 拒绝监听兜住：
立即学习“前端免费学习笔记（深入）”；
- 在
request.js的响应拦截器中，对非成功业务码（如res.code !== 20000）主动Promise.reject(new Error(res.message)) - HTTP 层错误（网络失败、超时、状态码非 2xx）也统一
reject，确保最终落到 Promise 链末尾或全局unhandledrejection监听 - 可额外监听
window.addEventListener('unhandledrejection')补充捕获未catch的 Promise 错误
生产环境建议增强点
上线后不应只打日志和弹窗，还需保障可观测性：
- 区分开发/生产环境：开发时保留详细堆栈，生产时脱敏并上报
- 上报至 Sentry、SaaS 监控平台等，附带
vm.$options.name、info、用户操作路径等上下文 - 避免重复上报：同一错误短时间内多次触发可做节流
- 对特定错误（如网络断开、token 过期）可跳转登录页或刷新 token，而非仅提示
