如何从VueJS获取Sentry中的原始堆栈?

cnh2zyt3  于 2023-05-18  发布在  Vue.js
关注(0)|答案(1)|浏览(125)

我的设置:Vuejs 2应用程序,哨兵6.19.
在索引文件中连接哨兵,如:

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

*.vue文件中手动捕获错误,例如:

try {
} catch(e) {
    Sentry.captureException(e)
}

但在哨兵日志中只显示供应商文件:
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
未显示*.vue文件中捕获错误的位置。
如何在Sentry中显示调用captureException的*.vue文件的路径?
已尝试更新Sentry,更改Sentry初始化参数,抛出console.error

n9vozmp4

n9vozmp41#

您需要在每次构建时将您的源Map上传到Sentry.io。
vue.config.js中添加以下内容:

const pkg = require('./package.json');
const SentryCliPlugin = require('@sentry/webpack-plugin');
module.exports =
{
  productionSourceMap: true,
  configureWebpack: (config) =>
  {
    config.devtool = process.env.NODE_ENV === 'development' ? 'source-map' : 'hidden-source-map';
    if (!config.plugins) config.plugins = [];
    if (process.env.NODE_ENV === 'production')
    {
      config.plugins.push(new SentryCliPlugin({
        include: './dist',
        ignore: ['node_modules', 'webpack.config.js'],
        configFile: 'sentry.properties',
        release: pkg.version,
      }));
    }
  },
};

然后在你的src/main.js

import Vue from 'vue';
import { init as InitSentry } from '@sentry/vue';
import { ExtraErrorData, CaptureConsole } from '@sentry/integrations';
import { version } from '../package.json';

  if (process.env.NODE_ENV === 'production')
  {
    InitSentry({
      dsn: process.env.VUE_APP_SENTRY_DSN,
      release: version,
      sendDefaultPii: true,
      Vue,
      integrations: [
        new ExtraErrorData(),
        new CaptureConsole({
          levels: ['error']
        }),
      ],
      denyUrls:
      [
        // Chrome extensions
        /extensions\//i,
        /^safari-extension:\/\//i,
        /^safari-web-extension:\/\//i,
        /^moz-extension:\/\//i,
        /^chrome:\/\//i,
        /^chrome-extension:\/\//i,
        /moz-extension/i,
        /intercomcdn\.com/,
        /widget-assets\/js/,
      ],
      ignoreErrors:
      [
        '@webkit-masked-url',
        'debugger eval',
        'Not implemented on this platform',
        'Failed to fetch',
        'Bin profiling',
        'DF completed after',
        'ChunkLoadError',
        'Loading CSS chunk',
      ],
      beforeSend: (event) =>
      {
          event.user = {
            username: '....', // you somehow get the username of the currently logged-in user
            email: '.....',
            company: '.....',
            screen: `${window.screen.width} x ${window.screen.height}`,
          };
        return event;
      },
      beforeBreadcrumb: (breadcrumb, hint) =>
      {
        if (breadcrumb.category === 'xhr' && hint)
        {
          const data = {
            requestBody: hint.xhr.__sentry_xhr__.body,
            response: hint.xhr.response,
            responseUrl: hint.xhr.responseURL
          };
          return {
            ...breadcrumb,
            data
          };
        }
        return breadcrumb;
      }
    });
  }
  else
  {
    Vue.config.errorHandler = (err, vm, info) =>
    {
      // err: error trace
      // vm: component in which error occurred
      // info: Vue specific error information such as lifecycle hooks, events etc.
      console.error(vm.$options._componentTag + ': ' + info, err);
      // Use your UI kit to show an error toast/popup showErrorPopup(vm.$options._componentTag + '\n' + info + '\n' + err.message + '\n' + err.stack);
    };

    window.onerror = function(message, source, lineno, colno, error)
    {
      // without an alert you may not notice there is an error in the console
      alert('Error at ' + lineno + ':' + colno + ' in "' + source + '"\n' + message + '\n' + error);
    };
  }

另外,不要忘记在.env或CI管道中设置环境变量:

SENTRY_ORG=xxxxx
SENTRY_PROJECT=yyyyy
SENTRY_AUTH_TOKEN=zzzzz

创建令牌-后藤https://sentry.io/settings/account/api/auth-tokens/

相关问题