feat(sveltekit): Add Compatibility for builtin SvelteKit Tracing#17423

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
Lms24 merged 16 commits into from
Aug 27, 2025
Merged

feat(sveltekit): Add Compatibility for builtin SvelteKit Tracing #17423

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
3993737
ref(sveltekit): Handle SvelteKit-generated spans in `sentryHandle`
Lms24 Aug 14, 2025
371fe0c
simplify
Lms24 Aug 14, 2025
9c7f66d
2.31.0
Lms24 Aug 15, 2025
bb028e1
process kit spans
Lms24 Aug 18, 2025
ea95125
wip but detect tracing config at SDK setup time
Lms24 Aug 19, 2025
c389a1f
comment
Lms24 Aug 20, 2025
e728084
global values injection plugin, add tests, adjust existing tests
Lms24 Aug 26, 2025
72cc4a9
don't auto-wrap load functions if kit-tracing is enabled
Lms24 Aug 26, 2025
529d718
add e2e test app with kit-tracing enabled
Lms24 Aug 26, 2025
b70134b
fix span name, origin inconsistencies
Lms24 Aug 26, 2025
927cbf6
lint and remove remote function test
Lms24 Aug 26, 2025
eebd5cc
remove tracing config runtime check, cleanup, move some files
Lms24 Aug 27, 2025
05091f5
lint
Lms24 Aug 27, 2025
cd9c441
fix failing unit test
Lms24 Aug 27, 2025
d265348
improve tracing check, optimize svelteKitSpansIntegration
Lms24 Aug 27, 2025
87c4109
review suggestions, comments, revert kitSpansIntegrations optimizatio…
Lms24 Aug 27, 2025
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
15 changes: 15 additions & 0 deletions dev-packages/e2e-tests/test-applications/sveltekit-2-kit-tracing/.gitignore
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
.DS_Store
node_modules
/build
/.svelte-kit
/package
.env
.env.*
!.env.example
vite.config.js.timestamp-*
vite.config.ts.timestamp-*

#temporarily excluding my remote function routes. To be removed with the next PR:
./src/routes/remote-functions/data.remote.ts
./src/routes/remote-functions/+page.svelte
./tests/tracing.remote-functions.ts
2 changes: 2 additions & 0 deletions dev-packages/e2e-tests/test-applications/sveltekit-2-kit-tracing/.npmrc
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
@sentry:registry=http://127.0.0.1:4873
@sentry-internal:registry=http://127.0.0.1:4873
41 changes: 41 additions & 0 deletions dev-packages/e2e-tests/test-applications/sveltekit-2-kit-tracing/README.md
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
# create-svelte

Everything you need to build a Svelte project, powered by
[`create-svelte`](https://github.com/sveltejs/kit/tree/main/packages/create-svelte).

## Creating a project

If you're seeing this, you've probably already done this step. Congrats!

```bash
# create a new project in the current directory
npm create svelte@latest

# create a new project in my-app
npm create svelte@latest my-app
```

## Developing

Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a
development server:

```bash
npm run dev

# or start the server and open the app in a new browser tab
npm run dev -- --open
```

## Building

To create a production version of your app:

```bash
npm run build
```

You can preview the production build with `npm run preview`.

> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target
> environment.
37 changes: 37 additions & 0 deletions dev-packages/e2e-tests/test-applications/sveltekit-2-kit-tracing/package.json
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
{
"name": "sveltekit-2-kit-tracing",
"version": "0.0.1",
"private": true,
"scripts": {
"dev": "vite dev",
"build": "vite build",
"preview": "vite preview",
"proxy": "node start-event-proxy.mjs",
"clean": "npx rimraf node_modules pnpm-lock.yaml",
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
"test:prod": "TEST_ENV=production playwright test",
"test:build": "pnpm install && pnpm build",
"test:assert": "pnpm test:prod"
},
"dependencies": {
"@sentry/sveltekit": "latest || *",
"@spotlightjs/spotlight": "2.0.0-alpha.1"
},
"devDependencies": {
"@playwright/test": "~1.53.2",
"@sentry-internal/test-utils": "link:../../../test-utils",
"@sveltejs/adapter-node": "^5.3.1",
"@sveltejs/kit": "^2.31.0",
"@sveltejs/vite-plugin-svelte": "^6.1.3",
"svelte": "^5.38.3",
"svelte-check": "^4.3.1",
"tslib": "^2.4.1",
"typescript": "^5.0.0",
"vite": "^7.1.3"
},
"type": "module",
"volta": {
"extends": "../../package.json"
}
}
8 changes: 8 additions & 0 deletions dev-packages/e2e-tests/test-applications/sveltekit-2-kit-tracing/playwright.config.mjs
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
import { getPlaywrightConfig } from '@sentry-internal/test-utils';

const config = getPlaywrightConfig({
startCommand: 'ORIGIN=http://localhost:3030 node ./build/index.js',
port: 3030,
});

export default config;
13 changes: 13 additions & 0 deletions dev-packages/e2e-tests/test-applications/sveltekit-2-kit-tracing/src/app.d.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
// See https://kit.svelte.dev/docs/types#app
// for information about these interfaces
declare global {
namespace App {
// interface Error {}
// interface Locals {}
// interface PageData {}
// interface PageState {}
// interface Platform {}
}
}

export {};
12 changes: 12 additions & 0 deletions dev-packages/e2e-tests/test-applications/sveltekit-2-kit-tracing/src/app.html
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
%sveltekit.head%
</head>
<body data-sveltekit-preload-data="hover">
<div style="display: contents">%sveltekit.body%</div>
</body>
</html>
23 changes: 23 additions & 0 deletions dev-packages/e2e-tests/test-applications/sveltekit-2-kit-tracing/src/hooks.client.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
import { env } from '$env/dynamic/public';
import * as Sentry from '@sentry/sveltekit';
import * as Spotlight from '@spotlightjs/spotlight';

Sentry.init({
environment: 'qa', // dynamic sampling bias to keep transactions
dsn: env.PUBLIC_E2E_TEST_DSN,
debug: !!env.PUBLIC_DEBUG,
tunnel: `http://localhost:3031/`, // proxy server
tracesSampleRate: 1.0,
});

const myErrorHandler = ({ error, event }: any) => {
console.error('An error occurred on the client side:', error, event);
};

export const handleError = Sentry.handleErrorWithSentry(myErrorHandler);

if (import.meta.env.DEV) {
Spotlight.init({
injectImmediately: true,
});
}
12 changes: 12 additions & 0 deletions dev-packages/e2e-tests/test-applications/sveltekit-2-kit-tracing/src/hooks.server.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
import * as Sentry from '@sentry/sveltekit';
import { setupSidecar } from '@spotlightjs/spotlight/sidecar';
import { sequence } from '@sveltejs/kit/hooks';

// not logging anything to console to avoid noise in the test output
export const handleError = Sentry.handleErrorWithSentry(() => {});

export const handle = sequence(Sentry.sentryHandle());

if (import.meta.env.DEV) {
setupSidecar();
}
11 changes: 11 additions & 0 deletions ...ackages/e2e-tests/test-applications/sveltekit-2-kit-tracing/src/instrumentation.server.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
import * as Sentry from '@sentry/sveltekit';
import { E2E_TEST_DSN } from '$env/static/private';

Sentry.init({
environment: 'qa', // dynamic sampling bias to keep transactions
dsn: E2E_TEST_DSN,
debug: !!process.env.DEBUG,
tunnel: `http://localhost:3031/`, // proxy server
tracesSampleRate: 1.0,
spotlight: import.meta.env.DEV,
});
15 changes: 15 additions & 0 deletions dev-packages/e2e-tests/test-applications/sveltekit-2-kit-tracing/src/routes/+layout.svelte
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
<script lang="ts">
import { onMount } from "svelte";

onMount(() => {
// Indicate that the SvelteKit app was hydrated
document.body.classList.add("hydrated");
});


</script>

<h1>Sveltekit E2E Test app</h1>
<div data-sveltekit-preload-data="off">
<slot></slot>
</div>
47 changes: 47 additions & 0 deletions dev-packages/e2e-tests/test-applications/sveltekit-2-kit-tracing/src/routes/+page.svelte
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
<h1>Welcome to SvelteKit 2 with Svelte 5!</h1>
<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>

<ul>
<li>
<a href="/client-error">Client error</a>
</li>
<li>
<a href="/universal-load-error">Universal Load error</a>
</li>
<li>
<a href="/server-load-error">Server Load error</a>
</li>
<li>
<a href="/server-route-error">Server Route error</a>
</li>
<li>
<a id="routeWithParamsLink" href="/users/123abc">Route with Params</a>
</li>
<li>
<a href="/users">Route with Server Load</a>
</li>
<li>
<a href="/universal-load-fetch">Route with fetch in universal load</a>
</li>
<li>
<a id="redirectLink" href="/redirect1">Redirect</a>
</li>
<li>
<a href="/server-load-fetch">Route with nested fetch in server load</a>
</li>
<li>
<a href="/nav1">Nav 1</a>
</li>
<li>
<a href="/nav2">Nav 2</a>
</li>
<li>
<a href="components">Component Tracking</a>
</li>
<li>
<a href="/form-action">Form Action</a>
</li>
<li>
<a href="/remote-functions">Remote Functions</a>
</li>
</ul>
3 changes: 3 additions & 0 deletions ...kages/e2e-tests/test-applications/sveltekit-2-kit-tracing/src/routes/api/users/+server.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
export const GET = () => {
return new Response(JSON.stringify({ users: ['alice', 'bob', 'carol'] }));
};
5 changes: 5 additions & 0 deletions ...s/e2e-tests/test-applications/sveltekit-2-kit-tracing/src/routes/building/+page.server.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
import type { PageServerLoad } from './$types';

export const load = (async _event => {
return { name: 'building (server)' };
}) satisfies PageServerLoad;
21 changes: 21 additions & 0 deletions ...ages/e2e-tests/test-applications/sveltekit-2-kit-tracing/src/routes/building/+page.svelte
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
<script lang="ts">
import * as Sentry from '@sentry/sveltekit';

async function getSentryData() {
Sentry.startSpan({
name: 'Example Frontend Span',
}, async () => {
const res = await fetch('/sentry-example');
if (!res.ok) {
throw new Error('Sentry Example Frontend Error');
}
})
}
</script>

<h1>Check Build</h1>

<p>
This route only exists to check that Typescript definitions
and auto instrumentation are working when the project is built.
</p>
5 changes: 5 additions & 0 deletions ...packages/e2e-tests/test-applications/sveltekit-2-kit-tracing/src/routes/building/+page.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
import type { PageLoad } from './$types';

export const load = (async _event => {
return { name: 'building' };
}) satisfies PageLoad;
9 changes: 9 additions & 0 deletions .../e2e-tests/test-applications/sveltekit-2-kit-tracing/src/routes/client-error/+page.svelte
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
<script lang="ts">
function throwError() {
throw new Error('Click Error');
}
</script>

<h1>Client error</h1>

<button on:click={throwError}>Throw error</button>
15 changes: 15 additions & 0 deletions ...es/e2e-tests/test-applications/sveltekit-2-kit-tracing/src/routes/components/+page.svelte
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
<script>
import * as Sentry from '@sentry/sveltekit';

import Component1 from "./Component1.svelte";
import Component2 from "./Component2.svelte";
import Component3 from "./Component3.svelte";

Sentry.trackComponent({componentName: 'components/+page'})

</script>
<h2>Demonstrating Component Tracking</h2>

<Component1></Component1>
<Component2></Component2>
<Component3></Component3>
10 changes: 10 additions & 0 deletions ...e-tests/test-applications/sveltekit-2-kit-tracing/src/routes/components/Component1.svelte
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
<script>
import Component2 from "./Component2.svelte";
import {trackComponent} from '@sentry/sveltekit';

trackComponent({componentName: 'Component1'});

</script>
<h3>Howdy, I'm component 1</h3>

<Component2></Component2>
9 changes: 9 additions & 0 deletions ...e-tests/test-applications/sveltekit-2-kit-tracing/src/routes/components/Component2.svelte
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
<script>
import Component3 from "./Component3.svelte";
import {trackComponent} from '@sentry/sveltekit';

trackComponent({componentName: 'Component2'});
</script>
<h3>Howdy, I'm component 2</h3>

<Component3></Component3>
6 changes: 6 additions & 0 deletions ...e-tests/test-applications/sveltekit-2-kit-tracing/src/routes/components/Component3.svelte
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
<script lang="ts">
import * as Sentry from '@sentry/sveltekit';
Sentry.trackComponent({componentName: 'Component3'});
</script>

<h3>Howdy, I'm component 3</h3>
7 changes: 7 additions & 0 deletions ...2e-tests/test-applications/sveltekit-2-kit-tracing/src/routes/form-action/+page.server.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
export const actions = {
default: async ({ request }) => {
const formData = await request.formData();
const name = formData.get('name');
return { name };
},
};
15 changes: 15 additions & 0 deletions ...s/e2e-tests/test-applications/sveltekit-2-kit-tracing/src/routes/form-action/+page.svelte
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
<script>
import { enhance } from '$app/forms';

const { data, form } = $props();
</script>

<form method="post" use:enhance>
<label for="name">Name:</label>
<input id="inputName" type="text" name="name" />
<button id="buttonSubmit" type="submit">Submit</button>
</form>

{#if form?.name}
<p>Hello {form.name}</p>
{/if}
1 change: 1 addition & 0 deletions ...packages/e2e-tests/test-applications/sveltekit-2-kit-tracing/src/routes/nav1/+page.svelte
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
<h1>Navigation 1</h1>
1 change: 1 addition & 0 deletions ...packages/e2e-tests/test-applications/sveltekit-2-kit-tracing/src/routes/nav2/+page.svelte
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
<h1>Navigation 2</h1>
5 changes: 5 additions & 0 deletions ...ackages/e2e-tests/test-applications/sveltekit-2-kit-tracing/src/routes/redirect1/+page.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
import { redirect } from '@sveltejs/kit';

export const load = async () => {
redirect(301, '/redirect2');
};
5 changes: 5 additions & 0 deletions ...ackages/e2e-tests/test-applications/sveltekit-2-kit-tracing/src/routes/redirect2/+page.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
import { redirect } from '@sveltejs/kit';

export const load = async () => {
redirect(301, '/users/789');
};
6 changes: 6 additions & 0 deletions ...ts/test-applications/sveltekit-2-kit-tracing/src/routes/server-load-error/+page.server.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
export const load = async () => {
throw new Error('Server Load Error');
return {
msg: 'Hello World',
};
};
9 changes: 9 additions & 0 deletions ...tests/test-applications/sveltekit-2-kit-tracing/src/routes/server-load-error/+page.svelte
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
<script lang="ts">
export let data
</script>

<h1>Server load error</h1>

<p>
Message: {data.msg}
</p>
Loading
Loading
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all \u003cpre\u003e\u003ccode\u003e 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): Add Compatibility for builtin SvelteKit Tracing#17423

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
Lms24 merged 16 commits into from
Aug 27, 2025
Merged

feat(sveltekit): Add Compatibility for builtin SvelteKit Tracing #17423

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
3993737
ref(sveltekit): Handle SvelteKit-generated spans in `sentryHandle`
Lms24 Aug 14, 2025
371fe0c
simplify
Lms24 Aug 14, 2025
9c7f66d
2.31.0
Lms24 Aug 15, 2025
bb028e1
process kit spans
Lms24 Aug 18, 2025
ea95125
wip but detect tracing config at SDK setup time
Lms24 Aug 19, 2025
c389a1f
comment
Lms24 Aug 20, 2025
e728084
global values injection plugin, add tests, adjust existing tests
Lms24 Aug 26, 2025
72cc4a9
don't auto-wrap load functions if kit-tracing is enabled
Lms24 Aug 26, 2025
529d718
add e2e test app with kit-tracing enabled
Lms24 Aug 26, 2025
b70134b
fix span name, origin inconsistencies
Lms24 Aug 26, 2025
927cbf6
lint and remove remote function test
Lms24 Aug 26, 2025
eebd5cc
remove tracing config runtime check, cleanup, move some files
Lms24 Aug 27, 2025
05091f5
lint
Lms24 Aug 27, 2025
cd9c441
fix failing unit test
Lms24 Aug 27, 2025
d265348
improve tracing check, optimize svelteKitSpansIntegration
Lms24 Aug 27, 2025
87c4109
review suggestions, comments, revert kitSpansIntegrations optimizatio…
Lms24 Aug 27, 2025
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
15 changes: 15 additions & 0 deletions dev-packages/e2e-tests/test-applications/sveltekit-2-kit-tracing/.gitignore
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
.DS_Store
node_modules
/build
/.svelte-kit
/package
.env
.env.*
!.env.example
vite.config.js.timestamp-*
vite.config.ts.timestamp-*

#temporarily excluding my remote function routes. To be removed with the next PR:
./src/routes/remote-functions/data.remote.ts
./src/routes/remote-functions/+page.svelte
./tests/tracing.remote-functions.ts
2 changes: 2 additions & 0 deletions dev-packages/e2e-tests/test-applications/sveltekit-2-kit-tracing/.npmrc
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
@sentry:registry=http://127.0.0.1:4873
@sentry-internal:registry=http://127.0.0.1:4873
41 changes: 41 additions & 0 deletions dev-packages/e2e-tests/test-applications/sveltekit-2-kit-tracing/README.md
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
# create-svelte

Everything you need to build a Svelte project, powered by
[`create-svelte`](https://github.com/sveltejs/kit/tree/main/packages/create-svelte).

## Creating a project

If you're seeing this, you've probably already done this step. Congrats!

```bash
# create a new project in the current directory
npm create svelte@latest

# create a new project in my-app
npm create svelte@latest my-app
```

## Developing

Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a
development server:

```bash
npm run dev

# or start the server and open the app in a new browser tab
npm run dev -- --open
```

## Building

To create a production version of your app:

```bash
npm run build
```

You can preview the production build with `npm run preview`.

> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target
> environment.
37 changes: 37 additions & 0 deletions dev-packages/e2e-tests/test-applications/sveltekit-2-kit-tracing/package.json
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
{
"name": "sveltekit-2-kit-tracing",
"version": "0.0.1",
"private": true,
"scripts": {
"dev": "vite dev",
"build": "vite build",
"preview": "vite preview",
"proxy": "node start-event-proxy.mjs",
"clean": "npx rimraf node_modules pnpm-lock.yaml",
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
"test:prod": "TEST_ENV=production playwright test",
"test:build": "pnpm install && pnpm build",
"test:assert": "pnpm test:prod"
},
"dependencies": {
"@sentry/sveltekit": "latest || *",
"@spotlightjs/spotlight": "2.0.0-alpha.1"
},
"devDependencies": {
"@playwright/test": "~1.53.2",
"@sentry-internal/test-utils": "link:../../../test-utils",
"@sveltejs/adapter-node": "^5.3.1",
"@sveltejs/kit": "^2.31.0",
"@sveltejs/vite-plugin-svelte": "^6.1.3",
"svelte": "^5.38.3",
"svelte-check": "^4.3.1",
"tslib": "^2.4.1",
"typescript": "^5.0.0",
"vite": "^7.1.3"
},
"type": "module",
"volta": {
"extends": "../../package.json"
}
}
8 changes: 8 additions & 0 deletions dev-packages/e2e-tests/test-applications/sveltekit-2-kit-tracing/playwright.config.mjs
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
import { getPlaywrightConfig } from '@sentry-internal/test-utils';

const config = getPlaywrightConfig({
startCommand: 'ORIGIN=http://localhost:3030 node ./build/index.js',
port: 3030,
});

export default config;
13 changes: 13 additions & 0 deletions dev-packages/e2e-tests/test-applications/sveltekit-2-kit-tracing/src/app.d.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
// See https://kit.svelte.dev/docs/types#app
// for information about these interfaces
declare global {
namespace App {
// interface Error {}
// interface Locals {}
// interface PageData {}
// interface PageState {}
// interface Platform {}
}
}

export {};
12 changes: 12 additions & 0 deletions dev-packages/e2e-tests/test-applications/sveltekit-2-kit-tracing/src/app.html
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
%sveltekit.head%
</head>
<body data-sveltekit-preload-data="hover">
<div style="display: contents">%sveltekit.body%</div>
</body>
</html>
23 changes: 23 additions & 0 deletions dev-packages/e2e-tests/test-applications/sveltekit-2-kit-tracing/src/hooks.client.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
import { env } from '$env/dynamic/public';
import * as Sentry from '@sentry/sveltekit';
import * as Spotlight from '@spotlightjs/spotlight';

Sentry.init({
environment: 'qa', // dynamic sampling bias to keep transactions
dsn: env.PUBLIC_E2E_TEST_DSN,
debug: !!env.PUBLIC_DEBUG,
tunnel: `http://localhost:3031/`, // proxy server
tracesSampleRate: 1.0,
});

const myErrorHandler = ({ error, event }: any) => {
console.error('An error occurred on the client side:', error, event);
};

export const handleError = Sentry.handleErrorWithSentry(myErrorHandler);

if (import.meta.env.DEV) {
Spotlight.init({
injectImmediately: true,
});
}
12 changes: 12 additions & 0 deletions dev-packages/e2e-tests/test-applications/sveltekit-2-kit-tracing/src/hooks.server.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
import * as Sentry from '@sentry/sveltekit';
import { setupSidecar } from '@spotlightjs/spotlight/sidecar';
import { sequence } from '@sveltejs/kit/hooks';

// not logging anything to console to avoid noise in the test output
export const handleError = Sentry.handleErrorWithSentry(() => {});

export const handle = sequence(Sentry.sentryHandle());

if (import.meta.env.DEV) {
setupSidecar();
}
11 changes: 11 additions & 0 deletions ...ackages/e2e-tests/test-applications/sveltekit-2-kit-tracing/src/instrumentation.server.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
import * as Sentry from '@sentry/sveltekit';
import { E2E_TEST_DSN } from '$env/static/private';

Sentry.init({
environment: 'qa', // dynamic sampling bias to keep transactions
dsn: E2E_TEST_DSN,
debug: !!process.env.DEBUG,
tunnel: `http://localhost:3031/`, // proxy server
tracesSampleRate: 1.0,
spotlight: import.meta.env.DEV,
});
15 changes: 15 additions & 0 deletions dev-packages/e2e-tests/test-applications/sveltekit-2-kit-tracing/src/routes/+layout.svelte
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
<script lang="ts">
import { onMount } from "svelte";

onMount(() => {
// Indicate that the SvelteKit app was hydrated
document.body.classList.add("hydrated");
});


</script>

<h1>Sveltekit E2E Test app</h1>
<div data-sveltekit-preload-data="off">
<slot></slot>
</div>
47 changes: 47 additions & 0 deletions dev-packages/e2e-tests/test-applications/sveltekit-2-kit-tracing/src/routes/+page.svelte
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
<h1>Welcome to SvelteKit 2 with Svelte 5!</h1>
<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>

<ul>
<li>
<a href="/client-error">Client error</a>
</li>
<li>
<a href="/universal-load-error">Universal Load error</a>
</li>
<li>
<a href="/server-load-error">Server Load error</a>
</li>
<li>
<a href="/server-route-error">Server Route error</a>
</li>
<li>
<a id="routeWithParamsLink" href="/users/123abc">Route with Params</a>
</li>
<li>
<a href="/users">Route with Server Load</a>
</li>
<li>
<a href="/universal-load-fetch">Route with fetch in universal load</a>
</li>
<li>
<a id="redirectLink" href="/redirect1">Redirect</a>
</li>
<li>
<a href="/server-load-fetch">Route with nested fetch in server load</a>
</li>
<li>
<a href="/nav1">Nav 1</a>
</li>
<li>
<a href="/nav2">Nav 2</a>
</li>
<li>
<a href="components">Component Tracking</a>
</li>
<li>
<a href="/form-action">Form Action</a>
</li>
<li>
<a href="/remote-functions">Remote Functions</a>
</li>
</ul>
3 changes: 3 additions & 0 deletions ...kages/e2e-tests/test-applications/sveltekit-2-kit-tracing/src/routes/api/users/+server.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
export const GET = () => {
return new Response(JSON.stringify({ users: ['alice', 'bob', 'carol'] }));
};
5 changes: 5 additions & 0 deletions ...s/e2e-tests/test-applications/sveltekit-2-kit-tracing/src/routes/building/+page.server.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
import type { PageServerLoad } from './$types';

export const load = (async _event => {
return { name: 'building (server)' };
}) satisfies PageServerLoad;
21 changes: 21 additions & 0 deletions ...ages/e2e-tests/test-applications/sveltekit-2-kit-tracing/src/routes/building/+page.svelte
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
<script lang="ts">
import * as Sentry from '@sentry/sveltekit';

async function getSentryData() {
Sentry.startSpan({
name: 'Example Frontend Span',
}, async () => {
const res = await fetch('/sentry-example');
if (!res.ok) {
throw new Error('Sentry Example Frontend Error');
}
})
}
</script>

<h1>Check Build</h1>

<p>
This route only exists to check that Typescript definitions
and auto instrumentation are working when the project is built.
</p>
5 changes: 5 additions & 0 deletions ...packages/e2e-tests/test-applications/sveltekit-2-kit-tracing/src/routes/building/+page.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
import type { PageLoad } from './$types';

export const load = (async _event => {
return { name: 'building' };
}) satisfies PageLoad;
9 changes: 9 additions & 0 deletions .../e2e-tests/test-applications/sveltekit-2-kit-tracing/src/routes/client-error/+page.svelte
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
<script lang="ts">
function throwError() {
throw new Error('Click Error');
}
</script>

<h1>Client error</h1>

<button on:click={throwError}>Throw error</button>
15 changes: 15 additions & 0 deletions ...es/e2e-tests/test-applications/sveltekit-2-kit-tracing/src/routes/components/+page.svelte
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
<script>
import * as Sentry from '@sentry/sveltekit';

import Component1 from "./Component1.svelte";
import Component2 from "./Component2.svelte";
import Component3 from "./Component3.svelte";

Sentry.trackComponent({componentName: 'components/+page'})

</script>
<h2>Demonstrating Component Tracking</h2>

<Component1></Component1>
<Component2></Component2>
<Component3></Component3>
10 changes: 10 additions & 0 deletions ...e-tests/test-applications/sveltekit-2-kit-tracing/src/routes/components/Component1.svelte
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
<script>
import Component2 from "./Component2.svelte";
import {trackComponent} from '@sentry/sveltekit';

trackComponent({componentName: 'Component1'});

</script>
<h3>Howdy, I'm component 1</h3>

<Component2></Component2>
9 changes: 9 additions & 0 deletions ...e-tests/test-applications/sveltekit-2-kit-tracing/src/routes/components/Component2.svelte
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
<script>
import Component3 from "./Component3.svelte";
import {trackComponent} from '@sentry/sveltekit';

trackComponent({componentName: 'Component2'});
</script>
<h3>Howdy, I'm component 2</h3>

<Component3></Component3>
6 changes: 6 additions & 0 deletions ...e-tests/test-applications/sveltekit-2-kit-tracing/src/routes/components/Component3.svelte
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
<script lang="ts">
import * as Sentry from '@sentry/sveltekit';
Sentry.trackComponent({componentName: 'Component3'});
</script>

<h3>Howdy, I'm component 3</h3>
7 changes: 7 additions & 0 deletions ...2e-tests/test-applications/sveltekit-2-kit-tracing/src/routes/form-action/+page.server.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
export const actions = {
default: async ({ request }) => {
const formData = await request.formData();
const name = formData.get('name');
return { name };
},
};
15 changes: 15 additions & 0 deletions ...s/e2e-tests/test-applications/sveltekit-2-kit-tracing/src/routes/form-action/+page.svelte
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
<script>
import { enhance } from '$app/forms';

const { data, form } = $props();
</script>

<form method="post" use:enhance>
<label for="name">Name:</label>
<input id="inputName" type="text" name="name" />
<button id="buttonSubmit" type="submit">Submit</button>
</form>

{#if form?.name}
<p>Hello {form.name}</p>
{/if}
1 change: 1 addition & 0 deletions ...packages/e2e-tests/test-applications/sveltekit-2-kit-tracing/src/routes/nav1/+page.svelte
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
<h1>Navigation 1</h1>
1 change: 1 addition & 0 deletions ...packages/e2e-tests/test-applications/sveltekit-2-kit-tracing/src/routes/nav2/+page.svelte
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
<h1>Navigation 2</h1>
5 changes: 5 additions & 0 deletions ...ackages/e2e-tests/test-applications/sveltekit-2-kit-tracing/src/routes/redirect1/+page.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
import { redirect } from '@sveltejs/kit';

export const load = async () => {
redirect(301, '/redirect2');
};
5 changes: 5 additions & 0 deletions ...ackages/e2e-tests/test-applications/sveltekit-2-kit-tracing/src/routes/redirect2/+page.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
import { redirect } from '@sveltejs/kit';

export const load = async () => {
redirect(301, '/users/789');
};
6 changes: 6 additions & 0 deletions ...ts/test-applications/sveltekit-2-kit-tracing/src/routes/server-load-error/+page.server.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
export const load = async () => {
throw new Error('Server Load Error');
return {
msg: 'Hello World',
};
};
9 changes: 9 additions & 0 deletions ...tests/test-applications/sveltekit-2-kit-tracing/src/routes/server-load-error/+page.svelte
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
<script lang="ts">
export let data
</script>

<h1>Server load error</h1>

<p>
Message: {data.msg}
</p>
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): Add Compatibility for builtin SvelteKit Tracing#17423

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
Lms24 merged 16 commits into from
Aug 27, 2025
Merged

feat(sveltekit): Add Compatibility for builtin SvelteKit Tracing #17423

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
3993737
ref(sveltekit): Handle SvelteKit-generated spans in `sentryHandle`
Lms24 Aug 14, 2025
371fe0c
simplify
Lms24 Aug 14, 2025
9c7f66d
2.31.0
Lms24 Aug 15, 2025
bb028e1
process kit spans
Lms24 Aug 18, 2025
ea95125
wip but detect tracing config at SDK setup time
Lms24 Aug 19, 2025
c389a1f
comment
Lms24 Aug 20, 2025
e728084
global values injection plugin, add tests, adjust existing tests
Lms24 Aug 26, 2025
72cc4a9
don't auto-wrap load functions if kit-tracing is enabled
Lms24 Aug 26, 2025
529d718
add e2e test app with kit-tracing enabled
Lms24 Aug 26, 2025
b70134b
fix span name, origin inconsistencies
Lms24 Aug 26, 2025
927cbf6
lint and remove remote function test
Lms24 Aug 26, 2025
eebd5cc
remove tracing config runtime check, cleanup, move some files
Lms24 Aug 27, 2025
05091f5
lint
Lms24 Aug 27, 2025
cd9c441
fix failing unit test
Lms24 Aug 27, 2025
d265348
improve tracing check, optimize svelteKitSpansIntegration
Lms24 Aug 27, 2025
87c4109
review suggestions, comments, revert kitSpansIntegrations optimizatio…
Lms24 Aug 27, 2025
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
15 changes: 15 additions & 0 deletions dev-packages/e2e-tests/test-applications/sveltekit-2-kit-tracing/.gitignore
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
.DS_Store
node_modules
/build
/.svelte-kit
/package
.env
.env.*
!.env.example
vite.config.js.timestamp-*
vite.config.ts.timestamp-*

#temporarily excluding my remote function routes. To be removed with the next PR:
./src/routes/remote-functions/data.remote.ts
./src/routes/remote-functions/+page.svelte
./tests/tracing.remote-functions.ts
2 changes: 2 additions & 0 deletions dev-packages/e2e-tests/test-applications/sveltekit-2-kit-tracing/.npmrc
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
@sentry:registry=http://127.0.0.1:4873
@sentry-internal:registry=http://127.0.0.1:4873
41 changes: 41 additions & 0 deletions dev-packages/e2e-tests/test-applications/sveltekit-2-kit-tracing/README.md
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
# create-svelte

Everything you need to build a Svelte project, powered by
[`create-svelte`](https://github.com/sveltejs/kit/tree/main/packages/create-svelte).

## Creating a project

If you're seeing this, you've probably already done this step. Congrats!

```bash
# create a new project in the current directory
npm create svelte@latest

# create a new project in my-app
npm create svelte@latest my-app
```

## Developing

Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a
development server:

```bash
npm run dev

# or start the server and open the app in a new browser tab
npm run dev -- --open
```

## Building

To create a production version of your app:

```bash
npm run build
```

You can preview the production build with `npm run preview`.

> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target
> environment.
37 changes: 37 additions & 0 deletions dev-packages/e2e-tests/test-applications/sveltekit-2-kit-tracing/package.json
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
{
"name": "sveltekit-2-kit-tracing",
"version": "0.0.1",
"private": true,
"scripts": {
"dev": "vite dev",
"build": "vite build",
"preview": "vite preview",
"proxy": "node start-event-proxy.mjs",
"clean": "npx rimraf node_modules pnpm-lock.yaml",
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
"test:prod": "TEST_ENV=production playwright test",
"test:build": "pnpm install && pnpm build",
"test:assert": "pnpm test:prod"
},
"dependencies": {
"@sentry/sveltekit": "latest || *",
"@spotlightjs/spotlight": "2.0.0-alpha.1"
},
"devDependencies": {
"@playwright/test": "~1.53.2",
"@sentry-internal/test-utils": "link:../../../test-utils",
"@sveltejs/adapter-node": "^5.3.1",
"@sveltejs/kit": "^2.31.0",
"@sveltejs/vite-plugin-svelte": "^6.1.3",
"svelte": "^5.38.3",
"svelte-check": "^4.3.1",
"tslib": "^2.4.1",
"typescript": "^5.0.0",
"vite": "^7.1.3"
},
"type": "module",
"volta": {
"extends": "../../package.json"
}
}
8 changes: 8 additions & 0 deletions dev-packages/e2e-tests/test-applications/sveltekit-2-kit-tracing/playwright.config.mjs
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
import { getPlaywrightConfig } from '@sentry-internal/test-utils';

const config = getPlaywrightConfig({
startCommand: 'ORIGIN=http://localhost:3030 node ./build/index.js',
port: 3030,
});

export default config;
13 changes: 13 additions & 0 deletions dev-packages/e2e-tests/test-applications/sveltekit-2-kit-tracing/src/app.d.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
// See https://kit.svelte.dev/docs/types#app
// for information about these interfaces
declare global {
namespace App {
// interface Error {}
// interface Locals {}
// interface PageData {}
// interface PageState {}
// interface Platform {}
}
}

export {};
12 changes: 12 additions & 0 deletions dev-packages/e2e-tests/test-applications/sveltekit-2-kit-tracing/src/app.html
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
%sveltekit.head%
</head>
<body data-sveltekit-preload-data="hover">
<div style="display: contents">%sveltekit.body%</div>
</body>
</html>
23 changes: 23 additions & 0 deletions dev-packages/e2e-tests/test-applications/sveltekit-2-kit-tracing/src/hooks.client.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
import { env } from '$env/dynamic/public';
import * as Sentry from '@sentry/sveltekit';
import * as Spotlight from '@spotlightjs/spotlight';

Sentry.init({
environment: 'qa', // dynamic sampling bias to keep transactions
dsn: env.PUBLIC_E2E_TEST_DSN,
debug: !!env.PUBLIC_DEBUG,
tunnel: `http://localhost:3031/`, // proxy server
tracesSampleRate: 1.0,
});

const myErrorHandler = ({ error, event }: any) => {
console.error('An error occurred on the client side:', error, event);
};

export const handleError = Sentry.handleErrorWithSentry(myErrorHandler);

if (import.meta.env.DEV) {
Spotlight.init({
injectImmediately: true,
});
}
12 changes: 12 additions & 0 deletions dev-packages/e2e-tests/test-applications/sveltekit-2-kit-tracing/src/hooks.server.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
import * as Sentry from '@sentry/sveltekit';
import { setupSidecar } from '@spotlightjs/spotlight/sidecar';
import { sequence } from '@sveltejs/kit/hooks';

// not logging anything to console to avoid noise in the test output
export const handleError = Sentry.handleErrorWithSentry(() => {});

export const handle = sequence(Sentry.sentryHandle());

if (import.meta.env.DEV) {
setupSidecar();
}
11 changes: 11 additions & 0 deletions ...ackages/e2e-tests/test-applications/sveltekit-2-kit-tracing/src/instrumentation.server.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
import * as Sentry from '@sentry/sveltekit';
import { E2E_TEST_DSN } from '$env/static/private';

Sentry.init({
environment: 'qa', // dynamic sampling bias to keep transactions
dsn: E2E_TEST_DSN,
debug: !!process.env.DEBUG,
tunnel: `http://localhost:3031/`, // proxy server
tracesSampleRate: 1.0,
spotlight: import.meta.env.DEV,
});
15 changes: 15 additions & 0 deletions dev-packages/e2e-tests/test-applications/sveltekit-2-kit-tracing/src/routes/+layout.svelte
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
<script lang="ts">
import { onMount } from "svelte";

onMount(() => {
// Indicate that the SvelteKit app was hydrated
document.body.classList.add("hydrated");
});


</script>

<h1>Sveltekit E2E Test app</h1>
<div data-sveltekit-preload-data="off">
<slot></slot>
</div>
47 changes: 47 additions & 0 deletions dev-packages/e2e-tests/test-applications/sveltekit-2-kit-tracing/src/routes/+page.svelte
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
<h1>Welcome to SvelteKit 2 with Svelte 5!</h1>
<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>

<ul>
<li>
<a href="/client-error">Client error</a>
</li>
<li>
<a href="/universal-load-error">Universal Load error</a>
</li>
<li>
<a href="/server-load-error">Server Load error</a>
</li>
<li>
<a href="/server-route-error">Server Route error</a>
</li>
<li>
<a id="routeWithParamsLink" href="/users/123abc">Route with Params</a>
</li>
<li>
<a href="/users">Route with Server Load</a>
</li>
<li>
<a href="/universal-load-fetch">Route with fetch in universal load</a>
</li>
<li>
<a id="redirectLink" href="/redirect1">Redirect</a>
</li>
<li>
<a href="/server-load-fetch">Route with nested fetch in server load</a>
</li>
<li>
<a href="/nav1">Nav 1</a>
</li>
<li>
<a href="/nav2">Nav 2</a>
</li>
<li>
<a href="components">Component Tracking</a>
</li>
<li>
<a href="/form-action">Form Action</a>
</li>
<li>
<a href="/remote-functions">Remote Functions</a>
</li>
</ul>
3 changes: 3 additions & 0 deletions ...kages/e2e-tests/test-applications/sveltekit-2-kit-tracing/src/routes/api/users/+server.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
export const GET = () => {
return new Response(JSON.stringify({ users: ['alice', 'bob', 'carol'] }));
};
5 changes: 5 additions & 0 deletions ...s/e2e-tests/test-applications/sveltekit-2-kit-tracing/src/routes/building/+page.server.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
import type { PageServerLoad } from './$types';

export const load = (async _event => {
return { name: 'building (server)' };
}) satisfies PageServerLoad;
21 changes: 21 additions & 0 deletions ...ages/e2e-tests/test-applications/sveltekit-2-kit-tracing/src/routes/building/+page.svelte
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
<script lang="ts">
import * as Sentry from '@sentry/sveltekit';

async function getSentryData() {
Sentry.startSpan({
name: 'Example Frontend Span',
}, async () => {
const res = await fetch('/sentry-example');
if (!res.ok) {
throw new Error('Sentry Example Frontend Error');
}
})
}
</script>

<h1>Check Build</h1>

<p>
This route only exists to check that Typescript definitions
and auto instrumentation are working when the project is built.
</p>
5 changes: 5 additions & 0 deletions ...packages/e2e-tests/test-applications/sveltekit-2-kit-tracing/src/routes/building/+page.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
import type { PageLoad } from './$types';

export const load = (async _event => {
return { name: 'building' };
}) satisfies PageLoad;
9 changes: 9 additions & 0 deletions .../e2e-tests/test-applications/sveltekit-2-kit-tracing/src/routes/client-error/+page.svelte
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
<script lang="ts">
function throwError() {
throw new Error('Click Error');
}
</script>

<h1>Client error</h1>

<button on:click={throwError}>Throw error</button>
15 changes: 15 additions & 0 deletions ...es/e2e-tests/test-applications/sveltekit-2-kit-tracing/src/routes/components/+page.svelte
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
<script>
import * as Sentry from '@sentry/sveltekit';

import Component1 from "./Component1.svelte";
import Component2 from "./Component2.svelte";
import Component3 from "./Component3.svelte";

Sentry.trackComponent({componentName: 'components/+page'})

</script>
<h2>Demonstrating Component Tracking</h2>

<Component1></Component1>
<Component2></Component2>
<Component3></Component3>
10 changes: 10 additions & 0 deletions ...e-tests/test-applications/sveltekit-2-kit-tracing/src/routes/components/Component1.svelte
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
<script>
import Component2 from "./Component2.svelte";
import {trackComponent} from '@sentry/sveltekit';

trackComponent({componentName: 'Component1'});

</script>
<h3>Howdy, I'm component 1</h3>

<Component2></Component2>
9 changes: 9 additions & 0 deletions ...e-tests/test-applications/sveltekit-2-kit-tracing/src/routes/components/Component2.svelte
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
<script>
import Component3 from "./Component3.svelte";
import {trackComponent} from '@sentry/sveltekit';

trackComponent({componentName: 'Component2'});
</script>
<h3>Howdy, I'm component 2</h3>

<Component3></Component3>
6 changes: 6 additions & 0 deletions ...e-tests/test-applications/sveltekit-2-kit-tracing/src/routes/components/Component3.svelte
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
<script lang="ts">
import * as Sentry from '@sentry/sveltekit';
Sentry.trackComponent({componentName: 'Component3'});
</script>

<h3>Howdy, I'm component 3</h3>
7 changes: 7 additions & 0 deletions ...2e-tests/test-applications/sveltekit-2-kit-tracing/src/routes/form-action/+page.server.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
export const actions = {
default: async ({ request }) => {
const formData = await request.formData();
const name = formData.get('name');
return { name };
},
};
15 changes: 15 additions & 0 deletions ...s/e2e-tests/test-applications/sveltekit-2-kit-tracing/src/routes/form-action/+page.svelte
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
<script>
import { enhance } from '$app/forms';

const { data, form } = $props();
</script>

<form method="post" use:enhance>
<label for="name">Name:</label>
<input id="inputName" type="text" name="name" />
<button id="buttonSubmit" type="submit">Submit</button>
</form>

{#if form?.name}
<p>Hello {form.name}</p>
{/if}
1 change: 1 addition & 0 deletions ...packages/e2e-tests/test-applications/sveltekit-2-kit-tracing/src/routes/nav1/+page.svelte
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
<h1>Navigation 1</h1>
1 change: 1 addition & 0 deletions ...packages/e2e-tests/test-applications/sveltekit-2-kit-tracing/src/routes/nav2/+page.svelte
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
<h1>Navigation 2</h1>
5 changes: 5 additions & 0 deletions ...ackages/e2e-tests/test-applications/sveltekit-2-kit-tracing/src/routes/redirect1/+page.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
import { redirect } from '@sveltejs/kit';

export const load = async () => {
redirect(301, '/redirect2');
};
5 changes: 5 additions & 0 deletions ...ackages/e2e-tests/test-applications/sveltekit-2-kit-tracing/src/routes/redirect2/+page.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
import { redirect } from '@sveltejs/kit';

export const load = async () => {
redirect(301, '/users/789');
};
6 changes: 6 additions & 0 deletions ...ts/test-applications/sveltekit-2-kit-tracing/src/routes/server-load-error/+page.server.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
export const load = async () => {
throw new Error('Server Load Error');
return {
msg: 'Hello World',
};
};
9 changes: 9 additions & 0 deletions ...tests/test-applications/sveltekit-2-kit-tracing/src/routes/server-load-error/+page.svelte
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
<script lang="ts">
export let data
</script>

<h1>Server load error</h1>

<p>
Message: {data.msg}
</p>
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 \u003e 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): Add Compatibility for builtin SvelteKit Tracing#17423

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
Lms24 merged 16 commits into from
Aug 27, 2025
Merged

feat(sveltekit): Add Compatibility for builtin SvelteKit Tracing #17423

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
3993737
ref(sveltekit): Handle SvelteKit-generated spans in `sentryHandle`
Lms24 Aug 14, 2025
371fe0c
simplify
Lms24 Aug 14, 2025
9c7f66d
2.31.0
Lms24 Aug 15, 2025
bb028e1
process kit spans
Lms24 Aug 18, 2025
ea95125
wip but detect tracing config at SDK setup time
Lms24 Aug 19, 2025
c389a1f
comment
Lms24 Aug 20, 2025
e728084
global values injection plugin, add tests, adjust existing tests
Lms24 Aug 26, 2025
72cc4a9
don't auto-wrap load functions if kit-tracing is enabled
Lms24 Aug 26, 2025
529d718
add e2e test app with kit-tracing enabled
Lms24 Aug 26, 2025
b70134b
fix span name, origin inconsistencies
Lms24 Aug 26, 2025
927cbf6
lint and remove remote function test
Lms24 Aug 26, 2025
eebd5cc
remove tracing config runtime check, cleanup, move some files
Lms24 Aug 27, 2025
05091f5
lint
Lms24 Aug 27, 2025
cd9c441
fix failing unit test
Lms24 Aug 27, 2025
d265348
improve tracing check, optimize svelteKitSpansIntegration
Lms24 Aug 27, 2025
87c4109
review suggestions, comments, revert kitSpansIntegrations optimizatio…
Lms24 Aug 27, 2025
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
15 changes: 15 additions & 0 deletions dev-packages/e2e-tests/test-applications/sveltekit-2-kit-tracing/.gitignore
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
.DS_Store
node_modules
/build
/.svelte-kit
/package
.env
.env.*
!.env.example
vite.config.js.timestamp-*
vite.config.ts.timestamp-*

#temporarily excluding my remote function routes. To be removed with the next PR:
./src/routes/remote-functions/data.remote.ts
./src/routes/remote-functions/+page.svelte
./tests/tracing.remote-functions.ts
2 changes: 2 additions & 0 deletions dev-packages/e2e-tests/test-applications/sveltekit-2-kit-tracing/.npmrc
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
@sentry:registry=http://127.0.0.1:4873
@sentry-internal:registry=http://127.0.0.1:4873
41 changes: 41 additions & 0 deletions dev-packages/e2e-tests/test-applications/sveltekit-2-kit-tracing/README.md
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
# create-svelte

Everything you need to build a Svelte project, powered by
[`create-svelte`](https://github.com/sveltejs/kit/tree/main/packages/create-svelte).

## Creating a project

If you're seeing this, you've probably already done this step. Congrats!

```bash
# create a new project in the current directory
npm create svelte@latest

# create a new project in my-app
npm create svelte@latest my-app
```

## Developing

Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a
development server:

```bash
npm run dev

# or start the server and open the app in a new browser tab
npm run dev -- --open
```

## Building

To create a production version of your app:

```bash
npm run build
```

You can preview the production build with `npm run preview`.

> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target
> environment.
37 changes: 37 additions & 0 deletions dev-packages/e2e-tests/test-applications/sveltekit-2-kit-tracing/package.json
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
{
"name": "sveltekit-2-kit-tracing",
"version": "0.0.1",
"private": true,
"scripts": {
"dev": "vite dev",
"build": "vite build",
"preview": "vite preview",
"proxy": "node start-event-proxy.mjs",
"clean": "npx rimraf node_modules pnpm-lock.yaml",
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
"test:prod": "TEST_ENV=production playwright test",
"test:build": "pnpm install && pnpm build",
"test:assert": "pnpm test:prod"
},
"dependencies": {
"@sentry/sveltekit": "latest || *",
"@spotlightjs/spotlight": "2.0.0-alpha.1"
},
"devDependencies": {
"@playwright/test": "~1.53.2",
"@sentry-internal/test-utils": "link:../../../test-utils",
"@sveltejs/adapter-node": "^5.3.1",
"@sveltejs/kit": "^2.31.0",
"@sveltejs/vite-plugin-svelte": "^6.1.3",
"svelte": "^5.38.3",
"svelte-check": "^4.3.1",
"tslib": "^2.4.1",
"typescript": "^5.0.0",
"vite": "^7.1.3"
},
"type": "module",
"volta": {
"extends": "../../package.json"
}
}
8 changes: 8 additions & 0 deletions dev-packages/e2e-tests/test-applications/sveltekit-2-kit-tracing/playwright.config.mjs
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
import { getPlaywrightConfig } from '@sentry-internal/test-utils';

const config = getPlaywrightConfig({
startCommand: 'ORIGIN=http://localhost:3030 node ./build/index.js',
port: 3030,
});

export default config;
13 changes: 13 additions & 0 deletions dev-packages/e2e-tests/test-applications/sveltekit-2-kit-tracing/src/app.d.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
// See https://kit.svelte.dev/docs/types#app
// for information about these interfaces
declare global {
namespace App {
// interface Error {}
// interface Locals {}
// interface PageData {}
// interface PageState {}
// interface Platform {}
}
}

export {};
12 changes: 12 additions & 0 deletions dev-packages/e2e-tests/test-applications/sveltekit-2-kit-tracing/src/app.html
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
%sveltekit.head%
</head>
<body data-sveltekit-preload-data="hover">
<div style="display: contents">%sveltekit.body%</div>
</body>
</html>
23 changes: 23 additions & 0 deletions dev-packages/e2e-tests/test-applications/sveltekit-2-kit-tracing/src/hooks.client.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
import { env } from '$env/dynamic/public';
import * as Sentry from '@sentry/sveltekit';
import * as Spotlight from '@spotlightjs/spotlight';

Sentry.init({
environment: 'qa', // dynamic sampling bias to keep transactions
dsn: env.PUBLIC_E2E_TEST_DSN,
debug: !!env.PUBLIC_DEBUG,
tunnel: `http://localhost:3031/`, // proxy server
tracesSampleRate: 1.0,
});

const myErrorHandler = ({ error, event }: any) => {
console.error('An error occurred on the client side:', error, event);
};

export const handleError = Sentry.handleErrorWithSentry(myErrorHandler);

if (import.meta.env.DEV) {
Spotlight.init({
injectImmediately: true,
});
}
12 changes: 12 additions & 0 deletions dev-packages/e2e-tests/test-applications/sveltekit-2-kit-tracing/src/hooks.server.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
import * as Sentry from '@sentry/sveltekit';
import { setupSidecar } from '@spotlightjs/spotlight/sidecar';
import { sequence } from '@sveltejs/kit/hooks';

// not logging anything to console to avoid noise in the test output
export const handleError = Sentry.handleErrorWithSentry(() => {});

export const handle = sequence(Sentry.sentryHandle());

if (import.meta.env.DEV) {
setupSidecar();
}
11 changes: 11 additions & 0 deletions ...ackages/e2e-tests/test-applications/sveltekit-2-kit-tracing/src/instrumentation.server.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
import * as Sentry from '@sentry/sveltekit';
import { E2E_TEST_DSN } from '$env/static/private';

Sentry.init({
environment: 'qa', // dynamic sampling bias to keep transactions
dsn: E2E_TEST_DSN,
debug: !!process.env.DEBUG,
tunnel: `http://localhost:3031/`, // proxy server
tracesSampleRate: 1.0,
spotlight: import.meta.env.DEV,
});
15 changes: 15 additions & 0 deletions dev-packages/e2e-tests/test-applications/sveltekit-2-kit-tracing/src/routes/+layout.svelte
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
<script lang="ts">
import { onMount } from "svelte";

onMount(() => {
// Indicate that the SvelteKit app was hydrated
document.body.classList.add("hydrated");
});


</script>

<h1>Sveltekit E2E Test app</h1>
<div data-sveltekit-preload-data="off">
<slot></slot>
</div>
47 changes: 47 additions & 0 deletions dev-packages/e2e-tests/test-applications/sveltekit-2-kit-tracing/src/routes/+page.svelte
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
<h1>Welcome to SvelteKit 2 with Svelte 5!</h1>
<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>

<ul>
<li>
<a href="/client-error">Client error</a>
</li>
<li>
<a href="/universal-load-error">Universal Load error</a>
</li>
<li>
<a href="/server-load-error">Server Load error</a>
</li>
<li>
<a href="/server-route-error">Server Route error</a>
</li>
<li>
<a id="routeWithParamsLink" href="/users/123abc">Route with Params</a>
</li>
<li>
<a href="/users">Route with Server Load</a>
</li>
<li>
<a href="/universal-load-fetch">Route with fetch in universal load</a>
</li>
<li>
<a id="redirectLink" href="/redirect1">Redirect</a>
</li>
<li>
<a href="/server-load-fetch">Route with nested fetch in server load</a>
</li>
<li>
<a href="/nav1">Nav 1</a>
</li>
<li>
<a href="/nav2">Nav 2</a>
</li>
<li>
<a href="components">Component Tracking</a>
</li>
<li>
<a href="/form-action">Form Action</a>
</li>
<li>
<a href="/remote-functions">Remote Functions</a>
</li>
</ul>
3 changes: 3 additions & 0 deletions ...kages/e2e-tests/test-applications/sveltekit-2-kit-tracing/src/routes/api/users/+server.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
export const GET = () => {
return new Response(JSON.stringify({ users: ['alice', 'bob', 'carol'] }));
};
5 changes: 5 additions & 0 deletions ...s/e2e-tests/test-applications/sveltekit-2-kit-tracing/src/routes/building/+page.server.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
import type { PageServerLoad } from './$types';

export const load = (async _event => {
return { name: 'building (server)' };
}) satisfies PageServerLoad;
21 changes: 21 additions & 0 deletions ...ages/e2e-tests/test-applications/sveltekit-2-kit-tracing/src/routes/building/+page.svelte
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
<script lang="ts">
import * as Sentry from '@sentry/sveltekit';

async function getSentryData() {
Sentry.startSpan({
name: 'Example Frontend Span',
}, async () => {
const res = await fetch('/sentry-example');
if (!res.ok) {
throw new Error('Sentry Example Frontend Error');
}
})
}
</script>

<h1>Check Build</h1>

<p>
This route only exists to check that Typescript definitions
and auto instrumentation are working when the project is built.
</p>
5 changes: 5 additions & 0 deletions ...packages/e2e-tests/test-applications/sveltekit-2-kit-tracing/src/routes/building/+page.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
import type { PageLoad } from './$types';

export const load = (async _event => {
return { name: 'building' };
}) satisfies PageLoad;
9 changes: 9 additions & 0 deletions .../e2e-tests/test-applications/sveltekit-2-kit-tracing/src/routes/client-error/+page.svelte
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
<script lang="ts">
function throwError() {
throw new Error('Click Error');
}
</script>

<h1>Client error</h1>

<button on:click={throwError}>Throw error</button>
15 changes: 15 additions & 0 deletions ...es/e2e-tests/test-applications/sveltekit-2-kit-tracing/src/routes/components/+page.svelte
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
<script>
import * as Sentry from '@sentry/sveltekit';

import Component1 from "./Component1.svelte";
import Component2 from "./Component2.svelte";
import Component3 from "./Component3.svelte";

Sentry.trackComponent({componentName: 'components/+page'})

</script>
<h2>Demonstrating Component Tracking</h2>

<Component1></Component1>
<Component2></Component2>
<Component3></Component3>
10 changes: 10 additions & 0 deletions ...e-tests/test-applications/sveltekit-2-kit-tracing/src/routes/components/Component1.svelte
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
<script>
import Component2 from "./Component2.svelte";
import {trackComponent} from '@sentry/sveltekit';

trackComponent({componentName: 'Component1'});

</script>
<h3>Howdy, I'm component 1</h3>

<Component2></Component2>
9 changes: 9 additions & 0 deletions ...e-tests/test-applications/sveltekit-2-kit-tracing/src/routes/components/Component2.svelte
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
<script>
import Component3 from "./Component3.svelte";
import {trackComponent} from '@sentry/sveltekit';

trackComponent({componentName: 'Component2'});
</script>
<h3>Howdy, I'm component 2</h3>

<Component3></Component3>
6 changes: 6 additions & 0 deletions ...e-tests/test-applications/sveltekit-2-kit-tracing/src/routes/components/Component3.svelte
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
<script lang="ts">
import * as Sentry from '@sentry/sveltekit';
Sentry.trackComponent({componentName: 'Component3'});
</script>

<h3>Howdy, I'm component 3</h3>
7 changes: 7 additions & 0 deletions ...2e-tests/test-applications/sveltekit-2-kit-tracing/src/routes/form-action/+page.server.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
export const actions = {
default: async ({ request }) => {
const formData = await request.formData();
const name = formData.get('name');
return { name };
},
};
15 changes: 15 additions & 0 deletions ...s/e2e-tests/test-applications/sveltekit-2-kit-tracing/src/routes/form-action/+page.svelte
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
<script>
import { enhance } from '$app/forms';

const { data, form } = $props();
</script>

<form method="post" use:enhance>
<label for="name">Name:</label>
<input id="inputName" type="text" name="name" />
<button id="buttonSubmit" type="submit">Submit</button>
</form>

{#if form?.name}
<p>Hello {form.name}</p>
{/if}
1 change: 1 addition & 0 deletions ...packages/e2e-tests/test-applications/sveltekit-2-kit-tracing/src/routes/nav1/+page.svelte
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
<h1>Navigation 1</h1>
1 change: 1 addition & 0 deletions ...packages/e2e-tests/test-applications/sveltekit-2-kit-tracing/src/routes/nav2/+page.svelte
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
<h1>Navigation 2</h1>
5 changes: 5 additions & 0 deletions ...ackages/e2e-tests/test-applications/sveltekit-2-kit-tracing/src/routes/redirect1/+page.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
import { redirect } from '@sveltejs/kit';

export const load = async () => {
redirect(301, '/redirect2');
};
5 changes: 5 additions & 0 deletions ...ackages/e2e-tests/test-applications/sveltekit-2-kit-tracing/src/routes/redirect2/+page.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
import { redirect } from '@sveltejs/kit';

export const load = async () => {
redirect(301, '/users/789');
};
6 changes: 6 additions & 0 deletions ...ts/test-applications/sveltekit-2-kit-tracing/src/routes/server-load-error/+page.server.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
export const load = async () => {
throw new Error('Server Load Error');
return {
msg: 'Hello World',
};
};
9 changes: 9 additions & 0 deletions ...tests/test-applications/sveltekit-2-kit-tracing/src/routes/server-load-error/+page.svelte
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
<script lang="ts">
export let data
</script>

<h1>Server load error</h1>

<p>
Message: {data.msg}
</p>
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): Add Compatibility for builtin SvelteKit Tracing#17423

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
Lms24 merged 16 commits into from
Aug 27, 2025
Merged

feat(sveltekit): Add Compatibility for builtin SvelteKit Tracing #17423

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
3993737
ref(sveltekit): Handle SvelteKit-generated spans in `sentryHandle`
Lms24 Aug 14, 2025
371fe0c
simplify
Lms24 Aug 14, 2025
9c7f66d
2.31.0
Lms24 Aug 15, 2025
bb028e1
process kit spans
Lms24 Aug 18, 2025
ea95125
wip but detect tracing config at SDK setup time
Lms24 Aug 19, 2025
c389a1f
comment
Lms24 Aug 20, 2025
e728084
global values injection plugin, add tests, adjust existing tests
Lms24 Aug 26, 2025
72cc4a9
don't auto-wrap load functions if kit-tracing is enabled
Lms24 Aug 26, 2025
529d718
add e2e test app with kit-tracing enabled
Lms24 Aug 26, 2025
b70134b
fix span name, origin inconsistencies
Lms24 Aug 26, 2025
927cbf6
lint and remove remote function test
Lms24 Aug 26, 2025
eebd5cc
remove tracing config runtime check, cleanup, move some files
Lms24 Aug 27, 2025
05091f5
lint
Lms24 Aug 27, 2025
cd9c441
fix failing unit test
Lms24 Aug 27, 2025
d265348
improve tracing check, optimize svelteKitSpansIntegration
Lms24 Aug 27, 2025
87c4109
review suggestions, comments, revert kitSpansIntegrations optimizatio…
Lms24 Aug 27, 2025
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
15 changes: 15 additions & 0 deletions dev-packages/e2e-tests/test-applications/sveltekit-2-kit-tracing/.gitignore
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
.DS_Store
node_modules
/build
/.svelte-kit
/package
.env
.env.*
!.env.example
vite.config.js.timestamp-*
vite.config.ts.timestamp-*

#temporarily excluding my remote function routes. To be removed with the next PR:
./src/routes/remote-functions/data.remote.ts
./src/routes/remote-functions/+page.svelte
./tests/tracing.remote-functions.ts
2 changes: 2 additions & 0 deletions dev-packages/e2e-tests/test-applications/sveltekit-2-kit-tracing/.npmrc
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
@sentry:registry=http://127.0.0.1:4873
@sentry-internal:registry=http://127.0.0.1:4873
41 changes: 41 additions & 0 deletions dev-packages/e2e-tests/test-applications/sveltekit-2-kit-tracing/README.md
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
# create-svelte

Everything you need to build a Svelte project, powered by
[`create-svelte`](https://github.com/sveltejs/kit/tree/main/packages/create-svelte).

## Creating a project

If you're seeing this, you've probably already done this step. Congrats!

```bash
# create a new project in the current directory
npm create svelte@latest

# create a new project in my-app
npm create svelte@latest my-app
```

## Developing

Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a
development server:

```bash
npm run dev

# or start the server and open the app in a new browser tab
npm run dev -- --open
```

## Building

To create a production version of your app:

```bash
npm run build
```

You can preview the production build with `npm run preview`.

> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target
> environment.
37 changes: 37 additions & 0 deletions dev-packages/e2e-tests/test-applications/sveltekit-2-kit-tracing/package.json
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
{
"name": "sveltekit-2-kit-tracing",
"version": "0.0.1",
"private": true,
"scripts": {
"dev": "vite dev",
"build": "vite build",
"preview": "vite preview",
"proxy": "node start-event-proxy.mjs",
"clean": "npx rimraf node_modules pnpm-lock.yaml",
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
"test:prod": "TEST_ENV=production playwright test",
"test:build": "pnpm install && pnpm build",
"test:assert": "pnpm test:prod"
},
"dependencies": {
"@sentry/sveltekit": "latest || *",
"@spotlightjs/spotlight": "2.0.0-alpha.1"
},
"devDependencies": {
"@playwright/test": "~1.53.2",
"@sentry-internal/test-utils": "link:../../../test-utils",
"@sveltejs/adapter-node": "^5.3.1",
"@sveltejs/kit": "^2.31.0",
"@sveltejs/vite-plugin-svelte": "^6.1.3",
"svelte": "^5.38.3",
"svelte-check": "^4.3.1",
"tslib": "^2.4.1",
"typescript": "^5.0.0",
"vite": "^7.1.3"
},
"type": "module",
"volta": {
"extends": "../../package.json"
}
}
8 changes: 8 additions & 0 deletions dev-packages/e2e-tests/test-applications/sveltekit-2-kit-tracing/playwright.config.mjs
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
import { getPlaywrightConfig } from '@sentry-internal/test-utils';

const config = getPlaywrightConfig({
startCommand: 'ORIGIN=http://localhost:3030 node ./build/index.js',
port: 3030,
});

export default config;
13 changes: 13 additions & 0 deletions dev-packages/e2e-tests/test-applications/sveltekit-2-kit-tracing/src/app.d.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
// See https://kit.svelte.dev/docs/types#app
// for information about these interfaces
declare global {
namespace App {
// interface Error {}
// interface Locals {}
// interface PageData {}
// interface PageState {}
// interface Platform {}
}
}

export {};
12 changes: 12 additions & 0 deletions dev-packages/e2e-tests/test-applications/sveltekit-2-kit-tracing/src/app.html
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
%sveltekit.head%
</head>
<body data-sveltekit-preload-data="hover">
<div style="display: contents">%sveltekit.body%</div>
</body>
</html>
23 changes: 23 additions & 0 deletions dev-packages/e2e-tests/test-applications/sveltekit-2-kit-tracing/src/hooks.client.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
import { env } from '$env/dynamic/public';
import * as Sentry from '@sentry/sveltekit';
import * as Spotlight from '@spotlightjs/spotlight';

Sentry.init({
environment: 'qa', // dynamic sampling bias to keep transactions
dsn: env.PUBLIC_E2E_TEST_DSN,
debug: !!env.PUBLIC_DEBUG,
tunnel: `http://localhost:3031/`, // proxy server
tracesSampleRate: 1.0,
});

const myErrorHandler = ({ error, event }: any) => {
console.error('An error occurred on the client side:', error, event);
};

export const handleError = Sentry.handleErrorWithSentry(myErrorHandler);

if (import.meta.env.DEV) {
Spotlight.init({
injectImmediately: true,
});
}
12 changes: 12 additions & 0 deletions dev-packages/e2e-tests/test-applications/sveltekit-2-kit-tracing/src/hooks.server.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
import * as Sentry from '@sentry/sveltekit';
import { setupSidecar } from '@spotlightjs/spotlight/sidecar';
import { sequence } from '@sveltejs/kit/hooks';

// not logging anything to console to avoid noise in the test output
export const handleError = Sentry.handleErrorWithSentry(() => {});

export const handle = sequence(Sentry.sentryHandle());

if (import.meta.env.DEV) {
setupSidecar();
}
11 changes: 11 additions & 0 deletions ...ackages/e2e-tests/test-applications/sveltekit-2-kit-tracing/src/instrumentation.server.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
import * as Sentry from '@sentry/sveltekit';
import { E2E_TEST_DSN } from '$env/static/private';

Sentry.init({
environment: 'qa', // dynamic sampling bias to keep transactions
dsn: E2E_TEST_DSN,
debug: !!process.env.DEBUG,
tunnel: `http://localhost:3031/`, // proxy server
tracesSampleRate: 1.0,
spotlight: import.meta.env.DEV,
});
15 changes: 15 additions & 0 deletions dev-packages/e2e-tests/test-applications/sveltekit-2-kit-tracing/src/routes/+layout.svelte
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
<script lang="ts">
import { onMount } from "svelte";

onMount(() => {
// Indicate that the SvelteKit app was hydrated
document.body.classList.add("hydrated");
});


</script>

<h1>Sveltekit E2E Test app</h1>
<div data-sveltekit-preload-data="off">
<slot></slot>
</div>
47 changes: 47 additions & 0 deletions dev-packages/e2e-tests/test-applications/sveltekit-2-kit-tracing/src/routes/+page.svelte
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
<h1>Welcome to SvelteKit 2 with Svelte 5!</h1>
<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>

<ul>
<li>
<a href="/client-error">Client error</a>
</li>
<li>
<a href="/universal-load-error">Universal Load error</a>
</li>
<li>
<a href="/server-load-error">Server Load error</a>
</li>
<li>
<a href="/server-route-error">Server Route error</a>
</li>
<li>
<a id="routeWithParamsLink" href="/users/123abc">Route with Params</a>
</li>
<li>
<a href="/users">Route with Server Load</a>
</li>
<li>
<a href="/universal-load-fetch">Route with fetch in universal load</a>
</li>
<li>
<a id="redirectLink" href="/redirect1">Redirect</a>
</li>
<li>
<a href="/server-load-fetch">Route with nested fetch in server load</a>
</li>
<li>
<a href="/nav1">Nav 1</a>
</li>
<li>
<a href="/nav2">Nav 2</a>
</li>
<li>
<a href="components">Component Tracking</a>
</li>
<li>
<a href="/form-action">Form Action</a>
</li>
<li>
<a href="/remote-functions">Remote Functions</a>
</li>
</ul>
3 changes: 3 additions & 0 deletions ...kages/e2e-tests/test-applications/sveltekit-2-kit-tracing/src/routes/api/users/+server.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
export const GET = () => {
return new Response(JSON.stringify({ users: ['alice', 'bob', 'carol'] }));
};
5 changes: 5 additions & 0 deletions ...s/e2e-tests/test-applications/sveltekit-2-kit-tracing/src/routes/building/+page.server.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
import type { PageServerLoad } from './$types';

export const load = (async _event => {
return { name: 'building (server)' };
}) satisfies PageServerLoad;
21 changes: 21 additions & 0 deletions ...ages/e2e-tests/test-applications/sveltekit-2-kit-tracing/src/routes/building/+page.svelte
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
<script lang="ts">
import * as Sentry from '@sentry/sveltekit';

async function getSentryData() {
Sentry.startSpan({
name: 'Example Frontend Span',
}, async () => {
const res = await fetch('/sentry-example');
if (!res.ok) {
throw new Error('Sentry Example Frontend Error');
}
})
}
</script>

<h1>Check Build</h1>

<p>
This route only exists to check that Typescript definitions
and auto instrumentation are working when the project is built.
</p>
5 changes: 5 additions & 0 deletions ...packages/e2e-tests/test-applications/sveltekit-2-kit-tracing/src/routes/building/+page.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
import type { PageLoad } from './$types';

export const load = (async _event => {
return { name: 'building' };
}) satisfies PageLoad;
9 changes: 9 additions & 0 deletions .../e2e-tests/test-applications/sveltekit-2-kit-tracing/src/routes/client-error/+page.svelte
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
<script lang="ts">
function throwError() {
throw new Error('Click Error');
}
</script>

<h1>Client error</h1>

<button on:click={throwError}>Throw error</button>
15 changes: 15 additions & 0 deletions ...es/e2e-tests/test-applications/sveltekit-2-kit-tracing/src/routes/components/+page.svelte
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
<script>
import * as Sentry from '@sentry/sveltekit';

import Component1 from "./Component1.svelte";
import Component2 from "./Component2.svelte";
import Component3 from "./Component3.svelte";

Sentry.trackComponent({componentName: 'components/+page'})

</script>
<h2>Demonstrating Component Tracking</h2>

<Component1></Component1>
<Component2></Component2>
<Component3></Component3>
10 changes: 10 additions & 0 deletions ...e-tests/test-applications/sveltekit-2-kit-tracing/src/routes/components/Component1.svelte
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
<script>
import Component2 from "./Component2.svelte";
import {trackComponent} from '@sentry/sveltekit';

trackComponent({componentName: 'Component1'});

</script>
<h3>Howdy, I'm component 1</h3>

<Component2></Component2>
9 changes: 9 additions & 0 deletions ...e-tests/test-applications/sveltekit-2-kit-tracing/src/routes/components/Component2.svelte
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
<script>
import Component3 from "./Component3.svelte";
import {trackComponent} from '@sentry/sveltekit';

trackComponent({componentName: 'Component2'});
</script>
<h3>Howdy, I'm component 2</h3>

<Component3></Component3>
6 changes: 6 additions & 0 deletions ...e-tests/test-applications/sveltekit-2-kit-tracing/src/routes/components/Component3.svelte
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
<script lang="ts">
import * as Sentry from '@sentry/sveltekit';
Sentry.trackComponent({componentName: 'Component3'});
</script>

<h3>Howdy, I'm component 3</h3>
7 changes: 7 additions & 0 deletions ...2e-tests/test-applications/sveltekit-2-kit-tracing/src/routes/form-action/+page.server.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
export const actions = {
default: async ({ request }) => {
const formData = await request.formData();
const name = formData.get('name');
return { name };
},
};
15 changes: 15 additions & 0 deletions ...s/e2e-tests/test-applications/sveltekit-2-kit-tracing/src/routes/form-action/+page.svelte
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
<script>
import { enhance } from '$app/forms';

const { data, form } = $props();
</script>

<form method="post" use:enhance>
<label for="name">Name:</label>
<input id="inputName" type="text" name="name" />
<button id="buttonSubmit" type="submit">Submit</button>
</form>

{#if form?.name}
<p>Hello {form.name}</p>
{/if}
1 change: 1 addition & 0 deletions ...packages/e2e-tests/test-applications/sveltekit-2-kit-tracing/src/routes/nav1/+page.svelte
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
<h1>Navigation 1</h1>
1 change: 1 addition & 0 deletions ...packages/e2e-tests/test-applications/sveltekit-2-kit-tracing/src/routes/nav2/+page.svelte
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
<h1>Navigation 2</h1>
5 changes: 5 additions & 0 deletions ...ackages/e2e-tests/test-applications/sveltekit-2-kit-tracing/src/routes/redirect1/+page.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
import { redirect } from '@sveltejs/kit';

export const load = async () => {
redirect(301, '/redirect2');
};
5 changes: 5 additions & 0 deletions ...ackages/e2e-tests/test-applications/sveltekit-2-kit-tracing/src/routes/redirect2/+page.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
import { redirect } from '@sveltejs/kit';

export const load = async () => {
redirect(301, '/users/789');
};
6 changes: 6 additions & 0 deletions ...ts/test-applications/sveltekit-2-kit-tracing/src/routes/server-load-error/+page.server.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
export const load = async () => {
throw new Error('Server Load Error');
return {
msg: 'Hello World',
};
};
9 changes: 9 additions & 0 deletions ...tests/test-applications/sveltekit-2-kit-tracing/src/routes/server-load-error/+page.svelte
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
<script lang="ts">
export let data
</script>

<h1>Server load error</h1>

<p>
Message: {data.msg}
</p>
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): Add Compatibility for builtin SvelteKit Tracing#17423

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
Lms24 merged 16 commits into from
Aug 27, 2025
Merged

feat(sveltekit): Add Compatibility for builtin SvelteKit Tracing #17423

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
3993737
ref(sveltekit): Handle SvelteKit-generated spans in `sentryHandle`
Lms24 Aug 14, 2025
371fe0c
simplify
Lms24 Aug 14, 2025
9c7f66d
2.31.0
Lms24 Aug 15, 2025
bb028e1
process kit spans
Lms24 Aug 18, 2025
ea95125
wip but detect tracing config at SDK setup time
Lms24 Aug 19, 2025
c389a1f
comment
Lms24 Aug 20, 2025
e728084
global values injection plugin, add tests, adjust existing tests
Lms24 Aug 26, 2025
72cc4a9
don't auto-wrap load functions if kit-tracing is enabled
Lms24 Aug 26, 2025
529d718
add e2e test app with kit-tracing enabled
Lms24 Aug 26, 2025
b70134b
fix span name, origin inconsistencies
Lms24 Aug 26, 2025
927cbf6
lint and remove remote function test
Lms24 Aug 26, 2025
eebd5cc
remove tracing config runtime check, cleanup, move some files
Lms24 Aug 27, 2025
05091f5
lint
Lms24 Aug 27, 2025
cd9c441
fix failing unit test
Lms24 Aug 27, 2025
d265348
improve tracing check, optimize svelteKitSpansIntegration
Lms24 Aug 27, 2025
87c4109
review suggestions, comments, revert kitSpansIntegrations optimizatio…
Lms24 Aug 27, 2025
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
15 changes: 15 additions & 0 deletions dev-packages/e2e-tests/test-applications/sveltekit-2-kit-tracing/.gitignore
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
.DS_Store
node_modules
/build
/.svelte-kit
/package
.env
.env.*
!.env.example
vite.config.js.timestamp-*
vite.config.ts.timestamp-*

#temporarily excluding my remote function routes. To be removed with the next PR:
./src/routes/remote-functions/data.remote.ts
./src/routes/remote-functions/+page.svelte
./tests/tracing.remote-functions.ts
2 changes: 2 additions & 0 deletions dev-packages/e2e-tests/test-applications/sveltekit-2-kit-tracing/.npmrc
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
@sentry:registry=http://127.0.0.1:4873
@sentry-internal:registry=http://127.0.0.1:4873
41 changes: 41 additions & 0 deletions dev-packages/e2e-tests/test-applications/sveltekit-2-kit-tracing/README.md
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
# create-svelte

Everything you need to build a Svelte project, powered by
[`create-svelte`](https://github.com/sveltejs/kit/tree/main/packages/create-svelte).

## Creating a project

If you're seeing this, you've probably already done this step. Congrats!

```bash
# create a new project in the current directory
npm create svelte@latest

# create a new project in my-app
npm create svelte@latest my-app
```

## Developing

Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a
development server:

```bash
npm run dev

# or start the server and open the app in a new browser tab
npm run dev -- --open
```

## Building

To create a production version of your app:

```bash
npm run build
```

You can preview the production build with `npm run preview`.

> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target
> environment.
37 changes: 37 additions & 0 deletions dev-packages/e2e-tests/test-applications/sveltekit-2-kit-tracing/package.json
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
{
"name": "sveltekit-2-kit-tracing",
"version": "0.0.1",
"private": true,
"scripts": {
"dev": "vite dev",
"build": "vite build",
"preview": "vite preview",
"proxy": "node start-event-proxy.mjs",
"clean": "npx rimraf node_modules pnpm-lock.yaml",
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
"test:prod": "TEST_ENV=production playwright test",
"test:build": "pnpm install && pnpm build",
"test:assert": "pnpm test:prod"
},
"dependencies": {
"@sentry/sveltekit": "latest || *",
"@spotlightjs/spotlight": "2.0.0-alpha.1"
},
"devDependencies": {
"@playwright/test": "~1.53.2",
"@sentry-internal/test-utils": "link:../../../test-utils",
"@sveltejs/adapter-node": "^5.3.1",
"@sveltejs/kit": "^2.31.0",
"@sveltejs/vite-plugin-svelte": "^6.1.3",
"svelte": "^5.38.3",
"svelte-check": "^4.3.1",
"tslib": "^2.4.1",
"typescript": "^5.0.0",
"vite": "^7.1.3"
},
"type": "module",
"volta": {
"extends": "../../package.json"
}
}
8 changes: 8 additions & 0 deletions dev-packages/e2e-tests/test-applications/sveltekit-2-kit-tracing/playwright.config.mjs
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
import { getPlaywrightConfig } from '@sentry-internal/test-utils';

const config = getPlaywrightConfig({
startCommand: 'ORIGIN=http://localhost:3030 node ./build/index.js',
port: 3030,
});

export default config;
13 changes: 13 additions & 0 deletions dev-packages/e2e-tests/test-applications/sveltekit-2-kit-tracing/src/app.d.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
// See https://kit.svelte.dev/docs/types#app
// for information about these interfaces
declare global {
namespace App {
// interface Error {}
// interface Locals {}
// interface PageData {}
// interface PageState {}
// interface Platform {}
}
}

export {};
12 changes: 12 additions & 0 deletions dev-packages/e2e-tests/test-applications/sveltekit-2-kit-tracing/src/app.html
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
%sveltekit.head%
</head>
<body data-sveltekit-preload-data="hover">
<div style="display: contents">%sveltekit.body%</div>
</body>
</html>
23 changes: 23 additions & 0 deletions dev-packages/e2e-tests/test-applications/sveltekit-2-kit-tracing/src/hooks.client.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
import { env } from '$env/dynamic/public';
import * as Sentry from '@sentry/sveltekit';
import * as Spotlight from '@spotlightjs/spotlight';

Sentry.init({
environment: 'qa', // dynamic sampling bias to keep transactions
dsn: env.PUBLIC_E2E_TEST_DSN,
debug: !!env.PUBLIC_DEBUG,
tunnel: `http://localhost:3031/`, // proxy server
tracesSampleRate: 1.0,
});

const myErrorHandler = ({ error, event }: any) => {
console.error('An error occurred on the client side:', error, event);
};

export const handleError = Sentry.handleErrorWithSentry(myErrorHandler);

if (import.meta.env.DEV) {
Spotlight.init({
injectImmediately: true,
});
}
12 changes: 12 additions & 0 deletions dev-packages/e2e-tests/test-applications/sveltekit-2-kit-tracing/src/hooks.server.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
import * as Sentry from '@sentry/sveltekit';
import { setupSidecar } from '@spotlightjs/spotlight/sidecar';
import { sequence } from '@sveltejs/kit/hooks';

// not logging anything to console to avoid noise in the test output
export const handleError = Sentry.handleErrorWithSentry(() => {});

export const handle = sequence(Sentry.sentryHandle());

if (import.meta.env.DEV) {
setupSidecar();
}
11 changes: 11 additions & 0 deletions ...ackages/e2e-tests/test-applications/sveltekit-2-kit-tracing/src/instrumentation.server.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
import * as Sentry from '@sentry/sveltekit';
import { E2E_TEST_DSN } from '$env/static/private';

Sentry.init({
environment: 'qa', // dynamic sampling bias to keep transactions
dsn: E2E_TEST_DSN,
debug: !!process.env.DEBUG,
tunnel: `http://localhost:3031/`, // proxy server
tracesSampleRate: 1.0,
spotlight: import.meta.env.DEV,
});
15 changes: 15 additions & 0 deletions dev-packages/e2e-tests/test-applications/sveltekit-2-kit-tracing/src/routes/+layout.svelte
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
<script lang="ts">
import { onMount } from "svelte";

onMount(() => {
// Indicate that the SvelteKit app was hydrated
document.body.classList.add("hydrated");
});


</script>

<h1>Sveltekit E2E Test app</h1>
<div data-sveltekit-preload-data="off">
<slot></slot>
</div>
47 changes: 47 additions & 0 deletions dev-packages/e2e-tests/test-applications/sveltekit-2-kit-tracing/src/routes/+page.svelte
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
<h1>Welcome to SvelteKit 2 with Svelte 5!</h1>
<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>

<ul>
<li>
<a href="/client-error">Client error</a>
</li>
<li>
<a href="/universal-load-error">Universal Load error</a>
</li>
<li>
<a href="/server-load-error">Server Load error</a>
</li>
<li>
<a href="/server-route-error">Server Route error</a>
</li>
<li>
<a id="routeWithParamsLink" href="/users/123abc">Route with Params</a>
</li>
<li>
<a href="/users">Route with Server Load</a>
</li>
<li>
<a href="/universal-load-fetch">Route with fetch in universal load</a>
</li>
<li>
<a id="redirectLink" href="/redirect1">Redirect</a>
</li>
<li>
<a href="/server-load-fetch">Route with nested fetch in server load</a>
</li>
<li>
<a href="/nav1">Nav 1</a>
</li>
<li>
<a href="/nav2">Nav 2</a>
</li>
<li>
<a href="components">Component Tracking</a>
</li>
<li>
<a href="/form-action">Form Action</a>
</li>
<li>
<a href="/remote-functions">Remote Functions</a>
</li>
</ul>
3 changes: 3 additions & 0 deletions ...kages/e2e-tests/test-applications/sveltekit-2-kit-tracing/src/routes/api/users/+server.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
export const GET = () => {
return new Response(JSON.stringify({ users: ['alice', 'bob', 'carol'] }));
};
5 changes: 5 additions & 0 deletions ...s/e2e-tests/test-applications/sveltekit-2-kit-tracing/src/routes/building/+page.server.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
import type { PageServerLoad } from './$types';

export const load = (async _event => {
return { name: 'building (server)' };
}) satisfies PageServerLoad;
21 changes: 21 additions & 0 deletions ...ages/e2e-tests/test-applications/sveltekit-2-kit-tracing/src/routes/building/+page.svelte
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
<script lang="ts">
import * as Sentry from '@sentry/sveltekit';

async function getSentryData() {
Sentry.startSpan({
name: 'Example Frontend Span',
}, async () => {
const res = await fetch('/sentry-example');
if (!res.ok) {
throw new Error('Sentry Example Frontend Error');
}
})
}
</script>

<h1>Check Build</h1>

<p>
This route only exists to check that Typescript definitions
and auto instrumentation are working when the project is built.
</p>
5 changes: 5 additions & 0 deletions ...packages/e2e-tests/test-applications/sveltekit-2-kit-tracing/src/routes/building/+page.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
import type { PageLoad } from './$types';

export const load = (async _event => {
return { name: 'building' };
}) satisfies PageLoad;
9 changes: 9 additions & 0 deletions .../e2e-tests/test-applications/sveltekit-2-kit-tracing/src/routes/client-error/+page.svelte
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
<script lang="ts">
function throwError() {
throw new Error('Click Error');
}
</script>

<h1>Client error</h1>

<button on:click={throwError}>Throw error</button>
15 changes: 15 additions & 0 deletions ...es/e2e-tests/test-applications/sveltekit-2-kit-tracing/src/routes/components/+page.svelte
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
<script>
import * as Sentry from '@sentry/sveltekit';

import Component1 from "./Component1.svelte";
import Component2 from "./Component2.svelte";
import Component3 from "./Component3.svelte";

Sentry.trackComponent({componentName: 'components/+page'})

</script>
<h2>Demonstrating Component Tracking</h2>

<Component1></Component1>
<Component2></Component2>
<Component3></Component3>
10 changes: 10 additions & 0 deletions ...e-tests/test-applications/sveltekit-2-kit-tracing/src/routes/components/Component1.svelte
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
<script>
import Component2 from "./Component2.svelte";
import {trackComponent} from '@sentry/sveltekit';

trackComponent({componentName: 'Component1'});

</script>
<h3>Howdy, I'm component 1</h3>

<Component2></Component2>
9 changes: 9 additions & 0 deletions ...e-tests/test-applications/sveltekit-2-kit-tracing/src/routes/components/Component2.svelte
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
<script>
import Component3 from "./Component3.svelte";
import {trackComponent} from '@sentry/sveltekit';

trackComponent({componentName: 'Component2'});
</script>
<h3>Howdy, I'm component 2</h3>

<Component3></Component3>
6 changes: 6 additions & 0 deletions ...e-tests/test-applications/sveltekit-2-kit-tracing/src/routes/components/Component3.svelte
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
<script lang="ts">
import * as Sentry from '@sentry/sveltekit';
Sentry.trackComponent({componentName: 'Component3'});
</script>

<h3>Howdy, I'm component 3</h3>
7 changes: 7 additions & 0 deletions ...2e-tests/test-applications/sveltekit-2-kit-tracing/src/routes/form-action/+page.server.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
export const actions = {
default: async ({ request }) => {
const formData = await request.formData();
const name = formData.get('name');
return { name };
},
};
15 changes: 15 additions & 0 deletions ...s/e2e-tests/test-applications/sveltekit-2-kit-tracing/src/routes/form-action/+page.svelte
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
<script>
import { enhance } from '$app/forms';

const { data, form } = $props();
</script>

<form method="post" use:enhance>
<label for="name">Name:</label>
<input id="inputName" type="text" name="name" />
<button id="buttonSubmit" type="submit">Submit</button>
</form>

{#if form?.name}
<p>Hello {form.name}</p>
{/if}
1 change: 1 addition & 0 deletions ...packages/e2e-tests/test-applications/sveltekit-2-kit-tracing/src/routes/nav1/+page.svelte
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
<h1>Navigation 1</h1>
1 change: 1 addition & 0 deletions ...packages/e2e-tests/test-applications/sveltekit-2-kit-tracing/src/routes/nav2/+page.svelte
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
<h1>Navigation 2</h1>
5 changes: 5 additions & 0 deletions ...ackages/e2e-tests/test-applications/sveltekit-2-kit-tracing/src/routes/redirect1/+page.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
import { redirect } from '@sveltejs/kit';

export const load = async () => {
redirect(301, '/redirect2');
};
5 changes: 5 additions & 0 deletions ...ackages/e2e-tests/test-applications/sveltekit-2-kit-tracing/src/routes/redirect2/+page.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
import { redirect } from '@sveltejs/kit';

export const load = async () => {
redirect(301, '/users/789');
};
6 changes: 6 additions & 0 deletions ...ts/test-applications/sveltekit-2-kit-tracing/src/routes/server-load-error/+page.server.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
export const load = async () => {
throw new Error('Server Load Error');
return {
msg: 'Hello World',
};
};
9 changes: 9 additions & 0 deletions ...tests/test-applications/sveltekit-2-kit-tracing/src/routes/server-load-error/+page.svelte
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
<script lang="ts">
export let data
</script>

<h1>Server load error</h1>

<p>
Message: {data.msg}
</p>
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): Add Compatibility for builtin SvelteKit Tracing#17423

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
Lms24 merged 16 commits into from
Aug 27, 2025
Merged

feat(sveltekit): Add Compatibility for builtin SvelteKit Tracing #17423

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
3993737
ref(sveltekit): Handle SvelteKit-generated spans in `sentryHandle`
Lms24 Aug 14, 2025
371fe0c
simplify
Lms24 Aug 14, 2025
9c7f66d
2.31.0
Lms24 Aug 15, 2025
bb028e1
process kit spans
Lms24 Aug 18, 2025
ea95125
wip but detect tracing config at SDK setup time
Lms24 Aug 19, 2025
c389a1f
comment
Lms24 Aug 20, 2025
e728084
global values injection plugin, add tests, adjust existing tests
Lms24 Aug 26, 2025
72cc4a9
don't auto-wrap load functions if kit-tracing is enabled
Lms24 Aug 26, 2025
529d718
add e2e test app with kit-tracing enabled
Lms24 Aug 26, 2025
b70134b
fix span name, origin inconsistencies
Lms24 Aug 26, 2025
927cbf6
lint and remove remote function test
Lms24 Aug 26, 2025
eebd5cc
remove tracing config runtime check, cleanup, move some files
Lms24 Aug 27, 2025
05091f5
lint
Lms24 Aug 27, 2025
cd9c441
fix failing unit test
Lms24 Aug 27, 2025
d265348
improve tracing check, optimize svelteKitSpansIntegration
Lms24 Aug 27, 2025
87c4109
review suggestions, comments, revert kitSpansIntegrations optimizatio…
Lms24 Aug 27, 2025
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
15 changes: 15 additions & 0 deletions dev-packages/e2e-tests/test-applications/sveltekit-2-kit-tracing/.gitignore
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
.DS_Store
node_modules
/build
/.svelte-kit
/package
.env
.env.*
!.env.example
vite.config.js.timestamp-*
vite.config.ts.timestamp-*

#temporarily excluding my remote function routes. To be removed with the next PR:
./src/routes/remote-functions/data.remote.ts
./src/routes/remote-functions/+page.svelte
./tests/tracing.remote-functions.ts
2 changes: 2 additions & 0 deletions dev-packages/e2e-tests/test-applications/sveltekit-2-kit-tracing/.npmrc
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
@sentry:registry=http://127.0.0.1:4873
@sentry-internal:registry=http://127.0.0.1:4873
41 changes: 41 additions & 0 deletions dev-packages/e2e-tests/test-applications/sveltekit-2-kit-tracing/README.md
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
# create-svelte

Everything you need to build a Svelte project, powered by
[`create-svelte`](https://github.com/sveltejs/kit/tree/main/packages/create-svelte).

## Creating a project

If you're seeing this, you've probably already done this step. Congrats!

```bash
# create a new project in the current directory
npm create svelte@latest

# create a new project in my-app
npm create svelte@latest my-app
```

## Developing

Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a
development server:

```bash
npm run dev

# or start the server and open the app in a new browser tab
npm run dev -- --open
```

## Building

To create a production version of your app:

```bash
npm run build
```

You can preview the production build with `npm run preview`.

> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target
> environment.
37 changes: 37 additions & 0 deletions dev-packages/e2e-tests/test-applications/sveltekit-2-kit-tracing/package.json
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
{
"name": "sveltekit-2-kit-tracing",
"version": "0.0.1",
"private": true,
"scripts": {
"dev": "vite dev",
"build": "vite build",
"preview": "vite preview",
"proxy": "node start-event-proxy.mjs",
"clean": "npx rimraf node_modules pnpm-lock.yaml",
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
"test:prod": "TEST_ENV=production playwright test",
"test:build": "pnpm install && pnpm build",
"test:assert": "pnpm test:prod"
},
"dependencies": {
"@sentry/sveltekit": "latest || *",
"@spotlightjs/spotlight": "2.0.0-alpha.1"
},
"devDependencies": {
"@playwright/test": "~1.53.2",
"@sentry-internal/test-utils": "link:../../../test-utils",
"@sveltejs/adapter-node": "^5.3.1",
"@sveltejs/kit": "^2.31.0",
"@sveltejs/vite-plugin-svelte": "^6.1.3",
"svelte": "^5.38.3",
"svelte-check": "^4.3.1",
"tslib": "^2.4.1",
"typescript": "^5.0.0",
"vite": "^7.1.3"
},
"type": "module",
"volta": {
"extends": "../../package.json"
}
}
8 changes: 8 additions & 0 deletions dev-packages/e2e-tests/test-applications/sveltekit-2-kit-tracing/playwright.config.mjs
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
import { getPlaywrightConfig } from '@sentry-internal/test-utils';

const config = getPlaywrightConfig({
startCommand: 'ORIGIN=http://localhost:3030 node ./build/index.js',
port: 3030,
});

export default config;
13 changes: 13 additions & 0 deletions dev-packages/e2e-tests/test-applications/sveltekit-2-kit-tracing/src/app.d.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
// See https://kit.svelte.dev/docs/types#app
// for information about these interfaces
declare global {
namespace App {
// interface Error {}
// interface Locals {}
// interface PageData {}
// interface PageState {}
// interface Platform {}
}
}

export {};
12 changes: 12 additions & 0 deletions dev-packages/e2e-tests/test-applications/sveltekit-2-kit-tracing/src/app.html
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
%sveltekit.head%
</head>
<body data-sveltekit-preload-data="hover">
<div style="display: contents">%sveltekit.body%</div>
</body>
</html>
23 changes: 23 additions & 0 deletions dev-packages/e2e-tests/test-applications/sveltekit-2-kit-tracing/src/hooks.client.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
import { env } from '$env/dynamic/public';
import * as Sentry from '@sentry/sveltekit';
import * as Spotlight from '@spotlightjs/spotlight';

Sentry.init({
environment: 'qa', // dynamic sampling bias to keep transactions
dsn: env.PUBLIC_E2E_TEST_DSN,
debug: !!env.PUBLIC_DEBUG,
tunnel: `http://localhost:3031/`, // proxy server
tracesSampleRate: 1.0,
});

const myErrorHandler = ({ error, event }: any) => {
console.error('An error occurred on the client side:', error, event);
};

export const handleError = Sentry.handleErrorWithSentry(myErrorHandler);

if (import.meta.env.DEV) {
Spotlight.init({
injectImmediately: true,
});
}
12 changes: 12 additions & 0 deletions dev-packages/e2e-tests/test-applications/sveltekit-2-kit-tracing/src/hooks.server.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
import * as Sentry from '@sentry/sveltekit';
import { setupSidecar } from '@spotlightjs/spotlight/sidecar';
import { sequence } from '@sveltejs/kit/hooks';

// not logging anything to console to avoid noise in the test output
export const handleError = Sentry.handleErrorWithSentry(() => {});

export const handle = sequence(Sentry.sentryHandle());

if (import.meta.env.DEV) {
setupSidecar();
}
11 changes: 11 additions & 0 deletions ...ackages/e2e-tests/test-applications/sveltekit-2-kit-tracing/src/instrumentation.server.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
import * as Sentry from '@sentry/sveltekit';
import { E2E_TEST_DSN } from '$env/static/private';

Sentry.init({
environment: 'qa', // dynamic sampling bias to keep transactions
dsn: E2E_TEST_DSN,
debug: !!process.env.DEBUG,
tunnel: `http://localhost:3031/`, // proxy server
tracesSampleRate: 1.0,
spotlight: import.meta.env.DEV,
});
15 changes: 15 additions & 0 deletions dev-packages/e2e-tests/test-applications/sveltekit-2-kit-tracing/src/routes/+layout.svelte
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
<script lang="ts">
import { onMount } from "svelte";

onMount(() => {
// Indicate that the SvelteKit app was hydrated
document.body.classList.add("hydrated");
});


</script>

<h1>Sveltekit E2E Test app</h1>
<div data-sveltekit-preload-data="off">
<slot></slot>
</div>
47 changes: 47 additions & 0 deletions dev-packages/e2e-tests/test-applications/sveltekit-2-kit-tracing/src/routes/+page.svelte
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
<h1>Welcome to SvelteKit 2 with Svelte 5!</h1>
<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>

<ul>
<li>
<a href="/client-error">Client error</a>
</li>
<li>
<a href="/universal-load-error">Universal Load error</a>
</li>
<li>
<a href="/server-load-error">Server Load error</a>
</li>
<li>
<a href="/server-route-error">Server Route error</a>
</li>
<li>
<a id="routeWithParamsLink" href="/users/123abc">Route with Params</a>
</li>
<li>
<a href="/users">Route with Server Load</a>
</li>
<li>
<a href="/universal-load-fetch">Route with fetch in universal load</a>
</li>
<li>
<a id="redirectLink" href="/redirect1">Redirect</a>
</li>
<li>
<a href="/server-load-fetch">Route with nested fetch in server load</a>
</li>
<li>
<a href="/nav1">Nav 1</a>
</li>
<li>
<a href="/nav2">Nav 2</a>
</li>
<li>
<a href="components">Component Tracking</a>
</li>
<li>
<a href="/form-action">Form Action</a>
</li>
<li>
<a href="/remote-functions">Remote Functions</a>
</li>
</ul>
3 changes: 3 additions & 0 deletions ...kages/e2e-tests/test-applications/sveltekit-2-kit-tracing/src/routes/api/users/+server.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
export const GET = () => {
return new Response(JSON.stringify({ users: ['alice', 'bob', 'carol'] }));
};
5 changes: 5 additions & 0 deletions ...s/e2e-tests/test-applications/sveltekit-2-kit-tracing/src/routes/building/+page.server.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
import type { PageServerLoad } from './$types';

export const load = (async _event => {
return { name: 'building (server)' };
}) satisfies PageServerLoad;
21 changes: 21 additions & 0 deletions ...ages/e2e-tests/test-applications/sveltekit-2-kit-tracing/src/routes/building/+page.svelte
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
<script lang="ts">
import * as Sentry from '@sentry/sveltekit';

async function getSentryData() {
Sentry.startSpan({
name: 'Example Frontend Span',
}, async () => {
const res = await fetch('/sentry-example');
if (!res.ok) {
throw new Error('Sentry Example Frontend Error');
}
})
}
</script>

<h1>Check Build</h1>

<p>
This route only exists to check that Typescript definitions
and auto instrumentation are working when the project is built.
</p>
5 changes: 5 additions & 0 deletions ...packages/e2e-tests/test-applications/sveltekit-2-kit-tracing/src/routes/building/+page.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
import type { PageLoad } from './$types';

export const load = (async _event => {
return { name: 'building' };
}) satisfies PageLoad;
9 changes: 9 additions & 0 deletions .../e2e-tests/test-applications/sveltekit-2-kit-tracing/src/routes/client-error/+page.svelte
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
<script lang="ts">
function throwError() {
throw new Error('Click Error');
}
</script>

<h1>Client error</h1>

<button on:click={throwError}>Throw error</button>
15 changes: 15 additions & 0 deletions ...es/e2e-tests/test-applications/sveltekit-2-kit-tracing/src/routes/components/+page.svelte
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
<script>
import * as Sentry from '@sentry/sveltekit';

import Component1 from "./Component1.svelte";
import Component2 from "./Component2.svelte";
import Component3 from "./Component3.svelte";

Sentry.trackComponent({componentName: 'components/+page'})

</script>
<h2>Demonstrating Component Tracking</h2>

<Component1></Component1>
<Component2></Component2>
<Component3></Component3>
10 changes: 10 additions & 0 deletions ...e-tests/test-applications/sveltekit-2-kit-tracing/src/routes/components/Component1.svelte
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
<script>
import Component2 from "./Component2.svelte";
import {trackComponent} from '@sentry/sveltekit';

trackComponent({componentName: 'Component1'});

</script>
<h3>Howdy, I'm component 1</h3>

<Component2></Component2>
9 changes: 9 additions & 0 deletions ...e-tests/test-applications/sveltekit-2-kit-tracing/src/routes/components/Component2.svelte
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
<script>
import Component3 from "./Component3.svelte";
import {trackComponent} from '@sentry/sveltekit';

trackComponent({componentName: 'Component2'});
</script>
<h3>Howdy, I'm component 2</h3>

<Component3></Component3>
6 changes: 6 additions & 0 deletions ...e-tests/test-applications/sveltekit-2-kit-tracing/src/routes/components/Component3.svelte
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
<script lang="ts">
import * as Sentry from '@sentry/sveltekit';
Sentry.trackComponent({componentName: 'Component3'});
</script>

<h3>Howdy, I'm component 3</h3>
7 changes: 7 additions & 0 deletions ...2e-tests/test-applications/sveltekit-2-kit-tracing/src/routes/form-action/+page.server.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
export const actions = {
default: async ({ request }) => {
const formData = await request.formData();
const name = formData.get('name');
return { name };
},
};
15 changes: 15 additions & 0 deletions ...s/e2e-tests/test-applications/sveltekit-2-kit-tracing/src/routes/form-action/+page.svelte
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
<script>
import { enhance } from '$app/forms';

const { data, form } = $props();
</script>

<form method="post" use:enhance>
<label for="name">Name:</label>
<input id="inputName" type="text" name="name" />
<button id="buttonSubmit" type="submit">Submit</button>
</form>

{#if form?.name}
<p>Hello {form.name}</p>
{/if}
1 change: 1 addition & 0 deletions ...packages/e2e-tests/test-applications/sveltekit-2-kit-tracing/src/routes/nav1/+page.svelte
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
<h1>Navigation 1</h1>
1 change: 1 addition & 0 deletions ...packages/e2e-tests/test-applications/sveltekit-2-kit-tracing/src/routes/nav2/+page.svelte
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
<h1>Navigation 2</h1>
5 changes: 5 additions & 0 deletions ...ackages/e2e-tests/test-applications/sveltekit-2-kit-tracing/src/routes/redirect1/+page.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
import { redirect } from '@sveltejs/kit';

export const load = async () => {
redirect(301, '/redirect2');
};
5 changes: 5 additions & 0 deletions ...ackages/e2e-tests/test-applications/sveltekit-2-kit-tracing/src/routes/redirect2/+page.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
import { redirect } from '@sveltejs/kit';

export const load = async () => {
redirect(301, '/users/789');
};
6 changes: 6 additions & 0 deletions ...ts/test-applications/sveltekit-2-kit-tracing/src/routes/server-load-error/+page.server.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
export const load = async () => {
throw new Error('Server Load Error');
return {
msg: 'Hello World',
};
};
9 changes: 9 additions & 0 deletions ...tests/test-applications/sveltekit-2-kit-tracing/src/routes/server-load-error/+page.svelte
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
<script lang="ts">
export let data
</script>

<h1>Server load error</h1>

<p>
Message: {data.msg}
</p>
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): Add Compatibility for builtin SvelteKit Tracing#17423

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
Lms24 merged 16 commits into from
Aug 27, 2025
Merged

feat(sveltekit): Add Compatibility for builtin SvelteKit Tracing #17423

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
3993737
ref(sveltekit): Handle SvelteKit-generated spans in `sentryHandle`
Lms24 Aug 14, 2025
371fe0c
simplify
Lms24 Aug 14, 2025
9c7f66d
2.31.0
Lms24 Aug 15, 2025
bb028e1
process kit spans
Lms24 Aug 18, 2025
ea95125
wip but detect tracing config at SDK setup time
Lms24 Aug 19, 2025
c389a1f
comment
Lms24 Aug 20, 2025
e728084
global values injection plugin, add tests, adjust existing tests
Lms24 Aug 26, 2025
72cc4a9
don't auto-wrap load functions if kit-tracing is enabled
Lms24 Aug 26, 2025
529d718
add e2e test app with kit-tracing enabled
Lms24 Aug 26, 2025
b70134b
fix span name, origin inconsistencies
Lms24 Aug 26, 2025
927cbf6
lint and remove remote function test
Lms24 Aug 26, 2025
eebd5cc
remove tracing config runtime check, cleanup, move some files
Lms24 Aug 27, 2025
05091f5
lint
Lms24 Aug 27, 2025
cd9c441
fix failing unit test
Lms24 Aug 27, 2025
d265348
improve tracing check, optimize svelteKitSpansIntegration
Lms24 Aug 27, 2025
87c4109
review suggestions, comments, revert kitSpansIntegrations optimizatio…
Lms24 Aug 27, 2025
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
15 changes: 15 additions & 0 deletions dev-packages/e2e-tests/test-applications/sveltekit-2-kit-tracing/.gitignore
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
.DS_Store
node_modules
/build
/.svelte-kit
/package
.env
.env.*
!.env.example
vite.config.js.timestamp-*
vite.config.ts.timestamp-*

#temporarily excluding my remote function routes. To be removed with the next PR:
./src/routes/remote-functions/data.remote.ts
./src/routes/remote-functions/+page.svelte
./tests/tracing.remote-functions.ts
2 changes: 2 additions & 0 deletions dev-packages/e2e-tests/test-applications/sveltekit-2-kit-tracing/.npmrc
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
@sentry:registry=http://127.0.0.1:4873
@sentry-internal:registry=http://127.0.0.1:4873
41 changes: 41 additions & 0 deletions dev-packages/e2e-tests/test-applications/sveltekit-2-kit-tracing/README.md
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
# create-svelte

Everything you need to build a Svelte project, powered by
[`create-svelte`](https://github.com/sveltejs/kit/tree/main/packages/create-svelte).

## Creating a project

If you're seeing this, you've probably already done this step. Congrats!

```bash
# create a new project in the current directory
npm create svelte@latest

# create a new project in my-app
npm create svelte@latest my-app
```

## Developing

Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a
development server:

```bash
npm run dev

# or start the server and open the app in a new browser tab
npm run dev -- --open
```

## Building

To create a production version of your app:

```bash
npm run build
```

You can preview the production build with `npm run preview`.

> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target
> environment.
37 changes: 37 additions & 0 deletions dev-packages/e2e-tests/test-applications/sveltekit-2-kit-tracing/package.json
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
{
"name": "sveltekit-2-kit-tracing",
"version": "0.0.1",
"private": true,
"scripts": {
"dev": "vite dev",
"build": "vite build",
"preview": "vite preview",
"proxy": "node start-event-proxy.mjs",
"clean": "npx rimraf node_modules pnpm-lock.yaml",
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
"test:prod": "TEST_ENV=production playwright test",
"test:build": "pnpm install && pnpm build",
"test:assert": "pnpm test:prod"
},
"dependencies": {
"@sentry/sveltekit": "latest || *",
"@spotlightjs/spotlight": "2.0.0-alpha.1"
},
"devDependencies": {
"@playwright/test": "~1.53.2",
"@sentry-internal/test-utils": "link:../../../test-utils",
"@sveltejs/adapter-node": "^5.3.1",
"@sveltejs/kit": "^2.31.0",
"@sveltejs/vite-plugin-svelte": "^6.1.3",
"svelte": "^5.38.3",
"svelte-check": "^4.3.1",
"tslib": "^2.4.1",
"typescript": "^5.0.0",
"vite": "^7.1.3"
},
"type": "module",
"volta": {
"extends": "../../package.json"
}
}
8 changes: 8 additions & 0 deletions dev-packages/e2e-tests/test-applications/sveltekit-2-kit-tracing/playwright.config.mjs
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
import { getPlaywrightConfig } from '@sentry-internal/test-utils';

const config = getPlaywrightConfig({
startCommand: 'ORIGIN=http://localhost:3030 node ./build/index.js',
port: 3030,
});

export default config;
13 changes: 13 additions & 0 deletions dev-packages/e2e-tests/test-applications/sveltekit-2-kit-tracing/src/app.d.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
// See https://kit.svelte.dev/docs/types#app
// for information about these interfaces
declare global {
namespace App {
// interface Error {}
// interface Locals {}
// interface PageData {}
// interface PageState {}
// interface Platform {}
}
}

export {};
12 changes: 12 additions & 0 deletions dev-packages/e2e-tests/test-applications/sveltekit-2-kit-tracing/src/app.html
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
%sveltekit.head%
</head>
<body data-sveltekit-preload-data="hover">
<div style="display: contents">%sveltekit.body%</div>
</body>
</html>
23 changes: 23 additions & 0 deletions dev-packages/e2e-tests/test-applications/sveltekit-2-kit-tracing/src/hooks.client.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
import { env } from '$env/dynamic/public';
import * as Sentry from '@sentry/sveltekit';
import * as Spotlight from '@spotlightjs/spotlight';

Sentry.init({
environment: 'qa', // dynamic sampling bias to keep transactions
dsn: env.PUBLIC_E2E_TEST_DSN,
debug: !!env.PUBLIC_DEBUG,
tunnel: `http://localhost:3031/`, // proxy server
tracesSampleRate: 1.0,
});

const myErrorHandler = ({ error, event }: any) => {
console.error('An error occurred on the client side:', error, event);
};

export const handleError = Sentry.handleErrorWithSentry(myErrorHandler);

if (import.meta.env.DEV) {
Spotlight.init({
injectImmediately: true,
});
}
12 changes: 12 additions & 0 deletions dev-packages/e2e-tests/test-applications/sveltekit-2-kit-tracing/src/hooks.server.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
import * as Sentry from '@sentry/sveltekit';
import { setupSidecar } from '@spotlightjs/spotlight/sidecar';
import { sequence } from '@sveltejs/kit/hooks';

// not logging anything to console to avoid noise in the test output
export const handleError = Sentry.handleErrorWithSentry(() => {});

export const handle = sequence(Sentry.sentryHandle());

if (import.meta.env.DEV) {
setupSidecar();
}
11 changes: 11 additions & 0 deletions ...ackages/e2e-tests/test-applications/sveltekit-2-kit-tracing/src/instrumentation.server.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
import * as Sentry from '@sentry/sveltekit';
import { E2E_TEST_DSN } from '$env/static/private';

Sentry.init({
environment: 'qa', // dynamic sampling bias to keep transactions
dsn: E2E_TEST_DSN,
debug: !!process.env.DEBUG,
tunnel: `http://localhost:3031/`, // proxy server
tracesSampleRate: 1.0,
spotlight: import.meta.env.DEV,
});
15 changes: 15 additions & 0 deletions dev-packages/e2e-tests/test-applications/sveltekit-2-kit-tracing/src/routes/+layout.svelte
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
<script lang="ts">
import { onMount } from "svelte";

onMount(() => {
// Indicate that the SvelteKit app was hydrated
document.body.classList.add("hydrated");
});


</script>

<h1>Sveltekit E2E Test app</h1>
<div data-sveltekit-preload-data="off">
<slot></slot>
</div>
47 changes: 47 additions & 0 deletions dev-packages/e2e-tests/test-applications/sveltekit-2-kit-tracing/src/routes/+page.svelte
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
<h1>Welcome to SvelteKit 2 with Svelte 5!</h1>
<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>

<ul>
<li>
<a href="/client-error">Client error</a>
</li>
<li>
<a href="/universal-load-error">Universal Load error</a>
</li>
<li>
<a href="/server-load-error">Server Load error</a>
</li>
<li>
<a href="/server-route-error">Server Route error</a>
</li>
<li>
<a id="routeWithParamsLink" href="/users/123abc">Route with Params</a>
</li>
<li>
<a href="/users">Route with Server Load</a>
</li>
<li>
<a href="/universal-load-fetch">Route with fetch in universal load</a>
</li>
<li>
<a id="redirectLink" href="/redirect1">Redirect</a>
</li>
<li>
<a href="/server-load-fetch">Route with nested fetch in server load</a>
</li>
<li>
<a href="/nav1">Nav 1</a>
</li>
<li>
<a href="/nav2">Nav 2</a>
</li>
<li>
<a href="components">Component Tracking</a>
</li>
<li>
<a href="/form-action">Form Action</a>
</li>
<li>
<a href="/remote-functions">Remote Functions</a>
</li>
</ul>
3 changes: 3 additions & 0 deletions ...kages/e2e-tests/test-applications/sveltekit-2-kit-tracing/src/routes/api/users/+server.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
export const GET = () => {
return new Response(JSON.stringify({ users: ['alice', 'bob', 'carol'] }));
};
5 changes: 5 additions & 0 deletions ...s/e2e-tests/test-applications/sveltekit-2-kit-tracing/src/routes/building/+page.server.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
import type { PageServerLoad } from './$types';

export const load = (async _event => {
return { name: 'building (server)' };
}) satisfies PageServerLoad;
21 changes: 21 additions & 0 deletions ...ages/e2e-tests/test-applications/sveltekit-2-kit-tracing/src/routes/building/+page.svelte
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
<script lang="ts">
import * as Sentry from '@sentry/sveltekit';

async function getSentryData() {
Sentry.startSpan({
name: 'Example Frontend Span',
}, async () => {
const res = await fetch('/sentry-example');
if (!res.ok) {
throw new Error('Sentry Example Frontend Error');
}
})
}
</script>

<h1>Check Build</h1>

<p>
This route only exists to check that Typescript definitions
and auto instrumentation are working when the project is built.
</p>
5 changes: 5 additions & 0 deletions ...packages/e2e-tests/test-applications/sveltekit-2-kit-tracing/src/routes/building/+page.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
import type { PageLoad } from './$types';

export const load = (async _event => {
return { name: 'building' };
}) satisfies PageLoad;
9 changes: 9 additions & 0 deletions .../e2e-tests/test-applications/sveltekit-2-kit-tracing/src/routes/client-error/+page.svelte
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
<script lang="ts">
function throwError() {
throw new Error('Click Error');
}
</script>

<h1>Client error</h1>

<button on:click={throwError}>Throw error</button>
15 changes: 15 additions & 0 deletions ...es/e2e-tests/test-applications/sveltekit-2-kit-tracing/src/routes/components/+page.svelte
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
<script>
import * as Sentry from '@sentry/sveltekit';

import Component1 from "./Component1.svelte";
import Component2 from "./Component2.svelte";
import Component3 from "./Component3.svelte";

Sentry.trackComponent({componentName: 'components/+page'})

</script>
<h2>Demonstrating Component Tracking</h2>

<Component1></Component1>
<Component2></Component2>
<Component3></Component3>
10 changes: 10 additions & 0 deletions ...e-tests/test-applications/sveltekit-2-kit-tracing/src/routes/components/Component1.svelte
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
<script>
import Component2 from "./Component2.svelte";
import {trackComponent} from '@sentry/sveltekit';

trackComponent({componentName: 'Component1'});

</script>
<h3>Howdy, I'm component 1</h3>

<Component2></Component2>
9 changes: 9 additions & 0 deletions ...e-tests/test-applications/sveltekit-2-kit-tracing/src/routes/components/Component2.svelte
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
<script>
import Component3 from "./Component3.svelte";
import {trackComponent} from '@sentry/sveltekit';

trackComponent({componentName: 'Component2'});
</script>
<h3>Howdy, I'm component 2</h3>

<Component3></Component3>
6 changes: 6 additions & 0 deletions ...e-tests/test-applications/sveltekit-2-kit-tracing/src/routes/components/Component3.svelte
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
<script lang="ts">
import * as Sentry from '@sentry/sveltekit';
Sentry.trackComponent({componentName: 'Component3'});
</script>

<h3>Howdy, I'm component 3</h3>
7 changes: 7 additions & 0 deletions ...2e-tests/test-applications/sveltekit-2-kit-tracing/src/routes/form-action/+page.server.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
export const actions = {
default: async ({ request }) => {
const formData = await request.formData();
const name = formData.get('name');
return { name };
},
};
15 changes: 15 additions & 0 deletions ...s/e2e-tests/test-applications/sveltekit-2-kit-tracing/src/routes/form-action/+page.svelte
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
<script>
import { enhance } from '$app/forms';

const { data, form } = $props();
</script>

<form method="post" use:enhance>
<label for="name">Name:</label>
<input id="inputName" type="text" name="name" />
<button id="buttonSubmit" type="submit">Submit</button>
</form>

{#if form?.name}
<p>Hello {form.name}</p>
{/if}
1 change: 1 addition & 0 deletions ...packages/e2e-tests/test-applications/sveltekit-2-kit-tracing/src/routes/nav1/+page.svelte
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
<h1>Navigation 1</h1>
1 change: 1 addition & 0 deletions ...packages/e2e-tests/test-applications/sveltekit-2-kit-tracing/src/routes/nav2/+page.svelte
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
<h1>Navigation 2</h1>
5 changes: 5 additions & 0 deletions ...ackages/e2e-tests/test-applications/sveltekit-2-kit-tracing/src/routes/redirect1/+page.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
import { redirect } from '@sveltejs/kit';

export const load = async () => {
redirect(301, '/redirect2');
};
5 changes: 5 additions & 0 deletions ...ackages/e2e-tests/test-applications/sveltekit-2-kit-tracing/src/routes/redirect2/+page.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
import { redirect } from '@sveltejs/kit';

export const load = async () => {
redirect(301, '/users/789');
};
6 changes: 6 additions & 0 deletions ...ts/test-applications/sveltekit-2-kit-tracing/src/routes/server-load-error/+page.server.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
export const load = async () => {
throw new Error('Server Load Error');
return {
msg: 'Hello World',
};
};
9 changes: 9 additions & 0 deletions ...tests/test-applications/sveltekit-2-kit-tracing/src/routes/server-load-error/+page.svelte
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
<script lang="ts">
export let data
</script>

<h1>Server load error</h1>

<p>
Message: {data.msg}
</p>
Loading
Loading