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

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 ).

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:
/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?

2 Answers

I recommend doing the following:

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

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