fix(sveltekit): Support browser tracing with SvelteKit 3

Lms24 · cursoragent · Lms24 · commit df225dd07aea · 2026-07-14T18:03:00.000+02:00
Select the compatible tracing state API at runtime so existing setups continue to work across SvelteKit 2 and 3. Add preview coverage for pageload and navigation tracing without the removed $app/stores module. Fixes #22263 Co-Authored-By: Cursor <cursoragent@cursor.com> Co-authored-by: Cursor <cursoragent@cursor.com>
diff --git a/dev-packages/e2e-tests/test-applications/sveltekit-3-preview/.gitignore b/dev-packages/e2e-tests/test-applications/sveltekit-3-preview/.gitignore
@@ -0,0 +1,10 @@
+.DS_Store
+node_modules
+/build
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*
diff --git a/dev-packages/e2e-tests/test-applications/sveltekit-3-preview/package.json b/dev-packages/e2e-tests/test-applications/sveltekit-3-preview/package.json
@@ -0,0 +1,37 @@
+{
+  "name": "sveltekit-3-preview",
+  "version": "0.0.1",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build",
+    "preview": "vite preview",
+    "proxy": "node start-event-proxy.mjs",
+    "clean": "npx rimraf node_modules pnpm-lock.yaml",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "test:prod": "TEST_ENV=production playwright test",
+    "test:build": "pnpm install && pnpm build",
+    "test:assert": "pnpm test:prod"
+  },
+  "dependencies": {
+    "@sentry/sveltekit": "file:../../packed/sentry-sveltekit-packed.tgz"
+  },
+  "devDependencies": {
+    "@playwright/test": "~1.56.0",
+    "@sentry-internal/test-utils": "link:../../../test-utils",
+    "@sveltejs/adapter-node": "6.0.0-next.3",
+    "@sveltejs/kit": "3.0.0-next.8",
+    "@sveltejs/vite-plugin-svelte": "7.2.0",
+    "svelte": "5.56.5",
+    "svelte-check": "4.7.2",
+    "typescript": "6.0.0-beta",
+    "vite": "8.1.4"
+  },
+  "sentryTest": {
+    "skip": true
+  },
+  "volta": {
+    "extends": "../../package.json"
+  }
+}
diff --git a/dev-packages/e2e-tests/test-applications/sveltekit-3-preview/playwright.config.mjs b/dev-packages/e2e-tests/test-applications/sveltekit-3-preview/playwright.config.mjs
@@ -0,0 +1,8 @@
+import { getPlaywrightConfig } from '@sentry-internal/test-utils';
+
+const config = getPlaywrightConfig({
+  startCommand: 'ORIGIN=http://localhost:3030 node ./build/index.js',
+  port: 3030,
+});
+
+export default config;
diff --git a/dev-packages/e2e-tests/test-applications/sveltekit-3-preview/src/app.d.ts b/dev-packages/e2e-tests/test-applications/sveltekit-3-preview/src/app.d.ts
@@ -0,0 +1,5 @@
+declare global {
+  namespace App {}
+}
+
+export {};
diff --git a/dev-packages/e2e-tests/test-applications/sveltekit-3-preview/src/app.html b/dev-packages/e2e-tests/test-applications/sveltekit-3-preview/src/app.html
@@ -0,0 +1,11 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    %sveltekit.head%
+  </head>
+  <body data-sveltekit-preload-data="hover">
+    <div style="display: contents">%sveltekit.body%</div>
+  </body>
+</html>
diff --git a/dev-packages/e2e-tests/test-applications/sveltekit-3-preview/src/env.ts b/dev-packages/e2e-tests/test-applications/sveltekit-3-preview/src/env.ts
@@ -0,0 +1,7 @@
+import { defineEnvVars } from '@sveltejs/kit/hooks';
+
+export const variables = defineEnvVars({
+  PUBLIC_E2E_TEST_DSN: {
+    public: true,
+  },
+});
diff --git a/dev-packages/e2e-tests/test-applications/sveltekit-3-preview/src/hooks.client.ts b/dev-packages/e2e-tests/test-applications/sveltekit-3-preview/src/hooks.client.ts
@@ -0,0 +1,8 @@
+import { PUBLIC_E2E_TEST_DSN } from '$app/env/public';
+import * as Sentry from '@sentry/sveltekit';
+
+Sentry.init({
+  dsn: PUBLIC_E2E_TEST_DSN,
+  tunnel: 'http://localhost:3031/',
+  tracesSampleRate: 1.0,
+});
diff --git a/dev-packages/e2e-tests/test-applications/sveltekit-3-preview/src/routes/+layout.svelte b/dev-packages/e2e-tests/test-applications/sveltekit-3-preview/src/routes/+layout.svelte
@@ -0,0 +1,12 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import type { Snippet } from 'svelte';
+
+  let { children }: { children: Snippet } = $props();
+
+  onMount(() => {
+    document.body.classList.add('hydrated');
+  });
+</script>
+
+{@render children()}
diff --git a/dev-packages/e2e-tests/test-applications/sveltekit-3-preview/src/routes/+page.svelte b/dev-packages/e2e-tests/test-applications/sveltekit-3-preview/src/routes/+page.svelte
@@ -0,0 +1,2 @@
+<h1>SvelteKit 3 preview</h1>
+<a href="/target">Target</a>
diff --git a/dev-packages/e2e-tests/test-applications/sveltekit-3-preview/src/routes/target/+page.svelte b/dev-packages/e2e-tests/test-applications/sveltekit-3-preview/src/routes/target/+page.svelte
@@ -0,0 +1 @@
+<h1>Target</h1>
diff --git a/dev-packages/e2e-tests/test-applications/sveltekit-3-preview/start-event-proxy.mjs b/dev-packages/e2e-tests/test-applications/sveltekit-3-preview/start-event-proxy.mjs
@@ -0,0 +1,6 @@
+import { startEventProxyServer } from '@sentry-internal/test-utils';
+
+startEventProxyServer({
+  port: 3031,
+  proxyServerName: 'sveltekit-3-preview',
+});
diff --git a/dev-packages/e2e-tests/test-applications/sveltekit-3-preview/tests/client-startup.test.ts b/dev-packages/e2e-tests/test-applications/sveltekit-3-preview/tests/client-startup.test.ts
@@ -0,0 +1,47 @@
+import { expect, test } from '@playwright/test';
+import { waitForTransaction } from '@sentry-internal/test-utils';
+
+test('starts the client without a removed $app/stores module error', async ({ page }) => {
+  const pageErrors: string[] = [];
+  const pageLoadTransactionPromise = waitForTransaction(
+    'sveltekit-3-preview',
+    event => event.contexts?.trace?.op === 'pageload',
+  );
+  const navigationTransactionPromise = waitForTransaction(
+    'sveltekit-3-preview',
+    event => event.contexts?.trace?.op === 'navigation',
+  );
+
+  page.on('pageerror', error => {
+    pageErrors.push(error.message);
+  });
+
+  await page.goto('/');
+  await page.waitForLoadState('networkidle');
+  expect(pageErrors).toEqual([]);
+  await expect(page.locator('body')).toHaveClass(/hydrated/);
+  const pageLoadTransaction = await pageLoadTransactionPromise;
+
+  await page.getByRole('link', { name: 'Target' }).click();
+  await expect(page).toHaveURL(/\/target$/);
+  const navigationTransaction = await navigationTransactionPromise;
+
+  expect(pageLoadTransaction.contexts?.trace).toMatchObject({
+    op: 'pageload',
+    origin: 'auto.pageload.sveltekit',
+  });
+  expect(navigationTransaction.contexts?.trace).toMatchObject({
+    op: 'navigation',
+    origin: 'auto.navigation.sveltekit',
+  });
+  expect(navigationTransaction.transaction).toBe('/target');
+  expect(navigationTransaction.transaction_info?.source).toBe('route');
+  expect(navigationTransaction.spans).toEqual(
+    expect.arrayContaining([
+      expect.objectContaining({
+        op: 'ui.sveltekit.routing',
+        origin: 'auto.ui.sveltekit',
+      }),
+    ]),
+  );
+});
diff --git a/dev-packages/e2e-tests/test-applications/sveltekit-3-preview/tsconfig.json b/dev-packages/e2e-tests/test-applications/sveltekit-3-preview/tsconfig.json
@@ -0,0 +1,14 @@
+{
+  "extends": "./.svelte-kit/tsconfig.json",
+  "compilerOptions": {
+    "allowJs": true,
+    "checkJs": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+    "sourceMap": true,
+    "strict": true,
+    "moduleResolution": "bundler"
+  }
+}
diff --git a/dev-packages/e2e-tests/test-applications/sveltekit-3-preview/vite.config.ts b/dev-packages/e2e-tests/test-applications/sveltekit-3-preview/vite.config.ts
@@ -0,0 +1,17 @@
+import { sentrySvelteKit } from '@sentry/sveltekit';
+import adapter from '@sveltejs/adapter-node';
+import { sveltekit } from '@sveltejs/kit/vite';
+import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+  plugins: [
+    sentrySvelteKit({
+      autoUploadSourceMaps: false,
+    }),
+    sveltekit({
+      adapter: adapter(),
+      preprocess: vitePreprocess(),
+    }),
+  ],
+});
diff --git a/packages/sveltekit/package.json b/packages/sveltekit/package.json
@@ -42,7 +42,7 @@
     "access": "public"
   },
   "peerDependencies": {
-    "@sveltejs/kit": "2.x",
+    "@sveltejs/kit": "2.x || ^3.0.0-0",
     "vite": "*"
   },
   "peerDependenciesMeta": {
diff --git a/packages/sveltekit/rollup.npm.config.mjs b/packages/sveltekit/rollup.npm.config.mjs
@@ -11,7 +11,7 @@ export default makeNPMConfigVariants(
       'src/worker/index.ts',
     ],
     packageSpecificConfig: {
-      external: ['$app/stores'],
+      external: ['$app/state', '$app/stores'],
       output: {
         dynamicImportInCjs: true,
       },
diff --git a/packages/sveltekit/src/client/browserTracingIntegration.ts b/packages/sveltekit/src/client/browserTracingIntegration.ts
@@ -8,8 +8,12 @@ import {
   startInactiveSpan,
   WINDOW,
 } from '@sentry/svelte';
-import { navigating, page } from '$app/stores';
 import { URL_TEMPLATE } from '@sentry/conventions/attributes';
+import type { Navigation, Page } from '@sveltejs/kit';
+import { VERSION } from '@sveltejs/kit';
+import type { Readable } from 'svelte/store';
+
+const IS_SVELTEKIT_3 = Number(VERSION.split('.')[0]) >= 3;
 
 /**
  * A custom `BrowserTracing` integration for SvelteKit.
@@ -30,18 +34,34 @@ export function browserTracingIntegration(
     afterAllSetup: client => {
       integration.afterAllSetup(client);
 
-      if (options.instrumentPageLoad !== false) {
-        _instrumentPageload(client);
-      }
-
-      if (options.instrumentNavigation !== false) {
-        _instrumentNavigations(client);
+      if (IS_SVELTEKIT_3) {
+        void import('./kit3BrowserTracingIntegration').then(({ instrumentSvelteKit3Tracing }) => {
+          instrumentSvelteKit3Tracing(client, options);
+        });
+      } else {
+        void _instrumentSvelteKit2Tracing(client, options);
       }
     },
   };
 }
 
-function _instrumentPageload(client: Client): void {
+async function _instrumentSvelteKit2Tracing(
+  client: Client,
+  options: NonNullable<Parameters<typeof originalBrowserTracingIntegration>[0]>,
+): Promise<void> {
+  // eslint-disable-next-line typescript/no-deprecated
+  const { navigating, page } = await import('$app/stores');
+
+  if (options.instrumentPageLoad !== false) {
+    _instrumentPageload(client, page);
+  }
+
+  if (options.instrumentNavigation !== false) {
+    _instrumentNavigations(client, navigating);
+  }
+}
+
+function _instrumentPageload(client: Client, page: Readable<Page>): void {
   const initialPath = WINDOW.location?.pathname;
 
   const pageloadSpan = startBrowserTracingPageLoadSpan(client, {
@@ -76,7 +96,7 @@ function _instrumentPageload(client: Client): void {
 /**
  * Use the `navigating` store to start a transaction on navigations.
  */
-function _instrumentNavigations(client: Client): void {
+function _instrumentNavigations(client: Client, navigating: Readable<Navigation | null>): void {
   let routingSpan: Span | undefined;
 
   // TODO(v11): require svelte 5 or newer to switch to `navigating` from `$app/state`
diff --git a/packages/sveltekit/src/client/kit3BrowserTracingIntegration.ts b/packages/sveltekit/src/client/kit3BrowserTracingIntegration.ts
@@ -0,0 +1,106 @@
+import type { Client, Span } from '@sentry/core';
+import { SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN, SEMANTIC_ATTRIBUTE_SENTRY_SOURCE } from '@sentry/core';
+import {
+  getCurrentScope,
+  startBrowserTracingNavigationSpan,
+  startBrowserTracingPageLoadSpan,
+  startInactiveSpan,
+  WINDOW,
+} from '@sentry/svelte';
+import { URL_TEMPLATE } from '@sentry/conventions/attributes';
+import { page } from '$app/state';
+import { onNavigationChange } from './navigationState.svelte';
+
+/** @internal */
+export function instrumentSvelteKit3Tracing(
+  client: Client,
+  options: { instrumentPageLoad?: boolean; instrumentNavigation?: boolean },
+): void {
+  if (options.instrumentPageLoad !== false) {
+    _instrumentPageLoad(client);
+  }
+
+  if (options.instrumentNavigation !== false) {
+    _instrumentNavigations(client);
+  }
+}
+
+function _instrumentPageLoad(client: Client): void {
+  const routeId = page.route.id;
+  const initialPath = WINDOW.location?.pathname;
+
+  const pageLoadSpan = startBrowserTracingPageLoadSpan(client, {
+    name: routeId || initialPath,
+    op: 'pageload',
+    attributes: {
+      [SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: 'auto.pageload.sveltekit',
+      [SEMANTIC_ATTRIBUTE_SENTRY_SOURCE]: routeId ? 'route' : 'url',
+      ...(routeId && { [URL_TEMPLATE]: routeId }),
+    },
+  });
+
+  if (routeId) {
+    getCurrentScope().setTransactionName(routeId);
+  }
+
+  if (!pageLoadSpan) {
+    return;
+  }
+}
+
+function _instrumentNavigations(client: Client): void {
+  let routingSpan: Span | undefined;
+
+  onNavigationChange(navigation => {
+    if (!navigation) {
+      routingSpan?.end();
+      routingSpan = undefined;
+      return;
+    }
+
+    const from = navigation.from;
+    const to = navigation.to;
+    const rawRouteOrigin = from?.url.pathname || WINDOW.location?.pathname;
+    const rawRouteDestination = to?.url.pathname;
+
+    if (rawRouteOrigin === rawRouteDestination) {
+      return;
+    }
+
+    const parameterizedRouteOrigin = from?.route.id;
+    const parameterizedRouteDestination = to?.route.id;
+
+    routingSpan?.end();
+
+    const navigationInfo = {
+      'sentry.sveltekit.navigation.type': navigation.type,
+      'sentry.sveltekit.navigation.from': parameterizedRouteOrigin || undefined,
+      'sentry.sveltekit.navigation.to': parameterizedRouteDestination || undefined,
+    };
+
+    startBrowserTracingNavigationSpan(
+      client,
+      {
+        name: parameterizedRouteDestination || rawRouteDestination || 'unknown',
+        op: 'navigation',
+        attributes: {
+          [SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: 'auto.navigation.sveltekit',
+          [SEMANTIC_ATTRIBUTE_SENTRY_SOURCE]: parameterizedRouteDestination ? 'route' : 'url',
+          ...(parameterizedRouteDestination && { [URL_TEMPLATE]: parameterizedRouteDestination }),
+          ...navigationInfo,
+        },
+      },
+      { url: to?.url.href },
+    );
+
+    routingSpan = startInactiveSpan({
+      op: 'ui.sveltekit.routing',
+      name: 'SvelteKit Route Change',
+      attributes: {
+        [SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: 'auto.ui.sveltekit',
+        ...navigationInfo,
+      },
+      onlyIfParent: true,
+    });
+  });
+}
diff --git a/packages/sveltekit/src/client/navigationState.svelte.ts b/packages/sveltekit/src/client/navigationState.svelte.ts
diff --git a/packages/sveltekit/test/client/browserTracingIntegration.test.ts b/packages/sveltekit/test/client/browserTracingIntegration.test.ts
diff --git a/packages/sveltekit/vite.config.ts b/packages/sveltekit/vite.config.ts

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,2 @@`
	`1`	`+<h1>SvelteKit 3 preview</h1>`
	`2`	`+<a href="/target">Target</a>`