SvelteKit
Learn how to set up and configure Sentry in your SvelteKit application using the installation wizard, capture your first errors, and view them in Sentry.
Use curl to download, read and follow https://skills.sentry.dev/instrument to set up the Sentry SvelteKit SDK.You need:
- A Sentry account and project
- Your application up and running
- SvelteKit version
2.0.0+ (we recommend2.31.0or higher for best support) - Vite version
4.2+
The AI-powered sentry init flow is currently experimental. To use the existing framework-specific setup instead, see the option below, or check out the Manual Setup guide.
Run the Sentry init command in your project directory to automatically configure Sentry in your SvelteKit application.
The command guides you through setup and asks which optional Sentry features you want to enable beyond error monitoring.
npx sentry@latest init
npx sentry@latest init
You can prevent ad blockers from blocking Sentry events using tunneling. Use the tunnel option inside your hooks.client.(js|ts) file's Sentry.init to add an API endpoint in your application that forwards Sentry events to Sentry servers.
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.
hooks.client.(js|ts)Sentry.init({
dsn: "___PUBLIC_DSN___",
tunnel: "/tunnel",
});
Sentry.init({
dsn: "___PUBLIC_DSN___",
tunnel: "/tunnel",
});
By default, the SDK sends user identity data (IP address, ID, and similar) and other data like HTTP bodies and URL query parameters. This will give you rich debugging context.
The SDK always filters sensitive values whose keys match a built-in denylist, such as auth or password, and sends [Filtered] instead.
To send less data, turn off the categories you don't need in the dataCollection option. For the full list of categories and their defaults, see the dataCollection options.
Sentry.init({
dsn: "___PUBLIC_DSN___",
dataCollection: {
userInfo: false,
// other categories
},
});
Sentry.init({
dsn: "___PUBLIC_DSN___",
dataCollection: {
userInfo: false,
// other categories
},
});
The sentry init command checks the integration files it creates or modifies before it finishes. To confirm runtime events are reaching Sentry, start your SvelteKit app, exercise the parts of your app that should send events, and then check your Sentry project.
If you used the SvelteKit installation wizard instead, you can also verify your setup with the example page and route it creates:
- Open the example page
/sentry-example-pagein your browser - Click the "Throw Sample Error" button. This triggers two errors:
- a frontend error
- an error within the API route
Sentry captures both of these errors for you. Additionally, the button click starts a trace to measure the time it takes for the API request to complete.
Tip
If you used the SvelteKit installation wizard, explore the example files' code in your project to understand what's happening after your button click.
Logs (enabled by default)
See structured log entries from your application. You can send logs from anywhere:
Sentry.logger.info("User action", { userId: "123" });
Sentry.logger.warn("Slow response", { duration: 5000 });
Sentry.logger.error("Operation failed", { reason: "timeout" });
Sentry.logger.info("User action", { userId: "123" });
Sentry.logger.warn("Slow response", { duration: 5000 });
Sentry.logger.error("Operation failed", { reason: "timeout" });
Learn more about Logs configuration.
Application Metrics (enabled by default) NEW
Track and analyze custom application metrics to understand trends and patterns in your app's performance and behavior over time:
Sentry.metrics.count("checkout.failed", 1);
Sentry.metrics.gauge("queue.depth", 42);
Sentry.metrics.distribution("api_latency", 187, {
unit: "millisecond",
});
Sentry.metrics.count("checkout.failed", 1);
Sentry.metrics.gauge("queue.depth", 42);
Sentry.metrics.distribution("api_latency", 187, {
unit: "millisecond",
});
Learn more about Application Metrics.
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).
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.
At this point, you should have integrated Sentry into your SvelteKit application and should already be sending error and performance 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:
- Explore practical guides on what to monitor, log, track, and investigate after setup
- Learn how to manually capture errors
- Continue to customize your configuration
- Learn how to manually instrument SvelteKit-specific features
- Learn more about deploying SvelteKit apps to Cloudflare Pages
- Get familiar with Sentry's product features like tracing, insights, and alerts
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").