Source Maps

Learn how to enable readable stack traces in your Sentry errors.

To enable readable stack traces in your Sentry errors, you need to upload your source maps to Sentry.

Readable Stack Traces

This guide assumes you are using the @sentry/vue SDK on version 7.47.0 or higher.

If you are on an older version and you want to upload source maps we recommend upgrading your SDK to the newest version.

The easiest and recommended way to configure uploading source maps is by using the Sentry Wizard:

Copied
npx @sentry/wizard@latest -i sourcemaps

The wizard will guide you through the following steps:

  • Logging into Sentry and selecting a project
  • Installing the necessary Sentry packages
  • Configuring your build tool to generate and upload source maps
  • Configuring your CI to upload source maps

If you want to configure source maps upload manually, follow the guide for your bundler or build tool below.

If you are using Vue, chances are good you are using Vite to bundle your project. You can use the Sentry Vite plugin to automatically create releases and upload source maps to Sentry when bundling your app.

Copied
npm install @sentry/vite-plugin --save-dev

Learn more about configuring the plugin in our Sentry Vite Plugin documentation.

To upload source maps you have to configure an auth token. Auth tokens can be passed to the plugin explicitly with the authToken option, with a SENTRY_AUTH_TOKEN environment variable, or with a .env.sentry-build-plugin file in the working directory when building your project. You likely want to add the auth token as an environment variable to your CI/CD environment.

.env.sentry-build-plugin
Copied
SENTRY_AUTH_TOKEN=sntrys_YOUR_TOKEN_HERE

Example:

vite.config.js
Copied
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import { sentryVitePlugin } from "@sentry/vite-plugin";

// https://vitejs.dev/config/
export default defineConfig({
  build: {
    sourcemap: true, // Source map generation must be turned on
  },
  plugins: [
    vue(),

    // Put the Sentry vite plugin after all other plugins
    sentryVitePlugin({
      org: "example-org",
      project: "example-project",
      authToken: process.env.SENTRY_AUTH_TOKEN,
    }),
  ],
});

The Sentry Vite plugin doesn't upload source maps in watch-mode/development-mode. We recommend running a production build to test your implementation.

In case you are using a bundler other than Vite to build your Vue project, we've compiled a list of guides on how to upload source maps to Sentry for the most popular JavaScript bundlers:

If you're not using any of tools above, we assume you already know how to generate source maps with your toolchain and we recommend you upload them using Sentry CLI.

Though we strongly recommend uploading source maps as part of your build process, for browser applications it's also possible to host your source maps publicly.

Help improve this content
Our documentation is open source and available on GitHub. Your contributions are welcome, whether fixing a typo (drat!) or suggesting an update ("yeah, this would be better").