[Vuejs]-How to get original stack in Sentry from VueJS?

0👍

You need to upload your sourcemaps to Sentry.io on every build.
In your vue.config.js add this:

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,
      }));
    }
  },
};

And then in your 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);
    };
  }

Also, do not forget to set the environment variables in .env or in your CI pipeline:

SENTRY_ORG=xxxxx
SENTRY_PROJECT=yyyyy
SENTRY_AUTH_TOKEN=zzzzz

To create a token – goto https://sentry.io/settings/account/api/auth-tokens/

Leave a comment