当前位置：首页 > VUE

vue错误捕获实现

2026-01-14 22:48:50VUE

Vue 错误捕获的实现方法

Vue 提供了多种方式捕获和处理错误，包括全局错误捕获、组件级错误捕获以及异步错误处理。

全局错误捕获

通过 Vue.config.errorHandler 可以设置全局错误处理函数，捕获 Vue 实例生命周期钩子、自定义事件处理函数和 v-on DOM 监听器中抛出的错误。

vue错误捕获实现

Vue.config.errorHandler = function (err, vm, info) {
  // err: 错误对象
  // vm: 发生错误的 Vue 实例
  // info: Vue 特定的错误信息，如生命周期钩子名称
  console.error('Global error:', err, info);
  // 可以在这里上报错误到服务器
};

组件级错误捕获

在组件中定义 errorCaptured 钩子可以捕获子组件的错误。该钩子可以返回 false 阻止错误继续向上传播。

export default {
  errorCaptured(err, vm, info) {
    console.error('Component error:', err, info);
    // 返回 false 阻止错误继续向上传播
    return false;
  }
}

异步错误处理

对于异步代码（如 setTimeout 或 Promise），需要使用 window.onerror 或 window.addEventListener('error') 来捕获。

vue错误捕获实现

window.onerror = function(message, source, lineno, colno, error) {
  console.error('Window error:', message, error);
};

window.addEventListener('unhandledrejection', event => {
  console.error('Unhandled rejection:', event.reason);
});

错误边界组件

可以创建一个高阶组件作为错误边界，通过 errorCaptured 和 v-if 控制子组件的渲染。

const ErrorBoundary = {
  data: () => ({ hasError: false }),
  errorCaptured(err, vm, info) {
    this.hasError = true;
    console.error('Error boundary caught:', err, info);
    return false;
  },
  render(h) {
    return this.hasError ? h('div', 'Something went wrong') : this.$slots.default[0];
  }
};

// 使用
<error-boundary>
  <my-component />
</error-boundary>

错误上报集成

在实际项目中，通常需要将错误上报到监控系统，可以与 Sentry、Bugsnag 等工具集成。

import * as Sentry from '@sentry/browser';
import * as Integrations from '@sentry/integrations';

Sentry.init({
  dsn: 'YOUR_DSN',
  integrations: [
    new Integrations.Vue({ Vue, attachProps: true })
  ]
});

Vue.config.errorHandler = (err, vm, info) => {
  Sentry.captureException(err, { extra: { vm, info } });
};