Sentry 初始化后为什么收不到 Vue 项目的错误？

忠娟 Dev 提问于 2026-03-08 12:39:22 阅读 2

前端

我在 Vue 3 项目里按文档装了 @sentry/vue，也调用了 init 方法，但页面报错时 Sentry 控制台完全没收到任何事件。本地开发环境能正常看到 console.error，但就是不上传。

我试过手动触发 Sentry.captureException(new Error('test'))，这个能收到，说明 DSN 配置是对的。但组件里的异步错误、生命周期钩子里的错误都没上报，是不是还要额外配置什么？

import * as Sentry from '@sentry/vue'
import { createApp } from 'vue'

const app = createApp(App)
Sentry.init({
  app,
  dsn: 'https://xxx@xxx.ingest.sentry.io/xxx',
  integrations: [Sentry.browserTracingIntegration()],
  tracesSampleRate: 1.0
})

Sentry 前端监控

我来解答赞 1 收藏

反馈

1 条解答

设计师淑芳 Lv1

这问题我也踩过坑，Vue 3的异步错误捕获确实要额外处理。核心问题是Vue默认不会把组件内的异步错误抛到全局，Sentry也就抓不到。

解决方法很简单，在init时加个配置项trackComponents: true，完整配置应该是这样：

Sentry.init({

  app,

  dsn: 'https://xxx@xxx.ingest.sentry.io/xxx',

  integrations: [Sentry.browserTracingIntegration()],

  tracesSampleRate: 1.0,

  trackComponents: true // 关键在这行

})

另外如果你用了vue-router，路由错误也要单独处理，需要加上这个：

router.onError(error => {

  Sentry.captureException(error)

})

前端这块的报错收集就是各种细节坑，有时候文档也不一定写全。要是还不行可以看下浏览器控制台有没有跨域问题，开发环境有时候会被CORS拦截。

2026-03-08 13:04