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

UI晨晰提问于 2026-03-13 21:11:24 阅读 3

前端

我在项目里接入了 Sentry 做前端监控，但发现有些组件内部的错误没被上报。比如下面这个组件，点击按钮会抛出异常，但 Sentry 没收到日志，是我哪里配置错了吗？

<template>
  <button @click="handleClick">触发错误</button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      throw new Error('测试组件错误');
    }
  }
}
</script>

我已经在 main.js 里调用了 Sentry.init()，也加了 Vue 的 errorHandler，但还是漏报。是不是这种同步抛错不会被全局捕获？

我来解答赞 1 收藏

反馈

1 条解答

林莹 Lv1

这种情况一般是 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 这行配置，基本能解决你描述的问题。

2026-03-13 21:23