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?

Answer 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!

Answer 2

I recommend doing the following:

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