Svelte
Learn how to manually set up Sentry in your Svelte 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/svelte --save
To use the SDK, initialize it in your Svelte entry point before bootstrapping your app. In a typical Svelte project, that is your main.js or main.ts file.
main.jsimport { mount } from "svelte";
import "./app.css";
import App from "./App.svelte";
import * as Sentry from "@sentry/svelte";
// Initialize the Sentry SDK here
Sentry.init({
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/svelte/configuration/options/#sendDefaultPii
sendDefaultPii: true,
integrations: [
// performance
Sentry.browserTracingIntegration(),
// performance
// session-replay
Sentry.replayIntegration(),
// session-replay
],
// 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 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
});
const app = mount(App, {
target: document.getElementById("app"),
});
export default app;
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
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:
SomeComponent.svelte<button
type="button"
onclick={() => {
throw new Error("Sentry Frontend Error");
}}
>
Throw error
</button>;
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:
SomeComponent.svelte<button
type="button"
onClick={() => {
Sentry.startSpan({ op: "test", name: "Example Frontend Span" }, () => {
setTimeout(() => {
throw new Error("Sentry Frontend Error");
}, 99);
});
}}
>
Throw error
</button>;
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 Svelte-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").