Trying to integrate sentry into our Vue project

[SebCorbin]

We are building a browser-oriented component with Vite and Vue 3, but so far I was not able to integrate Sentry in it.

// vite.config.ts
/// <reference types="vitest" />
import VueI18nPlugin from '@intlify/unplugin-vue-i18n/vite'
import vue from '@vitejs/plugin-vue'
import { dirname, resolve } from 'node:path'
import { fileURLToPath, URL } from 'node:url'
import path from 'path'
import { defineConfig } from 'vite'

export default defineConfig({
  server: {
    port: 5173,
  },
  build: {
    outDir: '.', // Both dev and build must be relative to root
    sourcemap: true,
    emptyOutDir: false, // don't delete the dir on build
    rollupOptions: {
      input: 'frontend/main.ts',
      output: {
        // generate only two files
        entryFileNames: 'static/bundled/form-component.umd.min.js',
        assetFileNames: 'static/bundled/form-component.min.[ext]',
      },
    },
  },
  define: {
    // Optimize build for prod
    'process.env.NODE_ENV': `"${process.env.NODE_ENV}"`,
    // __VUE_OPTIONS_API__: false, // vue-select is not compatible with Options API yet
    __VUE_I18N_FULL_INSTALL__: false,
    __VUE_I18N_LEGACY_API__: false,
    __INTLIFY_PROD_DEVTOOLS__: false,
  },
  plugins: [
    vue(),
    VueI18nPlugin({
      // locale resource pre-compile option
      include: resolve(dirname(fileURLToPath(import.meta.url)), './frontend/locales/**'),
      fullInstall: true,
    }),
  ],
})

// main.ts
import { createApp } from 'vue'
import { createI18n } from 'vue-i18n'

import FormComponent from './FormComponent.vue'
import './assets/bootstrap.scss'

import sentry from '@/sentry'

const i18n = createI18n({
  locale: document.documentElement.lang, // set locale
  fallbackLocale: 'en', // set fallback locale
  legacy: false,
})

const app = createApp(FormComponent)
const config = JSON.parse(
  (document.getElementById('form-data') as HTMLScriptElement).textContent as string
) as Record<string, any>
const { sentryDsn, sentryEnvironment } = config

app
  .use(sentry, { dsn: sentryDsn, environment: sentryEnvironment })
  .use(i18n)
  .mount('#form-component')

// sentry.ts
import * as Sentry from '@sentry/vue'
import type { App } from 'vue'

let _isSentryEnabled = false

type SentryConfig = {
  dsn: string
  environment: 'dev' | 'demo' | 'production'
}

export function captureSentryException(e: any) {
  // Only capture exceptions if Sentry is enabled
  if (_isSentryEnabled) {
    Sentry.captureException(e, { extra: e.data || null })
  }
}

export default {
  install(app: App, config: SentryConfig) {
    if (config.dsn) {
      _isSentryEnabled = true
      // Initialize Sentry
      Sentry.init({
        app,
        dsn: config.dsn,
        environment: config.environment,
        integrations: [new Sentry.BrowserTracing()],
      })
    }
  },
}

This is correctly building, but when static/bundled/form-component.umd.min.js is loaded in the browser, I get the error

Uncaught SyntaxError: export declarations may only appear at top level of a module

which is directly related to importing Sentry.

As a workaround, I tried to load the CDN integration, but I was not able to find the latest version for vue, CDN files stop at https://browser.sentry-cdn.com/6.19.7/vue.min.js but no version is built in 7+

[lforst]

Hi, would you mind sharing reproduction? Ideally a small repository we could clone where you run into this problem? Thanks.

[SebCorbin]

Thanks for the reply, we use the browser javascript CDN integration for now which fits our needs