feat(sveltekit): Support browser tracing with SvelteKit 3#22264

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
chargome merged 10 commits into from
Jul 17, 2026
Merged

feat(sveltekit): Support browser tracing with SvelteKit 3 #22264

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
bc9e2a0
wip
chargome Jun 16, 2026
a2b8566
feat(sveltekit): Detect native tracing from promoted `kit.tracing` co…
chargome Jul 15, 2026
7e22244
.
chargome Jun 18, 2026
3599250
fix(sveltekit): Support browser tracing with SvelteKit 3
Lms24 Jul 14, 2026
8b95aff
rebase on existing test
chargome Jul 15, 2026
7df4272
feat(sveltekit): Select browser-tracing variant at build time for Sve…
chargome Jul 16, 2026
b50250e
build(sveltekit): Treat `sentry-sveltekit-tracing` as external in siz…
chargome Jul 16, 2026
d83c63b
fix(sveltekit): Fall back to Svelte version, not svelte.config, for v…
chargome Jul 16, 2026
6412e54
ref(sveltekit): Route variant-detection fallback warning through cons…
chargome Jul 16, 2026
acb730e
simplify virtual module
chargome Jul 17, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 0 additions & 2 deletions dev-packages/e2e-tests/test-applications/sveltekit-3/src/routes/+layout.svelte
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -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");
Expand Down
4 changes: 2 additions & 2 deletions dev-packages/e2e-tests/test-applications/sveltekit-3/src/routes/users/[id]/+page.svelte
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -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>
Expand Down
3 changes: 1 addition & 2 deletions dev-packages/e2e-tests/test-applications/sveltekit-3/tests/errors.client.test.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -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' });

Expand Down
14 changes: 4 additions & 10 deletions dev-packages/e2e-tests/test-applications/sveltekit-3/tests/errors.server.test.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -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)';
Expand All@@ -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',
});
});

Expand DownExpand Up@@ -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',
});
});

Expand DownExpand Up@@ -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',
});
});
});
3 changes: 1 addition & 2 deletions dev-packages/e2e-tests/test-applications/sveltekit-3/tests/tracing.client.test.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -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';
Expand Down
10 changes: 3 additions & 7 deletions dev-packages/e2e-tests/test-applications/sveltekit-3/tests/tracing.server.test.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -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';
});
Expand DownExpand Up@@ -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',
Expand Down
11 changes: 5 additions & 6 deletions dev-packages/e2e-tests/test-applications/sveltekit-3/tests/tracing.test.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -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]';
});
Expand DownExpand Up@@ -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';
});
Expand DownExpand Up@@ -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 => {
Expand DownExpand Up@@ -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';
});
Expand DownExpand Up@@ -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';
});
Expand Down
7 changes: 6 additions & 1 deletion packages/sveltekit/package.json
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -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": {
Expand All@@ -42,7 +47,7 @@
"access": "public"
},
"peerDependencies": {
"@sveltejs/kit": "2.x",
"@sveltejs/kit": "2.x || ^3.0.0-0",

@Lms24Lms24Jul 17, 2026

Copy link
Copy Markdown
MemberAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

TIL about -0 matching on previews and stable versions

"vite": "*"
},
"peerDependenciesMeta": {
Expand Down
8 changes: 7 additions & 1 deletion packages/sveltekit/rollup.npm.config.mjs
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -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,
},
Expand Down
140 changes: 6 additions & 134 deletions packages/sveltekit/src/client/browserTracingIntegration.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -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.
Expand All@@ -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,
});
});
}
Loading
Loading
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all 
 blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks");
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '

Skip to content
feat(sveltekit): Support browser tracing with SvelteKit 3#22264

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

chargome
merged 10 commits into

from

Jul 17, 2026
 Merged


feat(sveltekit): Support browser tracing with SvelteKit 3
#22264
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


10 commits


Select commit
Hold shift + click to select a range
bc9e2a0

wip


chargome Jun 16, 2026
a2b8566

feat(sveltekit): Detect native tracing from promoted `kit.tracing` co…


chargome Jul 15, 2026
7e22244

.


chargome Jun 18, 2026
3599250

fix(sveltekit): Support browser tracing with SvelteKit 3


Lms24 Jul 14, 2026
8b95aff

rebase on existing test


chargome Jul 15, 2026
7df4272

feat(sveltekit): Select browser-tracing variant at build time for Sve…


chargome Jul 16, 2026
b50250e

build(sveltekit): Treat `sentry-sveltekit-tracing` as external in siz…


chargome Jul 16, 2026
d83c63b

fix(sveltekit): Fall back to Svelte version, not svelte.config, for v…


chargome Jul 16, 2026
6412e54

ref(sveltekit): Route variant-detection fallback warning through cons…


chargome Jul 16, 2026
acb730e

simplify virtual module


chargome Jul 17, 2026

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


2 changes: 0 additions & 2 deletions
dev-packages/e2e-tests/test-applications/sveltekit-3/src/routes/+layout.svelte

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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");
Expand Down

4 changes: 2 additions & 2 deletions
dev-packages/e2e-tests/test-applications/sveltekit-3/src/routes/users/[id]/+page.svelte

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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>
Expand Down

3 changes: 1 addition & 2 deletions
dev-packages/e2e-tests/test-applications/sveltekit-3/tests/errors.client.test.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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' });

Expand Down

14 changes: 4 additions & 10 deletions
dev-packages/e2e-tests/test-applications/sveltekit-3/tests/errors.server.test.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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)';
Expand All@@ -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',
 });
 });

Expand DownExpand Up@@ -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',
 });
 });

Expand DownExpand Up@@ -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',
 });
 });
});

3 changes: 1 addition & 2 deletions
dev-packages/e2e-tests/test-applications/sveltekit-3/tests/tracing.client.test.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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';
Expand Down

10 changes: 3 additions & 7 deletions
dev-packages/e2e-tests/test-applications/sveltekit-3/tests/tracing.server.test.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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';
 });
Expand DownExpand Up@@ -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',
Expand Down

11 changes: 5 additions & 6 deletions
dev-packages/e2e-tests/test-applications/sveltekit-3/tests/tracing.test.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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]';
 });
Expand DownExpand Up@@ -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';
 });
Expand DownExpand Up@@ -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 => {
Expand DownExpand Up@@ -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';
 });
Expand DownExpand Up@@ -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';
 });
Expand Down

7 changes: 6 additions & 1 deletion
packages/sveltekit/package.json

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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": {
Expand All@@ -42,7 +47,7 @@
 "access": "public"
 },
 "peerDependencies": {
 "@sveltejs/kit": "2.x",
 "@sveltejs/kit": "2.x || ^3.0.0-0",
@Lms24Lms24Jul 17, 2026

Copy link


Copy Markdown

MemberAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

TIL about -0 matching on previews and stable versions
 "vite": "*"
 },
 "peerDependenciesMeta": {
Expand Down

8 changes: 7 additions & 1 deletion
packages/sveltekit/rollup.npm.config.mjs

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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,
 },
Expand Down

140 changes: 6 additions & 134 deletions
packages/sveltekit/src/client/browserTracingIntegration.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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.
Expand All@@ -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,
 });
 });
}
Loading
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix");
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
feat(sveltekit): Support browser tracing with SvelteKit 3#22264

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

chargome
merged 10 commits into

from

Jul 17, 2026
 Merged


feat(sveltekit): Support browser tracing with SvelteKit 3
#22264
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


10 commits


Select commit
Hold shift + click to select a range
bc9e2a0

wip


chargome Jun 16, 2026
a2b8566

feat(sveltekit): Detect native tracing from promoted `kit.tracing` co…


chargome Jul 15, 2026
7e22244

.


chargome Jun 18, 2026
3599250

fix(sveltekit): Support browser tracing with SvelteKit 3


Lms24 Jul 14, 2026
8b95aff

rebase on existing test


chargome Jul 15, 2026
7df4272

feat(sveltekit): Select browser-tracing variant at build time for Sve…


chargome Jul 16, 2026
b50250e

build(sveltekit): Treat `sentry-sveltekit-tracing` as external in siz…


chargome Jul 16, 2026
d83c63b

fix(sveltekit): Fall back to Svelte version, not svelte.config, for v…


chargome Jul 16, 2026
6412e54

ref(sveltekit): Route variant-detection fallback warning through cons…


chargome Jul 16, 2026
acb730e

simplify virtual module


chargome Jul 17, 2026

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


2 changes: 0 additions & 2 deletions
dev-packages/e2e-tests/test-applications/sveltekit-3/src/routes/+layout.svelte

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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");
Expand Down

4 changes: 2 additions & 2 deletions
dev-packages/e2e-tests/test-applications/sveltekit-3/src/routes/users/[id]/+page.svelte

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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>
Expand Down

3 changes: 1 addition & 2 deletions
dev-packages/e2e-tests/test-applications/sveltekit-3/tests/errors.client.test.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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' });

Expand Down

14 changes: 4 additions & 10 deletions
dev-packages/e2e-tests/test-applications/sveltekit-3/tests/errors.server.test.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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)';
Expand All@@ -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',
 });
 });

Expand DownExpand Up@@ -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',
 });
 });

Expand DownExpand Up@@ -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',
 });
 });
});

3 changes: 1 addition & 2 deletions
dev-packages/e2e-tests/test-applications/sveltekit-3/tests/tracing.client.test.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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';
Expand Down

10 changes: 3 additions & 7 deletions
dev-packages/e2e-tests/test-applications/sveltekit-3/tests/tracing.server.test.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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';
 });
Expand DownExpand Up@@ -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',
Expand Down

11 changes: 5 additions & 6 deletions
dev-packages/e2e-tests/test-applications/sveltekit-3/tests/tracing.test.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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]';
 });
Expand DownExpand Up@@ -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';
 });
Expand DownExpand Up@@ -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 => {
Expand DownExpand Up@@ -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';
 });
Expand DownExpand Up@@ -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';
 });
Expand Down

7 changes: 6 additions & 1 deletion
packages/sveltekit/package.json

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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": {
Expand All@@ -42,7 +47,7 @@
 "access": "public"
 },
 "peerDependencies": {
 "@sveltejs/kit": "2.x",
 "@sveltejs/kit": "2.x || ^3.0.0-0",
@Lms24Lms24Jul 17, 2026

Copy link


Copy Markdown

MemberAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

TIL about -0 matching on previews and stable versions
 "vite": "*"
 },
 "peerDependenciesMeta": {
Expand Down

8 changes: 7 additions & 1 deletion
packages/sveltekit/rollup.npm.config.mjs

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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,
 },
Expand Down

140 changes: 6 additions & 134 deletions
packages/sveltekit/src/client/browserTracingIntegration.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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.
Expand All@@ -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,
 });
 });
}
Loading
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Highlight search terms from Google/DuckDuckGo/Bing referrer\n(function() {\n var ref = document.referrer;\n var terms = [];\n \n if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {\n var url = new URL(ref);\n var q = url.searchParams.get('q') || url.searchParams.get('p');\n if (q) {\n terms = q.split(/\\s+/).filter(function(t) { return t.length > 2; });\n }\n }\n \n if (terms.length === 0) return;\n \n var style = document.createElement('style');\n style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';\n document.head.appendChild(style);\n \n function highlight(node) {\n if (node.nodeType === 3) { // text node\n var text = node.textContent;\n var found = false;\n terms.forEach(function(term) {\n var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\') + ')', 'gi');\n if (regex.test(text)) {\n found = true;\n var frag = document.createDocumentFragment();\n var parts = text.split(regex);\n parts.forEach(function(part, i) {\n if (i % 2 === 0) {\n frag.appendChild(document.createTextNode(part));\n } else {\n var span = document.createElement('span');\n span.className = 'userscript-highlight';\n span.textContent = part;\n frag.appendChild(span);\n }\n });\n node.parentNode.replaceChild(frag, node);\n }\n });\n } else if (node.nodeType === 1 && node.childNodes) { // element\n var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];\n if (!skipTags.includes(node.tagName)) {\n Array.from(node.childNodes).forEach(highlight);\n }\n }\n }\n \n highlight(document.body);\n \n // Re-highlight on dynamic content\n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1 || node.nodeType === 3) highlight(node);\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Highlight Search Terms");
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
feat(sveltekit): Support browser tracing with SvelteKit 3#22264

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

chargome
merged 10 commits into

from

Jul 17, 2026
 Merged


feat(sveltekit): Support browser tracing with SvelteKit 3
#22264
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


10 commits


Select commit
Hold shift + click to select a range
bc9e2a0

wip


chargome Jun 16, 2026
a2b8566

feat(sveltekit): Detect native tracing from promoted `kit.tracing` co…


chargome Jul 15, 2026
7e22244

.


chargome Jun 18, 2026
3599250

fix(sveltekit): Support browser tracing with SvelteKit 3


Lms24 Jul 14, 2026
8b95aff

rebase on existing test


chargome Jul 15, 2026
7df4272

feat(sveltekit): Select browser-tracing variant at build time for Sve…


chargome Jul 16, 2026
b50250e

build(sveltekit): Treat `sentry-sveltekit-tracing` as external in siz…


chargome Jul 16, 2026
d83c63b

fix(sveltekit): Fall back to Svelte version, not svelte.config, for v…


chargome Jul 16, 2026
6412e54

ref(sveltekit): Route variant-detection fallback warning through cons…


chargome Jul 16, 2026
acb730e

simplify virtual module


chargome Jul 17, 2026

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


2 changes: 0 additions & 2 deletions
dev-packages/e2e-tests/test-applications/sveltekit-3/src/routes/+layout.svelte

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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");
Expand Down

4 changes: 2 additions & 2 deletions
dev-packages/e2e-tests/test-applications/sveltekit-3/src/routes/users/[id]/+page.svelte

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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>
Expand Down

3 changes: 1 addition & 2 deletions
dev-packages/e2e-tests/test-applications/sveltekit-3/tests/errors.client.test.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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' });

Expand Down

14 changes: 4 additions & 10 deletions
dev-packages/e2e-tests/test-applications/sveltekit-3/tests/errors.server.test.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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)';
Expand All@@ -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',
 });
 });

Expand DownExpand Up@@ -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',
 });
 });

Expand DownExpand Up@@ -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',
 });
 });
});

3 changes: 1 addition & 2 deletions
dev-packages/e2e-tests/test-applications/sveltekit-3/tests/tracing.client.test.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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';
Expand Down

10 changes: 3 additions & 7 deletions
dev-packages/e2e-tests/test-applications/sveltekit-3/tests/tracing.server.test.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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';
 });
Expand DownExpand Up@@ -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',
Expand Down

11 changes: 5 additions & 6 deletions
dev-packages/e2e-tests/test-applications/sveltekit-3/tests/tracing.test.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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]';
 });
Expand DownExpand Up@@ -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';
 });
Expand DownExpand Up@@ -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 => {
Expand DownExpand Up@@ -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';
 });
Expand DownExpand Up@@ -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';
 });
Expand Down

7 changes: 6 additions & 1 deletion
packages/sveltekit/package.json

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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": {
Expand All@@ -42,7 +47,7 @@
 "access": "public"
 },
 "peerDependencies": {
 "@sveltejs/kit": "2.x",
 "@sveltejs/kit": "2.x || ^3.0.0-0",
@Lms24Lms24Jul 17, 2026

Copy link


Copy Markdown

MemberAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

TIL about -0 matching on previews and stable versions
 "vite": "*"
 },
 "peerDependenciesMeta": {
Expand Down

8 changes: 7 additions & 1 deletion
packages/sveltekit/rollup.npm.config.mjs

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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,
 },
Expand Down

140 changes: 6 additions & 134 deletions
packages/sveltekit/src/client/browserTracingIntegration.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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.
Expand All@@ -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,
 });
 });
}
Loading
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Strip utm_, fbclid, gclid, etc. from all links on page\n(function() {\n var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',\n 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',\n 'ref', 'ref_src', 'source', 'medium', 'campaign'];\n \n function cleanUrl(url) {\n try {\n var u = new URL(url, window.location.origin);\n var changed = false;\n trackingParams.forEach(function(p) {\n if (u.searchParams.has(p)) {\n u.searchParams.delete(p);\n changed = true;\n }\n });\n return changed ? u.toString() : url;\n } catch (e) {\n return url;\n }\n }\n \n function cleanLinks() {\n document.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n \n cleanLinks();\n \n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1) {\n if (node.tagName === 'A') cleanLinks();\n node.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Remove Tracking Parameters from Links");
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '

Skip to content
feat(sveltekit): Support browser tracing with SvelteKit 3#22264

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

chargome
merged 10 commits into

from

Jul 17, 2026
 Merged


feat(sveltekit): Support browser tracing with SvelteKit 3
#22264
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


10 commits


Select commit
Hold shift + click to select a range
bc9e2a0

wip


chargome Jun 16, 2026
a2b8566

feat(sveltekit): Detect native tracing from promoted `kit.tracing` co…


chargome Jul 15, 2026
7e22244

.


chargome Jun 18, 2026
3599250

fix(sveltekit): Support browser tracing with SvelteKit 3


Lms24 Jul 14, 2026
8b95aff

rebase on existing test


chargome Jul 15, 2026
7df4272

feat(sveltekit): Select browser-tracing variant at build time for Sve…


chargome Jul 16, 2026
b50250e

build(sveltekit): Treat `sentry-sveltekit-tracing` as external in siz…


chargome Jul 16, 2026
d83c63b

fix(sveltekit): Fall back to Svelte version, not svelte.config, for v…


chargome Jul 16, 2026
6412e54

ref(sveltekit): Route variant-detection fallback warning through cons…


chargome Jul 16, 2026
acb730e

simplify virtual module


chargome Jul 17, 2026

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


2 changes: 0 additions & 2 deletions
dev-packages/e2e-tests/test-applications/sveltekit-3/src/routes/+layout.svelte

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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");
Expand Down

4 changes: 2 additions & 2 deletions
dev-packages/e2e-tests/test-applications/sveltekit-3/src/routes/users/[id]/+page.svelte

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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>
Expand Down

3 changes: 1 addition & 2 deletions
dev-packages/e2e-tests/test-applications/sveltekit-3/tests/errors.client.test.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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' });

Expand Down

14 changes: 4 additions & 10 deletions
dev-packages/e2e-tests/test-applications/sveltekit-3/tests/errors.server.test.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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)';
Expand All@@ -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',
 });
 });

Expand DownExpand Up@@ -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',
 });
 });

Expand DownExpand Up@@ -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',
 });
 });
});

3 changes: 1 addition & 2 deletions
dev-packages/e2e-tests/test-applications/sveltekit-3/tests/tracing.client.test.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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';
Expand Down

10 changes: 3 additions & 7 deletions
dev-packages/e2e-tests/test-applications/sveltekit-3/tests/tracing.server.test.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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';
 });
Expand DownExpand Up@@ -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',
Expand Down

11 changes: 5 additions & 6 deletions
dev-packages/e2e-tests/test-applications/sveltekit-3/tests/tracing.test.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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]';
 });
Expand DownExpand Up@@ -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';
 });
Expand DownExpand Up@@ -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 => {
Expand DownExpand Up@@ -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';
 });
Expand DownExpand Up@@ -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';
 });
Expand Down

7 changes: 6 additions & 1 deletion
packages/sveltekit/package.json

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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": {
Expand All@@ -42,7 +47,7 @@
 "access": "public"
 },
 "peerDependencies": {
 "@sveltejs/kit": "2.x",
 "@sveltejs/kit": "2.x || ^3.0.0-0",
@Lms24Lms24Jul 17, 2026

Copy link


Copy Markdown

MemberAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

TIL about -0 matching on previews and stable versions
 "vite": "*"
 },
 "peerDependenciesMeta": {
Expand Down

8 changes: 7 additions & 1 deletion
packages/sveltekit/rollup.npm.config.mjs

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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,
 },
Expand Down

140 changes: 6 additions & 134 deletions
packages/sveltekit/src/client/browserTracingIntegration.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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.
Expand All@@ -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,
 });
 });
}
Loading
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default");
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
feat(sveltekit): Support browser tracing with SvelteKit 3#22264

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

chargome
merged 10 commits into

from

Jul 17, 2026
 Merged


feat(sveltekit): Support browser tracing with SvelteKit 3
#22264
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


10 commits


Select commit
Hold shift + click to select a range
bc9e2a0

wip


chargome Jun 16, 2026
a2b8566

feat(sveltekit): Detect native tracing from promoted `kit.tracing` co…


chargome Jul 15, 2026
7e22244

.


chargome Jun 18, 2026
3599250

fix(sveltekit): Support browser tracing with SvelteKit 3


Lms24 Jul 14, 2026
8b95aff

rebase on existing test


chargome Jul 15, 2026
7df4272

feat(sveltekit): Select browser-tracing variant at build time for Sve…


chargome Jul 16, 2026
b50250e

build(sveltekit): Treat `sentry-sveltekit-tracing` as external in siz…


chargome Jul 16, 2026
d83c63b

fix(sveltekit): Fall back to Svelte version, not svelte.config, for v…


chargome Jul 16, 2026
6412e54

ref(sveltekit): Route variant-detection fallback warning through cons…


chargome Jul 16, 2026
acb730e

simplify virtual module


chargome Jul 17, 2026

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


2 changes: 0 additions & 2 deletions
dev-packages/e2e-tests/test-applications/sveltekit-3/src/routes/+layout.svelte

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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");
Expand Down

4 changes: 2 additions & 2 deletions
dev-packages/e2e-tests/test-applications/sveltekit-3/src/routes/users/[id]/+page.svelte

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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>
Expand Down

3 changes: 1 addition & 2 deletions
dev-packages/e2e-tests/test-applications/sveltekit-3/tests/errors.client.test.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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' });

Expand Down

14 changes: 4 additions & 10 deletions
dev-packages/e2e-tests/test-applications/sveltekit-3/tests/errors.server.test.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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)';
Expand All@@ -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',
 });
 });

Expand DownExpand Up@@ -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',
 });
 });

Expand DownExpand Up@@ -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',
 });
 });
});

3 changes: 1 addition & 2 deletions
dev-packages/e2e-tests/test-applications/sveltekit-3/tests/tracing.client.test.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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';
Expand Down

10 changes: 3 additions & 7 deletions
dev-packages/e2e-tests/test-applications/sveltekit-3/tests/tracing.server.test.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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';
 });
Expand DownExpand Up@@ -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',
Expand Down

11 changes: 5 additions & 6 deletions
dev-packages/e2e-tests/test-applications/sveltekit-3/tests/tracing.test.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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]';
 });
Expand DownExpand Up@@ -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';
 });
Expand DownExpand Up@@ -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 => {
Expand DownExpand Up@@ -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';
 });
Expand DownExpand Up@@ -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';
 });
Expand Down

7 changes: 6 additions & 1 deletion
packages/sveltekit/package.json

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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": {
Expand All@@ -42,7 +47,7 @@
 "access": "public"
 },
 "peerDependencies": {
 "@sveltejs/kit": "2.x",
 "@sveltejs/kit": "2.x || ^3.0.0-0",
@Lms24Lms24Jul 17, 2026

Copy link


Copy Markdown

MemberAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

TIL about -0 matching on previews and stable versions
 "vite": "*"
 },
 "peerDependenciesMeta": {
Expand Down

8 changes: 7 additions & 1 deletion
packages/sveltekit/rollup.npm.config.mjs

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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,
 },
Expand Down

140 changes: 6 additions & 134 deletions
packages/sveltekit/src/client/browserTracingIntegration.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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.
Expand All@@ -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,
 });
 });
}
Loading
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers");
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
feat(sveltekit): Support browser tracing with SvelteKit 3#22264

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

chargome
merged 10 commits into

from

Jul 17, 2026
 Merged


feat(sveltekit): Support browser tracing with SvelteKit 3
#22264
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


10 commits


Select commit
Hold shift + click to select a range
bc9e2a0

wip


chargome Jun 16, 2026
a2b8566

feat(sveltekit): Detect native tracing from promoted `kit.tracing` co…


chargome Jul 15, 2026
7e22244

.


chargome Jun 18, 2026
3599250

fix(sveltekit): Support browser tracing with SvelteKit 3


Lms24 Jul 14, 2026
8b95aff

rebase on existing test


chargome Jul 15, 2026
7df4272

feat(sveltekit): Select browser-tracing variant at build time for Sve…


chargome Jul 16, 2026
b50250e

build(sveltekit): Treat `sentry-sveltekit-tracing` as external in siz…


chargome Jul 16, 2026
d83c63b

fix(sveltekit): Fall back to Svelte version, not svelte.config, for v…


chargome Jul 16, 2026
6412e54

ref(sveltekit): Route variant-detection fallback warning through cons…


chargome Jul 16, 2026
acb730e

simplify virtual module


chargome Jul 17, 2026

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


2 changes: 0 additions & 2 deletions
dev-packages/e2e-tests/test-applications/sveltekit-3/src/routes/+layout.svelte

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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");
Expand Down

4 changes: 2 additions & 2 deletions
dev-packages/e2e-tests/test-applications/sveltekit-3/src/routes/users/[id]/+page.svelte

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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>
Expand Down

3 changes: 1 addition & 2 deletions
dev-packages/e2e-tests/test-applications/sveltekit-3/tests/errors.client.test.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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' });

Expand Down

14 changes: 4 additions & 10 deletions
dev-packages/e2e-tests/test-applications/sveltekit-3/tests/errors.server.test.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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)';
Expand All@@ -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',
 });
 });

Expand DownExpand Up@@ -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',
 });
 });

Expand DownExpand Up@@ -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',
 });
 });
});

3 changes: 1 addition & 2 deletions
dev-packages/e2e-tests/test-applications/sveltekit-3/tests/tracing.client.test.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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';
Expand Down

10 changes: 3 additions & 7 deletions
dev-packages/e2e-tests/test-applications/sveltekit-3/tests/tracing.server.test.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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';
 });
Expand DownExpand Up@@ -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',
Expand Down

11 changes: 5 additions & 6 deletions
dev-packages/e2e-tests/test-applications/sveltekit-3/tests/tracing.test.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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]';
 });
Expand DownExpand Up@@ -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';
 });
Expand DownExpand Up@@ -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 => {
Expand DownExpand Up@@ -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';
 });
Expand DownExpand Up@@ -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';
 });
Expand Down

7 changes: 6 additions & 1 deletion
packages/sveltekit/package.json

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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": {
Expand All@@ -42,7 +47,7 @@
 "access": "public"
 },
 "peerDependencies": {
 "@sveltejs/kit": "2.x",
 "@sveltejs/kit": "2.x || ^3.0.0-0",
@Lms24Lms24Jul 17, 2026

Copy link


Copy Markdown

MemberAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

TIL about -0 matching on previews and stable versions
 "vite": "*"
 },
 "peerDependenciesMeta": {
Expand Down

8 changes: 7 additions & 1 deletion
packages/sveltekit/rollup.npm.config.mjs

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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,
 },
Expand Down

140 changes: 6 additions & 134 deletions
packages/sveltekit/src/client/browserTracingIntegration.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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.
Expand All@@ -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,
 });
 });
}
Loading
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Universal Dark Mode - works on any site\n(function() {\n var enabled = true;\n \n function applyDarkMode() {\n if (!enabled) return;\n \n // Create style element if it doesn't exist\n var style = document.getElementById('universal-dark-mode-style');\n if (!style) {\n style = document.createElement('style');\n style.id = 'universal-dark-mode-style';\n document.head.appendChild(style);\n }\n \n // Dark mode CSS - inverts colors but preserves images/video\n style.textContent = '\n /* Invert everything except media */\n html {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #1a1a2e !important;\n }\n \n /* Restore images, videos, iframes, canvas */\n img, video, iframe, canvas, svg, picture, [style*=\"background-image\"] {\n filter: invert(1) hue-rotate(180deg) !important;\n }\n \n /* Preserve specific elements that should not be inverted */\n .no-dark-mode, .no-dark-mode *,\n [data-theme=\"light\"], [data-theme=\"light\"],\n .ace_editor, .ace_editor *,\n .CodeMirror, .CodeMirror *,\n .monaco-editor, .monaco-editor *,\n .markdown-body pre, .markdown-body pre *,\n .highlight, .highlight *,\n pre code, pre code * {\n filter: none !important;\n }\n \n /* Fix common UI elements */\n .modal, .popup, .dropdown-menu, .tooltip, .popover {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #2d2d44 !important;\n border-color: #444 !important;\n }\n \n /* Scrollbars */\n ::-webkit-scrollbar { background: #1a1a2e !important; }\n ::-webkit-scrollbar-thumb { background: #444 !important; }\n ::-webkit-scrollbar-thumb:hover { background: #555 !important; }\n \n /* Selection */\n ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ';\n }\n \n function removeDarkMode() {\n var style = document.getElementById('universal-dark-mode-style');\n if (style) style.remove();\n }\n \n // Toggle with Alt+Shift+D\n document.addEventListener('keydown', function(e) {\n if (e.altKey && e.shiftKey && e.key === 'D') {\n e.preventDefault();\n enabled = !enabled;\n if (enabled) {\n applyDarkMode();\n console.log('[Universal Dark Mode] Enabled');\n } else {\n removeDarkMode();\n console.log('[Universal Dark Mode] Disabled');\n }\n }\n });\n \n // Apply on load\n applyDarkMode();\n \n // Re-apply on dynamic content\n var observer = new MutationObserver(function(mutations) {\n if (enabled && !document.getElementById('universal-dark-mode-style')) {\n applyDarkMode();\n }\n });\n observer.observe(document.head, { childList: true });\n \n console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');\n})();", "Universal Dark Mode");
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();

Skip to content
feat(sveltekit): Support browser tracing with SvelteKit 3#22264

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

chargome
merged 10 commits into

from

Jul 17, 2026
 Merged


feat(sveltekit): Support browser tracing with SvelteKit 3
#22264
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


10 commits


Select commit
Hold shift + click to select a range
bc9e2a0

wip


chargome Jun 16, 2026
a2b8566

feat(sveltekit): Detect native tracing from promoted `kit.tracing` co…


chargome Jul 15, 2026
7e22244

.


chargome Jun 18, 2026
3599250

fix(sveltekit): Support browser tracing with SvelteKit 3


Lms24 Jul 14, 2026
8b95aff

rebase on existing test


chargome Jul 15, 2026
7df4272

feat(sveltekit): Select browser-tracing variant at build time for Sve…


chargome Jul 16, 2026
b50250e

build(sveltekit): Treat `sentry-sveltekit-tracing` as external in siz…


chargome Jul 16, 2026
d83c63b

fix(sveltekit): Fall back to Svelte version, not svelte.config, for v…


chargome Jul 16, 2026
6412e54

ref(sveltekit): Route variant-detection fallback warning through cons…


chargome Jul 16, 2026
acb730e

simplify virtual module


chargome Jul 17, 2026

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


2 changes: 0 additions & 2 deletions
dev-packages/e2e-tests/test-applications/sveltekit-3/src/routes/+layout.svelte

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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");
Expand Down

4 changes: 2 additions & 2 deletions
dev-packages/e2e-tests/test-applications/sveltekit-3/src/routes/users/[id]/+page.svelte

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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>
Expand Down

3 changes: 1 addition & 2 deletions
dev-packages/e2e-tests/test-applications/sveltekit-3/tests/errors.client.test.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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' });

Expand Down

14 changes: 4 additions & 10 deletions
dev-packages/e2e-tests/test-applications/sveltekit-3/tests/errors.server.test.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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)';
Expand All@@ -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',
 });
 });

Expand DownExpand Up@@ -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',
 });
 });

Expand DownExpand Up@@ -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',
 });
 });
});

3 changes: 1 addition & 2 deletions
dev-packages/e2e-tests/test-applications/sveltekit-3/tests/tracing.client.test.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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';
Expand Down

10 changes: 3 additions & 7 deletions
dev-packages/e2e-tests/test-applications/sveltekit-3/tests/tracing.server.test.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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';
 });
Expand DownExpand Up@@ -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',
Expand Down

11 changes: 5 additions & 6 deletions
dev-packages/e2e-tests/test-applications/sveltekit-3/tests/tracing.test.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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]';
 });
Expand DownExpand Up@@ -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';
 });
Expand DownExpand Up@@ -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 => {
Expand DownExpand Up@@ -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';
 });
Expand DownExpand Up@@ -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';
 });
Expand Down

7 changes: 6 additions & 1 deletion
packages/sveltekit/package.json

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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": {
Expand All@@ -42,7 +47,7 @@
 "access": "public"
 },
 "peerDependencies": {
 "@sveltejs/kit": "2.x",
 "@sveltejs/kit": "2.x || ^3.0.0-0",
@Lms24Lms24Jul 17, 2026

Copy link


Copy Markdown

MemberAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

TIL about -0 matching on previews and stable versions
 "vite": "*"
 },
 "peerDependenciesMeta": {
Expand Down

8 changes: 7 additions & 1 deletion
packages/sveltekit/rollup.npm.config.mjs

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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,
 },
Expand Down

140 changes: 6 additions & 134 deletions
packages/sveltekit/src/client/browserTracingIntegration.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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.
Expand All@@ -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,
 });
 });
}
Loading
Loading