SvelteKit observability just got 10x better, and we’re here for it

The Svelte Team recently announced full observability and tracing support for SvelteKit! This is great news for SvelteKit and Sentry users, since Sentry is already compatible with the new feature! In addition, this is even greater news for the JavaScript ecosystem as a whole because SvelteKit just became the first ESM-based meta-framework to support instrumentation and tracing out of the box. Let’s explore why this is such an important step and how SvelteKit became a role model for other ESM frameworks to follow along.

What just happened?What just happened?

From SvelteKit version 2.31.0 onwards, you can opt into server-side instrumentation as well as SvelteKit-emitted spans to significantly augment server-side traces. This is great news for anyone wanting to add observability to their SvelteKit application and here’s why:

SvelteKit now supports instrumenting telemetry using a dedicated file, instrumentation.server.js, which will initialize your server-side instrumentation. This file is inserted into the final build in a way so that it is evaluated early enough for auto instrumentation, like OpenTelemetry, to fully capture what’s going on during your server-side requests.

The Svelte team didn’t stop there: SvelteKit now also emits dedicated spans for your request handlers, load functions, form actions and even remote functions. This makes it much easier for you to track which specific parts in your application’s request life cycle are taking up the most time, or understand the different performance characteristics within your application.

Here’s the best part: Since version 10.8.0 the Sentry SvelteKit SDK is also fully compatible with SvelteKit’s official instrumentation and tracing feature!

How to use SvelteKit observability with SentryHow to use SvelteKit observability with Sentry

If you haven’t used Sentry yet, check out our SvelteKit docs to get started! They are already updated and show the up to date, SvelteKit observability-supported setup. It’s easiest to use our installation wizard, which of course also sets you up with the new configuration.

If you’re already using Sentry in your SvelteKit application, migrating over is a simple, 2-step process:

1. Enable server-side instrumentation and tracing in your svelte.config.js:

/** @type {import('@sveltejs/kit').Config} */
const config = {
	kit: {
		experimental: {
			tracing: {
				server: true
			},
			instrumentation: {
				server: true
			}
		}
	}
};

export default config;

2. Move your Sentry.init call from src/hooks.server.js to src/instrumentation.server.js:

import * as Sentry from "@sentry/sveltekit";

Sentry.init({
  dsn: "your-dsn",
  tracesSampleRate: 1,
  // rest of your config
});

Sentry’s request handler and error handler should remain in src/hooks.server.js:

import * as Sentry from "@sentry/sveltekit"

export const handle = Sentry.sentryHandle();

export const handleError = Sentry.handleErrorWithSentry()

That’s already it!

Here’s a quick preview of how your traces will look in Sentry. All SvelteKit spans now come directly from the framework.

Thanks to the proper instrumentation.server.js placement, database auto instrumentation now also just works:

SvelteKit raises the bar for observabilitySvelteKit raises the bar for observability

While this new SvelteKit feature is certainly great news for Svelte (and Sentry), the important part is that the Svelte team just accomplished a milestone in the JS ecosystem: SvelteKit is now the first ESM-based meta framework to fully support observability and auto instrumentation. While in other frameworks, users can only enable full auto instrumentation by somehow adding the --import flag to their build command (which is not always possible), SvelteKit now takes care of this for you. instrumentation.server.(js|ts) is now just another file in your src directory, with full type safety and build time support.

We congratulate the Svelte team for becoming framework leaders in the ESM observability space! Furthermore, we want to give a special shoutout and thank you to Elliot Johnson who implemented this feature and incorporated our PR reviews, feedback and suggestions along the way.

If you’re interested in the many challenges of observability in the ESM ecosystem, you can watch this talk (luckily it’s outdated now for SvelteKit) or go check out our ESM Observability guide which gives recommendations to framework and library authors, as well as hosting platforms.

If you want to support observability in your library, framework or hosting platform, we’re happy to collaborate!