How to configure Sentry Vite-Plugin for sourcemap uploading in Quasar?

Question

I'm trying to follow the documentation of Sentry, to configure my Vue.js SPA application to report errors. Given the minification during build, Sentry requires the sourcemap, which is created by Vite during build time. The wizard from Sentry also creates this configuration file:

import { defineConfig } from 'vite';
import { sentryVitePlugin } from '@sentry/vite-plugin';

export default defineConfig({
  build: {
    sourcemap: true, // Source map generation must be turned on
  },
  plugins: [
    // Put the Sentry vite plugin after all other plugins
    sentryVitePlugin({
      authToken: process.env.SENTRY_AUTH_TOKEN,
      org: 'my-organisation',
      project: 'my-project',
    }),
  ],
});

but given that I'm using Quasar instead of plain Vue.js, the Vite build system is somewhat encapsulated and requires configuration in quasar.config.js (see https://quasar.dev/quasar-cli-vite/handling-vite/).

However when I add that plugin as specified by the documentation like this

// Inside quasar.config.js
build: {
  // ...
  sourcemap: true,
  vitePlugins: [['@sentry/vite-plugin', { /* options omitted for simplicity */ }]],
},
// ...

I'm getting the following error

alex@MusicBook-Pro foliant % quasar inspect 

 Dev mode............... spa
 Pkg quasar............. v2.12.5
 Pkg @quasar/app-vite... v1.4.6
 Pkg vite............... v2.9.16
 Debugging.............. enabled

 App • Running "@quasar/testing" Quasar App Extension...
 App • Running "@quasar/testing-unit-vitest" Quasar App Extension...
API-URL during build: http://127.0.0.1:8000/
/Users/alex/Repositories/foliant/node_modules/@quasar/app-vite/lib/config-tools.js:76
      (plugin.default || plugin)(
                                ^

TypeError: (plugin.default || plugin) is not a function
    at /Users/alex/Repositories/foliant/node_modules/@quasar/app-vite/lib/config-tools.js:76:33
    at Array.forEach (<anonymous>)
    at parseVitePlugins (/Users/alex/Repositories/foliant/node_modules/@quasar/app-vite/lib/config-tools.js:25:11)
    at createViteConfig (/Users/alex/Repositories/foliant/node_modules/@quasar/app-vite/lib/config-tools.js:148:10)
    at Object.vite (/Users/alex/Repositories/foliant/node_modules/@quasar/app-vite/lib/modes/spa/spa-config.js:6:17)
    at inspect (/Users/alex/Repositories/foliant/node_modules/@quasar/app-vite/lib/cmd/inspect.js:103:43)

Node.js v20.8.0

which seems strange, because with other plugins like rollup-plugin-copy from the example, the configuration works like this. I'm suspecting that the @-symbol in the plugin-name is causing problems here. But I also don't have any other name. Maybe it needs some escaping?

Does anyone know how to correctly configure the Sentry-Vite-Plugin with Quasar?

Luca Forstner · Accepted Answer · 2023-10-24 07:45:13Z

4

I recommend doing the following:

build: {
  vitePlugins: [
    require('@sentry/vite-plugin').sentryVitePlugin({ /* options */ })
  ]
}

answered Oct 24, 2023 at 7:45

Luca Forstner

2911 silver badge6 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Marty Over a year ago

For whatever reason, I had to modify this slightly, to align with the Quasar docs it seems: require("@sentry/vite-plugin").sentryVitePlugin, { options... }

Francesco Bramato · Accepted Answer · 2023-12-18 10:57:02Z

1

Some have managed to make Sentry+Quasar+Vite working directly from quasar.config ?

This is my quasar.config.js

extendViteConf(viteConf) {
        viteConf.build.sourcemap = true;
      },
      // viteVuePluginOptions: {},

      vitePlugins: [
        // other plugins (working..)
        sentry.sentryVitePlugin({
          debug: true,
          org: process.env.SENTRY_ORG,
          project: process.env.SENTRY_PROJECT,
          // Auth tokens can be obtained from https://sentry.io/orgredirect/organizations/:orgslug/settings/auth-tokens/
          authToken: process.env.SENTRY_AUTH_TOKEN,
          release: {
            name: new Date().getTime(),
            deploy: {
              env: process.env.SENTRY_ENV,
            },
          },
        }),
      ],

No releases created and no sourcemaps uploaded, seems simply fails silently

Thanks!

answered Dec 18, 2023 at 10:57

Francesco Bramato

432 silver badges7 bronze badges

1 Comment

Alex83690 Feb 14 at 9:50

Thanks, this saved me: viteConf.build.sourcemap = true; I thought that in the quasar config, build.sourceMap would be enough, but no.

Collectives™ on Stack Overflow

How to configure Sentry Vite-Plugin for sourcemap uploading in Quasar?

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related