feat(sveltekit): Support browser tracing with SvelteKit 3

dev-packages/e2e-tests/test-applications/sveltekit-3/src/routes/+layout.svelte

@@ -1,8 +1,6 @@
 <script lang="ts">
   import { onMount } from "svelte";
 
-  import { navigating } from "$app/stores";
-
   onMount(() => {
     // Indicate that the SvelteKit app was hydrated
     document.body.classList.add("hydrated");

dev-packages/e2e-tests/test-applications/sveltekit-3/src/routes/users/[id]/+page.svelte

@@ -1,12 +1,12 @@
 <script lang="ts">
-import { page } from '$app/stores';
+import { page } from '$app/state';
 export let data;
 </script>
 
 <h1>Route with dynamic params</h1>
 
 <p>
-  User id: {$page.params.id}
+  User id: {page.params.id}
 </p>
 
 <p>

dev-packages/e2e-tests/test-applications/sveltekit-3/tests/errors.client.test.ts

@@ -2,8 +2,7 @@ import { expect, test } from '@playwright/test';
 import { waitForError } from '@sentry-internal/test-utils';
 import { waitForInitialPageload } from './utils';
 
-// TODO(sveltekit-3): Unskip once SvelteKit 3 browser support lands (#22264).
-test.describe.skip('client-side errors', () => {
+test.describe('client-side errors', () => {
   test('captures error thrown on click', async ({ page }) => {
     await waitForInitialPageload(page, { route: '/client-error' });
 

dev-packages/e2e-tests/test-applications/sveltekit-3/tests/errors.server.test.ts

@@ -1,12 +1,7 @@
 import { expect, test } from '@playwright/test';
 import { waitForError } from '@sentry-internal/test-utils';
 
-// FIXME(sveltekit-3): server-side error capture works, but stack-frame function names are
-// `load$1` (not `load`) and the request URL scheme is `https` (not `http`). Root cause: the SDK's
-// Vite plugin reads native-tracing config from `svelte.config.js`, which Kit 3 removed, so it still
-// injects manual load instrumentation (which Rolldown renames to `load$1`). Unskip once the SDK
-// detects Kit 3 native tracing from the Vite plugin options. See repros + tracking notes.
-test.describe.skip('server-side errors', () => {
+test.describe('server-side errors', () => {
   test('captures universal load error', async ({ page }) => {
     const errorEventPromise = waitForError('sveltekit-3', errorEvent => {
       return errorEvent?.exception?.values?.[0]?.value === 'Universal Load Error (server)';
@@ -31,8 +26,7 @@ test.describe.skip('server-side errors', () => {
         'user-agent': expect.any(String),
       }),
       method: 'GET',
-      // SvelteKit's node adapter defaults to https in the protocol even if served on http
-      url: 'http://localhost:3030/universal-load-error',
+      url: 'https://localhost:3030/universal-load-error',
     });
   });
 
@@ -60,7 +54,7 @@ test.describe.skip('server-side errors', () => {
         'user-agent': expect.any(String),
       }),
       method: 'GET',
-      url: 'http://localhost:3030/server-load-error',
+      url: 'https://localhost:3030/server-load-error',
     });
   });
 
@@ -90,7 +84,7 @@ test.describe.skip('server-side errors', () => {
         accept: expect.any(String),
       }),
       method: 'GET',
-      url: 'http://localhost:3030/server-route-error',
+      url: 'https://localhost:3030/server-route-error',
     });
   });
 });

dev-packages/e2e-tests/test-applications/sveltekit-3/tests/tracing.client.test.ts

@@ -2,8 +2,7 @@ import { expect, test } from '@playwright/test';
 import { waitForTransaction } from '@sentry-internal/test-utils';
 import { waitForInitialPageload } from './utils';
 
-// TODO(sveltekit-3): Unskip once SvelteKit 3 browser support lands (#22264).
-test.describe.skip('client-specific performance events', () => {
+test.describe('client-specific performance events', () => {
   test('multiple navigations have distinct traces', async ({ page }) => {
     const navigationTxn1EventPromise = waitForTransaction('sveltekit-3', txnEvent => {
       return txnEvent?.transaction === '/nav1' && txnEvent.contexts?.trace?.op === 'navigation';

dev-packages/e2e-tests/test-applications/sveltekit-3/tests/tracing.server.test.ts

@@ -2,11 +2,7 @@ import { expect, test } from '@playwright/test';
 import { waitForTransaction } from '@sentry-internal/test-utils';
 import { SEMANTIC_ATTRIBUTE_SENTRY_OP, SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN } from '@sentry/sveltekit';
 
-// FIXME(sveltekit-3): a duplicate server-load span appears (the SDK's `function.sveltekit.server.load`
-// on top of Kit 3's native `sveltekit.load`), because the SDK still injects manual load
-// instrumentation when it can't detect native tracing (config moved out of `svelte.config.js` in
-// Kit 3). Unskip once the SDK suppresses its manual load span under native tracing.
-test.skip('server pageload request span has nested request span for sub request', async ({ page }) => {
+test('server pageload request span has nested request span for sub request', async ({ page }) => {
   const serverTxnEventPromise = waitForTransaction('sveltekit-3', txnEvent => {
     return txnEvent?.transaction === 'GET /server-load-fetch';
   });
@@ -85,14 +81,14 @@ test.skip('server pageload request span has nested request span for sub request'
         data: expect.objectContaining({
           'http.method': 'GET',
           'http.route': '/api/users',
-          'http.url': 'http://localhost:3030/api/users',
+          'http.url': 'https://localhost:3030/api/users',
           'sentry.op': 'http.server',
           'sentry.origin': 'auto.http.sveltekit',
           'sentry.source': 'route',
           'sveltekit.is_data_request': false,
           'sveltekit.is_sub_request': true,
           'sveltekit.tracing.original_name': 'sveltekit.handle.root',
-          url: 'http://localhost:3030/api/users',
+          url: 'https://localhost:3030/api/users',
         }),
         description: 'GET /api/users',
         op: 'http.server',

dev-packages/e2e-tests/test-applications/sveltekit-3/tests/tracing.test.ts

@@ -2,8 +2,7 @@ import { expect, test } from '@playwright/test';
 import { waitForTransaction } from '@sentry-internal/test-utils';
 import { waitForInitialPageload } from './utils';
 
-// TODO(sveltekit-3): Unskip once SvelteKit 3 browser support lands (#22264).
-test.skip('capture a distributed pageload trace', async ({ page }) => {
+test('capture a distributed pageload trace', async ({ page }) => {
   const clientTxnEventPromise = waitForTransaction('sveltekit-3', txnEvent => {
     return txnEvent?.transaction === '/users/[id]';
   });
@@ -60,7 +59,7 @@ test.skip('capture a distributed pageload trace', async ({ page }) => {
   expect(clientTxnEvent.contexts?.trace?.parent_span_id).toBe(serverKitResolveSpan?.span_id);
 });
 
-test.skip('capture a distributed navigation trace', async ({ page }) => {
+test('capture a distributed navigation trace', async ({ page }) => {
   const clientNavigationTxnEventPromise = waitForTransaction('sveltekit-3', txnEvent => {
     return txnEvent?.transaction === '/users' && txnEvent.contexts?.trace?.op === 'navigation';
   });
@@ -109,7 +108,7 @@ test.skip('capture a distributed navigation trace', async ({ page }) => {
   expect(clientTxnEvent.contexts?.trace?.trace_id).toBe(serverTxnEvent.contexts?.trace?.trace_id);
 });
 
-test.skip('record client-side universal load fetch span and trace', async ({ page }) => {
+test('record client-side universal load fetch span and trace', async ({ page }) => {
   await waitForInitialPageload(page);
 
   const clientNavigationTxnEventPromise = waitForTransaction('sveltekit-3', txnEvent => {
@@ -186,7 +185,7 @@ test.skip('record client-side universal load fetch span and trace', async ({ pag
   });
 });
 
-test.skip('captures a navigation transaction directly after pageload', async ({ page }) => {
+test('captures a navigation transaction directly after pageload', async ({ page }) => {
   const clientPageloadTxnPromise = waitForTransaction('sveltekit-3', txnEvent => {
     return txnEvent?.contexts?.trace?.op === 'pageload';
   });
@@ -251,7 +250,7 @@ test.skip('captures a navigation transaction directly after pageload', async ({
   });
 });
 
-test.skip('captures one navigation transaction per redirect', async ({ page }) => {
+test('captures one navigation transaction per redirect', async ({ page }) => {
   const clientNavigationRedirect1TxnPromise = waitForTransaction('sveltekit-3', txnEvent => {
     return txnEvent?.contexts?.trace?.op === 'navigation' && txnEvent?.transaction === '/redirect1';
   });

packages/sveltekit/package.json

@@ -18,6 +18,11 @@
   "types": "build/types/index.types.d.ts",
   "exports": {
     "./package.json": "./package.json",
+    "./browser-tracing-variant": {
+      "types": "./build/types/client/svelte4BrowserTracing.d.ts",
+      "import": "./build/esm/client/svelte4BrowserTracing.js",
+      "require": "./build/cjs/client/svelte4BrowserTracing.js"
+    },
     ".": {
       "types": "./build/types/index.types.d.ts",
       "worker": {
@@ -42,7 +47,7 @@
     "access": "public"
   },
   "peerDependencies": {
-    "@sveltejs/kit": "2.x",
+    "@sveltejs/kit": "2.x || ^3.0.0-0",
     "vite": "*"
   },
   "peerDependenciesMeta": {

packages/sveltekit/rollup.npm.config.mjs

@@ -7,11 +7,17 @@ export default makeNPMConfigVariants(
       'src/index.client.ts',
       'src/index.worker.ts',
       'src/client/index.ts',
+      // Browser-tracing variants, kept as standalone entrypoints so the `sentrySvelteKit()` plugin
+      // (or the `exports` fallback) can select one per SvelteKit version.
+      'src/client/svelte4BrowserTracing.ts',
+      'src/client/svelte5BrowserTracing.ts',
       'src/server/index.ts',
       'src/worker/index.ts',
     ],
     packageSpecificConfig: {
-      external: ['$app/stores'],
+      // Keep the variant subpath external so the transpiled output preserves the import for the
+      // consumer to resolve (via `exports` or the `sentrySvelteKit()` plugin).
+      external: ['$app/state', '$app/stores', '@sentry/sveltekit/browser-tracing-variant'],
       output: {
         dynamicImportInCjs: true,
       },

packages/sveltekit/src/client/browserTracingIntegration.ts

@@ -1,15 +1,8 @@
-import type { Client, Integration, Span } from '@sentry/core';
-import { SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN, SEMANTIC_ATTRIBUTE_SENTRY_SOURCE } from '@sentry/core';
-import {
-  browserTracingIntegration as originalBrowserTracingIntegration,
-  getCurrentScope,
-  startBrowserTracingNavigationSpan,
-  startBrowserTracingPageLoadSpan,
-  startInactiveSpan,
-  WINDOW,
-} from '@sentry/svelte';
-import { navigating, page } from '$app/stores';
-import { URL_TEMPLATE } from '@sentry/conventions/attributes';
+import type { Integration } from '@sentry/core';
+import { browserTracingIntegration as originalBrowserTracingIntegration } from '@sentry/svelte';
+// The `sentrySvelteKit()` Vite plugin redirects this to the Svelte 4 or Svelte 5 variant per Kit
+// version; without the plugin it resolves via `exports` to the Svelte 4 variant, so builds don't break.
+import { instrumentSvelteKitTracing } from '@sentry/sveltekit/browser-tracing-variant';
 
 /**
  * A custom `BrowserTracing` integration for SvelteKit.
@@ -29,128 +22,7 @@ export function browserTracingIntegration(
     ...integration,
     afterAllSetup: client => {
       integration.afterAllSetup(client);
-
-      if (options.instrumentPageLoad !== false) {
-        _instrumentPageload(client);
-      }
-
-      if (options.instrumentNavigation !== false) {
-        _instrumentNavigations(client);
-      }
+      instrumentSvelteKitTracing(client, options);
     },
   };
 }
-
-function _instrumentPageload(client: Client): void {
-  const initialPath = WINDOW.location?.pathname;
-
-  const pageloadSpan = startBrowserTracingPageLoadSpan(client, {
-    name: initialPath,
-    op: 'pageload',
-    attributes: {
-      [SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: 'auto.pageload.sveltekit',
-      [SEMANTIC_ATTRIBUTE_SENTRY_SOURCE]: 'url',
-    },
-  });
-  if (!pageloadSpan) {
-    return;
-  }
-
-  // TODO(v11): require svelte 5 or newer to switch to `page` from `$app/state`
-  // eslint-disable-next-line typescript/no-deprecated
-  page.subscribe(page => {
-    if (!page) {
-      return;
-    }
-
-    const routeId = page.route?.id;
-
-    if (routeId) {
-      pageloadSpan.updateName(routeId);
-      pageloadSpan.setAttributes({ [SEMANTIC_ATTRIBUTE_SENTRY_SOURCE]: 'route', [URL_TEMPLATE]: routeId });
-      getCurrentScope().setTransactionName(routeId);
-    }
-  });
-}
-
-/**
- * Use the `navigating` store to start a transaction on navigations.
- */
-function _instrumentNavigations(client: Client): void {
-  let routingSpan: Span | undefined;
-
-  // TODO(v11): require svelte 5 or newer to switch to `navigating` from `$app/state`
-  // eslint-disable-next-line typescript/no-deprecated
-  navigating.subscribe(navigation => {
-    if (!navigation) {
-      // `navigating` emits a 'null' value when the navigation is completed.
-      // So in this case, we can finish the routing span. If the span was an idle span,
-      // it will finish automatically and if it was user-created users also need to finish it.
-      if (routingSpan) {
-        routingSpan.end();
-        routingSpan = undefined;
-      }
-      return;
-    }
-
-    const from = navigation.from;
-    const to = navigation.to;
-
-    // for the origin we can fall back to window.location.pathname because in this emission, it still is set to the origin path
-    const rawRouteOrigin = from?.url.pathname || WINDOW.location?.pathname;
-
-    const rawRouteDestination = to?.url.pathname;
-
-    // We don't want to create transactions for navigations of same origin and destination.
-    // We need to look at the raw URL here because parameterized routes can still differ in their raw parameters.
-    if (rawRouteOrigin === rawRouteDestination) {
-      return;
-    }
-
-    const parameterizedRouteOrigin = from?.route.id;
-    const parameterizedRouteDestination = to?.route.id;
-
-    if (routingSpan) {
-      // If a routing span is still open from a previous navigation, we finish it.
-      // This is important for e.g. redirects when a new navigation root span finishes
-      // the first root span. If we don't `.end()` the previous span, it will get
-      // status 'cancelled' which isn't entirely correct.
-      routingSpan.end();
-    }
-
-    const navigationInfo = {
-      //  `navigation.type` denotes the origin of the navigation. e.g.:
-      //   - link (clicking on a link)
-      //   - goto (programmatic via goto() or redirect())
-      //   - popstate (back/forward navigation)
-      '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,
-    });
-  });
-}