Sourcemaps for Vite

This page shows two ways to upload Vite sourcemaps to Bugsink:

  • manual upload with sentry-cli
  • automatic upload during npm run build

Manual Upload

Do not use sentryVitePlugin while doing a manual upload. It may overwrite the debugId, which can lead to mismatches in Bugsink.

Make sure Vite actually emits sourcemaps:

// vite.config.ts
export default defineConfig({
    ...,
    build: {
        sourcemap: true,
    },
})

Then build, inject debug IDs, and upload:

# make sure sentry-cli is installed
npm install -g @sentry/cli@^2.0.0

# create a production build
npm run build

# inject debug IDs into the built files and maps
sentry-cli sourcemaps inject ./dist

# upload sourcemaps to Bugsink
SENTRY_AUTH_TOKEN=<Bugsink-Auth-Token> sentry-cli --log-level=debug --url http://bugsinkurl:port sourcemaps --org bugsinkhasnoorgs --project=ignoredfornow upload ./dist

Automatic Upload with sentryVitePlugin

This is the recommended setup if you want sourcemaps uploaded on every npm run build.

Create a .env file to store sensitive values. Do not prefix the auth token with VITE_, otherwise it may end up in the client-side bundle:

BUGSINK_URL=http://your-bugsink-url:port
BUGSINK_AUTH_TOKEN=your_secret_token
VITE_VERSION=1.0.0

Then adapt vite.config.ts:

import { defineConfig, loadEnv } from 'vite'
import react from '@vitejs/plugin-react'
import { sentryVitePlugin } from '@sentry/vite-plugin'

export default defineConfig(({ mode }) => {
    const env = loadEnv(mode, process.cwd(), '')

    return {
        plugins: [
            react(),
            sentryVitePlugin({
                project: 'web',
                org: 'myorg',
                url: env.BUGSINK_URL,
                debug: true,
                authToken: env.BUGSINK_AUTH_TOKEN,
                release: {
                    name: env.VITE_VERSION,
                    create: false,
                    finalize: false,
                    inject: true,
                },
                // optional: delete sourcemaps after upload so they are not served publicly
                // sourcemaps: {
                //     filesToDeleteAfterUpload: ['./dist/**/*.map'],
                // },
            }),
        ],
        build: {
            sourcemap: true,
        },
    }
})

With this setup, sourcemaps are injected and uploaded automatically during the build.

This Guide was provided by GitHub user MichaelMrt