Source Maps
Uploading Source Maps using Vite
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.
Installation
npm install @sentry/vite-plugin --save-dev
Configuration
Learn more about configuring the plugin in our Sentry Vite Plugin documentation.
Example:
vite.config.js
import { fileURLToPath, URL } from "node:url";
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",
// Specify the directory containing build artifacts
include: "./dist",
// Auth tokens can be obtained from https://sentry.io/settings/account/api/auth-tokens/
// and needs the `project:releases` and `org:read` scopes
authToken: process.env.SENTRY_AUTH_TOKEN,
// Optionally uncomment the line below to override automatic release name detection
// release: process.env.RELEASE,
}),
],
resolve: {
alias: {
"@": fileURLToPath(new URL("./src", import.meta.url)),
},
},
});
The Sentry Vite plugin will automatically inject a release value into the SDK so you must either omit the release
option from Sentry.init
or make sure Sentry.init
's release
option matches the plugin's release
option exactly:
Sentry.init({
dsn: "https://examplePublicKey@o0.ingest.sentry.io/0",
// When using the plugin, either remove the `release`` property here entirely or
// make sure that the plugin's release option and the Sentry.init()'s release
// option match exactly.
// release: "my-example-release-1"
});
Other Bundlers
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:
Other Tools
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.
Additional Resources
- Using sentry-cli to Upload Source Maps
- 4 Reasons Why Your Source Maps Are Broken
- Debug Your Node.js Projects with Source Maps
Our documentation is open source and available on GitHub. Your contributions are welcome, whether fixing a typo (drat!) to suggesting an update ("yeah, this would be better").
- Package:
- npm:@sentry/vue
- Version:
- 7.45.0
- Repository:
- https://github.com/getsentry/sentry-javascript