前端监控中如何正确捕获 Vue 组件的错误日志？

这个问题很常见，我来帮你排查一下。

先说根本原因：Vue 的错误捕获机制在 Vue 2 和 Vue 3 里差别挺大的，而且 Sentry 对 Vue 的集成方式也随着版本有过调整。你漏报大概率是以下几个原因：

最可能的情况：你用的是 Vue 3，但配置方式还是按 Vue 2 来的

Vue 3 的错误处理器不再是通过 Vue.config.errorHandler 配置了，而是通过 app.config.errorHandler。Sentry 在 Vue 3 下的集成方式也变了。

解决方案：

如果是 Vue 3 项目，这是一份正确的配置：

import { createApp } from 'vue'

import * as Sentry from '@sentry/vue'



const app = createApp(App)



Sentry.init({

  app: app,  // 这里很关键，要把 app 实例传进去

  dsn: '你的Sentry DSN地址',

  integrations: [

    new Sentry.BrowserTracing(),

    new Sentry.Replay(),

  ],

  // 采样配置根据实际情况调整

  tracesSampleRate: 1.0,

  beforeSend(event) {

    // 可以在这里过滤不需要上报的错误

    return event

  }

})



app.mount('#app')

如果是 Vue 2 项目，配置是这样的：

import Vue from 'vue'

import * as Sentry from '@sentry/vue'



Sentry.init({

  Vue: Vue,  // 传入 Vue 构造函数

  dsn: '你的Sentry DSN地址',

})



// Vue 2 不需要手动配置 errorHandler，Sentry 会自动接管

// 如果你之前手动配置过，检查一下是不是覆盖了 Sentry 的处理器

// Vue.config.errorHandler = (err, vm, info) => { ... }

排查步骤：

先确认你的 Vue 版本。如果用的是 Vue 3，检查 Sentry 的包版本，@sentry/vue 6.x 以下的对 Vue 3 支持是不完整的，建议升级到最新版本。

然后检查一下 Sentry 是否真的初始化成功了，可以在浏览器控制台手动测试：

// 在控制台执行这个，看有没有反应

Sentry.captureException(new Error('手动测试'))

如果这行能正常工作，说明 Sentry 本身没毛病，问题出在 Vue 错误处理的绑定上。

还有一个容易被忽略的点： 如果你的错误发生在组件的某个生命周期钩子里，比如 mounted 或者 created，而且是在异步操作里抛出的，那可能还需要额外处理 unhandledrejection 事件：

// 捕获 Promise 未处理的 rejection

window.addEventListener('unhandledrejection', (event) => {

  Sentry.captureException(event.reason)

})

不过你的代码是同步抛错，理论上不应该涉及这个。

你先看一下自己的 Vue 版本和 Sentry 的配置，对号入座调整一下，基本就能解决了。

这种情况一般是 Sentry 没正确绑定 Vue 的错误捕获钩子。

Vue 2 的正确姿势：

import Vue from 'vue';

import * as Sentry from '@sentry/vue';



Sentry.init({

  Vue: Vue,  // 这行很关键

  dsn: '你的dsn',

});

Vue 3 同理，但需要这样：

import { createApp } from 'vue';

import * as Sentry from '@sentry/vue';



const app = createApp(App);



Sentry.init({

  Vue: app,

  dsn: '你的dsn',

});



app.mount('#app');

如果你用的是 app.config.errorHandler 手动绑定而不是通过 Sentry.init 的 Vue 参数，可能会有遗漏。

另外提醒一点，Sentry 的 Vue 集成只能捕获组件渲染和方法里的同步错误。如果你有些异步代码（比如 setTimeout、Promise）里抛错，需要额外配置：

window.addEventListener('unhandledrejection', (event) => {

  Sentry.captureException(event.reason);

});

还有个常见的坑：如果你的组件在捕获错误之前就被销毁了，或者错误发生在服务端渲染（SSR）阶段，默认的 handler 确实可能漏掉。这种情况可以考虑在更外层再加一层兜底：

app.config.errorHandler = (err, vm, info) => {

  Sentry.captureException(err, {

    extra: {

      componentName: vm.$options.name,

      hook: info

    }

  });

};

先试试加上 Vue: Vue 这行配置，基本能解决你描述的问题。