vue错误捕获实现
Vue 错误捕获的实现方式
Vue 提供了多种错误捕获机制，可以在组件渲染、生命周期钩子、事件处理器等场景下捕获异常，避免应用崩溃。以下是常见的实现方法：
全局错误处理器
通过 Vue.config.errorHandler 配置全局错误捕获函数，可以捕获组件渲染、生命周期钩子等未处理的错误：
Vue.config.errorHandler = function (err, vm, info) {
// err: 错误对象
// vm: 发生错误的组件实例
// info: Vue 特定的错误信息（如生命周期钩子名称）
console.error('Global error:', err, info);
// 可在此处上报错误日志
};生命周期钩子中的错误捕获
在组件的 errorCaptured 钩子中可以捕获子孙组件的错误，适合局部错误处理：
export default {
errorCaptured(err, vm, info) {
// 返回 false 可阻止错误继续向上传播
return false;
}
};异步错误捕获
对于异步代码（如 setTimeout、Promise），需单独处理：
// Promise 错误
Promise.reject(new Error('Promise error')).catch(err => {
console.error('Async error:', err);
});
// window.onerror 捕获全局脚本错误
window.onerror = function(message, source, lineno, colno, error) {
console.error('Window error:', error);
};错误边界组件（Vue 2.6+）
通过组合 errorCaptured 和条件渲染，实现类似 React 的错误边界：
// ErrorBoundary.vue
<template>
<div v-if="hasError">
备用 UI
</div>
<slot v-else></slot>
</template>
<script>
export default {
data: () => ({ hasError: false }),
errorCaptured() {
this.hasError = true;
return false; // 阻止向上传播
}
};
</script>
// 使用方式
<ErrorBoundary>
<UnstableComponent/>
</ErrorBoundary>第三方错误监控集成
可与 Sentry、Bugsnag 等工具集成：
import * as Sentry from '@sentry/browser';
Sentry.init({ dsn: 'YOUR_DSN' });
Vue.config.errorHandler = (err, vm, info) => {
Sentry.captureException(err, { extra: { vm, info } });
};注意事项
- 生产环境应关闭
Vue.config.silent以显示警告 - 避免在错误处理中触发新的错误（如循环报错）
- 对于关键操作，建议添加
try/catch块手动处理
通过组合以上方法，可以构建完整的 Vue 应用错误监控体系。
