如何在Quasar中配置Sentry Vite插件以上传Sourcemap

问题 #

我正尝试按照Sentry文档配置Vue.js SPA应用以上报错误。由于构建时的代码压缩，Sentry需要Vite构建阶段生成的Sourcemap。Sentry向导生成了对应的Vite配置文件，但因使用Quasar而非原生Vue.js，需在quasar.config.js中配置Vite。

当我按文档示例添加插件：

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

出现如下错误：

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

其他如rollup-plugin-copy插件按此方式配置可正常工作，我怀疑插件名中的@符号导致问题，可能需要转义？请问如何正确在Quasar中配置Sentry Vite插件？

解决方案 #

问题出在Quasar的vitePlugins配置对ES模块插件的处理逻辑上：@sentry/vite-plugin是ES模块导出，不能直接用字符串名称的数组格式配置，需要手动引入插件函数并传入配置参数。

正确配置步骤 #

1. 在quasar.config.js顶部引入Sentry Vite插件：

// CommonJS 方式
const { sentryVitePlugin } = require('@sentry/vite-plugin');

// 或 ES 模块方式（如果你的项目使用ES模块）
import { sentryVitePlugin } from '@sentry/vite-plugin';

2. 在build配置的vitePlugins数组中直接调用插件：

build: {
  sourcemap: true, // 必须开启，Sentry依赖Sourcemap解析压缩后的错误代码
  vitePlugins: [
    sentryVitePlugin({
      // 填写你的Sentry配置项，示例：
      org: '你的组织名称',
      project: '你的项目名称',
      authToken: process.env.SENTRY_AUTH_TOKEN, // 建议通过环境变量传入敏感信息
      // 其他配置如release、include等按需添加
    })
  ],
},

原因说明 #

@quasar/app-vite的vitePlugins配置中，字符串名称的数组格式仅适用于CommonJS模块的插件，而@sentry/vite-plugin采用ES模块规范导出，因此需要直接引入插件函数并执行，而非通过字符串名称间接加载。这也是rollup-plugin-copy能正常工作的原因——它是CommonJS模块。

内容的提问来源于stack exchange，提问作者Alexander Pacha