如何在Sentry中获取Vue.js 2项目的原始调用栈？

环境 #

• Vue.js 2 应用
• Sentry 6.19 版本

问题描述 #

当前Sentry初始化代码如下：

Sentry.init({
    vue,
    dsn: 'key',
    autoSessionTracking: true,
    integrations: [new Integrations.Vue({Vue, attachProps: true})],
    tracesSampleRate: 1.0
});
Vue.use(Sentry);

在Vue文件中手动捕获错误的代码：

try {
  // 业务代码（含axios请求）
} catch(e) {
    Sentry.captureException(e)
}

但Sentry日志中仅显示axios依赖文件的调用栈，看不到调用captureException的Vue文件路径：

node_modules/axios/lib/core/createError.js in createError
node_modules/axios/lib/core/settle.js in settle
node_modules/axios/lib/adapters/xhr.js in XMLHttpRequest

已尝试更新Sentry、修改初始化参数、抛出console.error，均无效。

解决方案 #

1. 手动创建包含当前调用栈的错误对象 #

问题核心是你捕获的原始错误（axios抛出的）本身的调用栈只包含axios内部代码，没有当前Vue文件的上下文。可以通过创建新Error并关联原始错误的方式，添加当前代码的调用栈：

try {
  // 你的业务请求代码
} catch (originalErr) {
  // 创建新错误，将原始错误作为cause传入
  const err = new Error('业务请求失败', { cause: originalErr });
  Sentry.captureException(err);
}

这样Sentry会同时展示新错误的调用栈（包含当前Vue文件路径）和原始错误的详细信息，方便定位问题。

2. 手动添加组件上下文信息 #

如果不想修改错误对象，可以通过withScope给错误附加自定义的组件路径信息，快速定位：

try {
  // 你的业务请求代码
} catch (e) {
  Sentry.withScope(scope => {
    // 手动填写当前组件的路径
    scope.setExtra('component', './src/components/YourTargetComponent.vue');
    Sentry.captureException(e);
  });
}

在Sentry的错误详情页的「额外信息」板块就能看到你指定的组件路径。

3. 确认SourceMap配置正确 #

Sentry需要正确的SourceMap才能将压缩后的生产代码映射到原始Vue文件：

• 在vue.config.js中确保开启SourceMap生成：

  module.exports = {
    productionSourceMap: true
  };
  

• 使用@sentry/webpack-plugin在构建时自动上传SourceMap到Sentry（生产环境可以上传后删除本地SourceMap，避免源码暴露）。

4. 修正Sentry初始化顺序 #

Sentry 6.x版本的Vue集成在init时已经自动完成Vue插件注册，无需额外调用Vue.use(Sentry)，多余调用可能导致配置冲突。调整初始化代码：

Sentry.init({
  Vue,
  dsn: 'your-dsn-key',
  autoSessionTracking: true,
  integrations: [
    new Integrations.Vue({ Vue, attachProps: true, logErrors: true })
  ],
  tracesSampleRate: 1.0,
  // 强制捕获完整调用栈
  attachStacktrace: true
});
// 移除 Vue.use(Sentry)

内容的提问来源于stack exchange，提问作者V D