vue错误捕获实现
Vue 错误捕获的实现方法
全局错误捕获（Vue 2 & Vue 3）
通过 Vue.config.errorHandler 全局配置捕获组件渲染、事件处理器等未处理的错误：
Vue.config.errorHandler = function (err, vm, info) {
console.error('全局捕获:', err, info);
// 可上报错误至日志服务
};Vue 3 中改为 app.config.errorHandler，用法类似。
生命周期钩子捕获
在组件内部使用 errorCaptured 钩子捕获子孙组件的错误（Vue 2.5+ 和 Vue 3）：
export default {
errorCaptured(err, vm, info) {
console.error('组件级捕获:', err, info);
return false; // 阻止错误继续向上传播
}
}异步错误捕获
通过 window.onerror 或 window.addEventListener('error') 捕获全局脚本错误：
window.addEventListener('error', event => {
console.error('脚本错误:', event.error);
});使用 unhandledrejection 捕获未处理的 Promise 异常：
window.addEventListener('unhandledrejection', event => {
console.error('Promise 异常:', event.reason);
});错误边界组件（Vue 3 推荐）
创建高阶组件包裹目标组件，通过 v-if 控制错误状态下的 UI 展示：
<template>
<slot v-if="!hasError"></slot>
<div v-else class="error-fallback">组件崩溃</div>
</template>
<script>
export default {
data: () => ({ hasError: false }),
errorCaptured() {
this.hasError = true;
return false;
}
}
</script>Axios 拦截器捕获
在请求拦截器中统一处理 HTTP 错误：
axios.interceptors.response.use(
response => response,
error => {
console.error('请求错误:', error);
return Promise.reject(error);
}
);注意事项
- 生产环境应关闭 Vue 的警告提示：
Vue.config.productionTip = false - 错误处理函数中避免抛出新错误
- 重要业务错误建议实时上报至监控系统（如 Sentry）
- 对于 SSR（Nuxt.js），需同时处理服务端和客户端的错误捕获
