如何在 Quasar 中配置 Sentry Vite-Plugin 以上传 sourcemap?

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

提问人:Alexander Pacha 提问时间:10/23/2023 更新时间:10/24/2023 访问量:125

问:

我正在尝试按照 Sentry 的文档配置我的Vue.js SPA 应用程序以报告错误。考虑到构建过程中的缩小,Sentry 需要 sourcemap,它由 Vite 在构建时创建。Sentry 的向导还会创建以下配置文件:

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

但鉴于我使用的是 Quasar 而不是普通的 Vue.js,Vite 构建系统在某种程度上是封装的,需要配置(参见 https://quasar.dev/quasar-cli-vite/handling-vite/)。quasar.config.js

但是,当我添加该插件时,如文档所示

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

这似乎很奇怪,因为对于示例中的其他插件,配置是这样的。我怀疑插件名称中的-symbol在这里导致了问题。但我也没有别的名字。也许它需要一些逃避?rollup-plugin-copy@

有谁知道如何使用 Quasar 正确配置 Sentry-Vite-Plugin?

vue.js 插件 vite sentry 类星体

评论


答:

2赞 Luca Forstner 10/24/2023 #1

我建议执行以下操作:

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