Sentry for SvelteKit

We’re happy to announce that the Sentry SvelteKit SDK is now generally available and ready to help you monitor your SvelteKit application.

Last year, we entered the Svelte ecosystem by creating an SDK for Svelte, which provides support for Svelte single page apps. We knew that SvelteKit was already quite far along back then and we kept a close eye on its development. We also received a lot of requests from the community to support SvelteKit. Once SvelteKit 1.0 was announced and the framework became stable, we knew it was finally time to support it.

So, let’s take a closer look at the new SvelteKit SDK—how to use it, how we developed it, and what’s up next.

Sentry SvelteKit SDK Features

The Sentry SvelteKit SDK supports all of Sentry’s features right out of the box, including:

• Error monitoring: The SDK automatically captures errors and exceptions in your SvelteKit application, including detailed information such as stack traces, breadcrumbs, and custom tagging.
• Performance monitoring: The SDK automatically collects performance data from your SvelteKit application. This includes collecting web vitals and spans for page loads, navigations, universal and server load functions, server requests, and distributed tracing.
• Session Replay: The SDK offers seamless integration with Session Replay, helping you identify the root cause of an error faster with a video-like recreation of a user session.
• Profiling: Add Sentry Profiling to the server-side of your SvelteKit app. Profiling helps you identify performance bottlenecks at code-level.

Getting Started

Adding Sentry to your SvelteKit app is simple, like “one-line of code” simple. Just run the following command in your project root and Sentry’s SDK setup wizard will do the rest:

npx @sentry/wizard@latest -i sveltekit

The wizard will guide you through setting up your Sentry project, install and configure the SDK, and even add a sample error page to your app to verify your Sentry setup.

Are you more of a hands-on dev, and want to configure the SDK yourself? No problem. You can also set up the SDK manually.

Some Nerdy Details

We built the SvelteKit SDK on top of our Svelte and Node SDKs. To properly support SvelteKit, we added a bunch of additional functionality to collect information from SvelteKit.

SvelteKit exposes hooks for various events on client and server, which are great interfaces for APM SDKs like ours. We made extensive use of these hooks to capture errors and spans on both client and server. Using these hooks allows us to catch the most context around errors and app performance, helping developers more easily understand what happened or why their app might be slow.

At the time of writing this blog post, SvelteKit doesn’t yet expose hooks for load functions. We definitely wanted to instrument them though, so we decided to automatically apply a wrapper around users’ load functions at build time via a Vite plugin. This wrapper captures errors occurring during loads and records spans to analyze how much time a load execution took on client or server. Furthermore, it instruments SvelteKit’s own fetch implementation so that distributed tracing works from within load functions.

We’d love to make our load and fetch instrumentation even better and simpler in the future. To achieve this, we proposed two new hooks for SvelteKit: handleLoad and handleFetch. We believe these hooks won’t just help us, but they’ll make SvelteKit overall better. If you want to see them become reality, feel free to leave a comment on the GitHub issues linked above.

Do you want to know more about how our SDK works? Head over to our SDK repo.

The Svelte Community

Developing this SDK was an awesome experience for our team, mainly because of the supportive and friendly Svelte Community. The GitHub discussion and issue around SvelteKit support have been one of the most active conversations in the history of our SDK repository. Countless people expressed interest in the development, watched it closely, and offered to try out even the earliest alpha builds. Getting this early feedback helped us immensely as it allowed us to make good design decisions and iron out some issues early on.

Shoutouts to some of the community members who helped along the way:

• @jycouet for pointing out issues in the first alpha version of the SDK, making us rethink our SDK initialization flow.
• @madeleineostoja, @hrueger, and @wtachau for sharing their opinions on instrumenting load functions. We incorporated their feedback into our auto-instrumentation feature.
• @thenbe for sharing how to prepare SvelteKit source maps to upload them to Sentry.
• @sreetamdas for opening a PR with an important bugfix when the SDK was still in beta.

Also, we’d like to thank Rich Harris, the creator of Svelte and SvelteKit, for providing helpful feedback, mentioning Sentry in the SvelteKit docs and for considering the changes we proposed to SvelteKit.

Next Steps for Sentry SvelteKit SDK

We’re not done yet! While we consider the SDK API stable and ready for general usage, we’re still committed to adding new features. This includes:

• Adding support for more SvelteKit adapters. Currently we only support the Node adapter, but we’re planning on adding support for more of them. Next up, we’ll take a look at supporting the Vercel adapter, including Vercel’s edge runtime.
• Resolve stack traces in dev-mode to provide source-mapped stack traces in Sentry for errors caught during local development.
• You tell us! We still have some stretch goals in mind but if you want to see something specific happen, feel free to open an issue or — even better — submit a PR.