Vue
Learn how to manually set up Sentry in your Vue app and capture your first errors.
You need:
Choose the features you want to configure, and this guide will show you how:
Run the command for your preferred package manager to add the Sentry SDK to your application:
npm install @sentry/vue --save
To initialize Sentry in your Vue application, add the following code snippet to your main.js:
main.jsimport { createApp } from "vue";
import { createRouter } from "vue-router";
import * as Sentry from "@sentry/vue";
const app = createApp({
// ...
});
const router = createRouter({
// ...
});
Sentry.init({
app,
dsn: "https://examplePublicKey@o0.ingest.sentry.io/0",
// Adds request headers and IP for users, for more info visit:
// https://docs.sentry.io/platforms/javascript/guides/vue/configuration/options/#sendDefaultPii
sendDefaultPii: true,
integrations: [
// performance
Sentry.browserTracingIntegration({ router }),
// performance
// session-replay
Sentry.replayIntegration(),
// session-replay
// user-feedback
Sentry.feedbackIntegration({
// Additional SDK configuration goes in here, for example:
colorScheme: "system",
}),
// user-feedback
],
// logs
// Enable logs to be sent to Sentry
_experiments: { enableLogs: true },
// logs
// performance
// Set tracesSampleRate to 1.0 to capture 100%
// of transactions for tracing.
// We recommend adjusting this value in production
// Learn more at
// https://docs.sentry.io/platforms/javascript/configuration/options/#traces-sample-rate
tracesSampleRate: 1.0,
// Set `tracePropagationTargets` to control for which URLs trace propagation should be enabled
tracePropagationTargets: ["localhost", /^https:\/\/yourserver\.io\/api/],
// performance
// session-replay
// Capture Replay for 10% of all sessions,
// plus for 100% of sessions with an error
// Learn more at
// https://docs.sentry.io/platforms/javascript/session-replay/configuration/#general-integration-configuration
replaysSessionSampleRate: 0.1,
replaysOnErrorSampleRate: 1.0,
// session-replay
});
app.use(router);
app.mount("#app");
If you're creating more than one Vue 3 app within your application, check out how to initialize the SDK for multiple apps.
If your Vue application is not defined from the start, you can add error monitoring for Vue-specific errors later on. To manually add the integration for late-defined Vue applications, update your main.js file:
main.jsimport * as Sentry from "@sentry/vue";
Sentry.init({
dsn: "...",
// Filter out default `Vue` integration
integrations: (integrations) =>
integrations.filter((integration) => integration.name !== "Vue"),
});
// Sometimes later
const app = createApp({
template: "<div>hello</div>",
});
Sentry.addIntegration(Sentry.vueIntegration({ app }));
To capture Pinia state data, use Sentry.createSentryPiniaPlugin() and add it to your Pinia store instance:
import { createPinia } from "pinia";
import { createSentryPiniaPlugin } from "@sentry/vue";
const pinia = createPinia();
pinia.use(createSentryPiniaPlugin());
Learn more about the Pinia Plugin and its options.
The stack traces in your Sentry errors probably won't look like your actual code. To fix this, upload your source maps to Sentry. The easiest way to do this is by using the Sentry Wizard:
npx @sentry/wizard@latest -i sourcemaps
You can prevent ad blockers from blocking Sentry events using tunneling. Use the tunnel option to add an API endpoint in your application that forwards Sentry events to Sentry servers.
To enable tunneling, update Sentry.init with the following option:
Sentry.init({
dsn: "https://examplePublicKey@o0.ingest.sentry.io/0",,
tunnel: "/tunnel",
});
This will send all events to the tunnel endpoint. However, the events need to be parsed and redirected to Sentry, so you'll need to do additional configuration on the server. You can find a detailed explanation on how to do this on our Troubleshooting page.
Let's test your setup and confirm that Sentry is working correctly and sending data to your Sentry project.
To verify that Sentry captures errors and creates issues in your Sentry project, add the following test button to one of your pages, which will trigger an error that Sentry will capture when you click it:
App.vue// ...
<button @click="throwError">Throw error</button>
// ...
export default {
// ...
methods: {
throwError() {
throw new Error('Sentry Error');
}
}
};
Open the page in a browser and click the button to trigger a frontend error.
Important
Errors triggered from within your browser's developer tools (like the browser console) are sandboxed, so they will not trigger Sentry's error monitoring.
To test your tracing configuration, update the previous code snippet to start a performance trace to measure the time it takes for the execution of your code:
App.vue// ...
<button @click="throwError">Throw error</button>
// ...
export default {
// ...
methods: {
throwError() {
Sentry.startSpan({ op: "test", name: "Example Frontend Span" }, async () => {
// Simulate an asynchronous operation
await new Promise(resolve => setTimeout(resolve, 99));
throw new Error("Sentry Error");
});
}
}
};
Open the page in a browser and click the button to trigger a frontend error and performance trace.
Now, head over to your project on Sentry.io to view the collected data (it takes a couple of moments for the data to appear).
At this point, you should have integrated Sentry into your Svelte application and should already be sending data to your Sentry project.
Now's a good time to customize your setup and look into more advanced topics. Our next recommended steps for you are:
- Extend Sentry to your backend using one of our SDKs
- Continue to customize your configuration
- Make use of Vue-specific features
- Learn how to manually capture errors
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").