getsentry · Lms24 · Aug 27, 2025 · Aug 14, 2025 · Aug 14, 2025 · Aug 15, 2025
diff --git a/dev-packages/e2e-tests/test-applications/sveltekit-2-kit-tracing/.gitignore b/dev-packages/e2e-tests/test-applications/sveltekit-2-kit-tracing/.gitignore
@@ -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
diff --git a/dev-packages/e2e-tests/test-applications/sveltekit-2-kit-tracing/.npmrc b/dev-packages/e2e-tests/test-applications/sveltekit-2-kit-tracing/.npmrc
@@ -0,0 +1,2 @@
+@sentry:registry=http://127.0.0.1:4873
+@sentry-internal:registry=http://127.0.0.1:4873
diff --git a/dev-packages/e2e-tests/test-applications/sveltekit-2-kit-tracing/README.md b/dev-packages/e2e-tests/test-applications/sveltekit-2-kit-tracing/README.md
@@ -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.
diff --git a/dev-packages/e2e-tests/test-applications/sveltekit-2-kit-tracing/package.json b/dev-packages/e2e-tests/test-applications/sveltekit-2-kit-tracing/package.json
@@ -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"
+  }
+}
diff --git a/dev-packages/e2e-tests/test-applications/sveltekit-2-kit-tracing/playwright.config.mjs b/dev-packages/e2e-tests/test-applications/sveltekit-2-kit-tracing/playwright.config.mjs
@@ -0,0 +1,8 @@
+import { getPlaywrightConfig } from '@sentry-internal/test-utils';
+
+const config = getPlaywrightConfig({
+  startCommand: 'ORIGIN=http://localhost:3030 node ./build/index.js',
+  port: 3030,
+});
+
+export default config;
diff --git a/dev-packages/e2e-tests/test-applications/sveltekit-2-kit-tracing/src/app.d.ts b/dev-packages/e2e-tests/test-applications/sveltekit-2-kit-tracing/src/app.d.ts
@@ -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 {};
diff --git a/dev-packages/e2e-tests/test-applications/sveltekit-2-kit-tracing/src/app.html b/dev-packages/e2e-tests/test-applications/sveltekit-2-kit-tracing/src/app.html
@@ -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>
diff --git a/dev-packages/e2e-tests/test-applications/sveltekit-2-kit-tracing/src/hooks.client.ts b/dev-packages/e2e-tests/test-applications/sveltekit-2-kit-tracing/src/hooks.client.ts
@@ -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,
+  });
+}
diff --git a/dev-packages/e2e-tests/test-applications/sveltekit-2-kit-tracing/src/hooks.server.ts b/dev-packages/e2e-tests/test-applications/sveltekit-2-kit-tracing/src/hooks.server.ts
@@ -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();
+}
diff --git a/...ackages/e2e-tests/test-applications/sveltekit-2-kit-tracing/src/instrumentation.server.ts b/...ackages/e2e-tests/test-applications/sveltekit-2-kit-tracing/src/instrumentation.server.ts
@@ -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,
+});
diff --git a/dev-packages/e2e-tests/test-applications/sveltekit-2-kit-tracing/src/routes/+layout.svelte b/dev-packages/e2e-tests/test-applications/sveltekit-2-kit-tracing/src/routes/+layout.svelte
@@ -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>
diff --git a/dev-packages/e2e-tests/test-applications/sveltekit-2-kit-tracing/src/routes/+page.svelte b/dev-packages/e2e-tests/test-applications/sveltekit-2-kit-tracing/src/routes/+page.svelte
@@ -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>
diff --git a/...kages/e2e-tests/test-applications/sveltekit-2-kit-tracing/src/routes/api/users/+server.ts b/...kages/e2e-tests/test-applications/sveltekit-2-kit-tracing/src/routes/api/users/+server.ts
@@ -0,0 +1,3 @@
+export const GET = () => {
+  return new Response(JSON.stringify({ users: ['alice', 'bob', 'carol'] }));
+};
diff --git a/...s/e2e-tests/test-applications/sveltekit-2-kit-tracing/src/routes/building/+page.server.ts b/...s/e2e-tests/test-applications/sveltekit-2-kit-tracing/src/routes/building/+page.server.ts
@@ -0,0 +1,5 @@
+import type { PageServerLoad } from './$types';
+
+export const load = (async _event => {
+  return { name: 'building (server)' };
+}) satisfies PageServerLoad;
diff --git a/...ages/e2e-tests/test-applications/sveltekit-2-kit-tracing/src/routes/building/+page.svelte b/...ages/e2e-tests/test-applications/sveltekit-2-kit-tracing/src/routes/building/+page.svelte
@@ -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>
diff --git a/...packages/e2e-tests/test-applications/sveltekit-2-kit-tracing/src/routes/building/+page.ts b/...packages/e2e-tests/test-applications/sveltekit-2-kit-tracing/src/routes/building/+page.ts
@@ -0,0 +1,5 @@
+import type { PageLoad } from './$types';
+
+export const load = (async _event => {
+  return { name: 'building' };
+}) satisfies PageLoad;
diff --git a/.../e2e-tests/test-applications/sveltekit-2-kit-tracing/src/routes/client-error/+page.svelte b/.../e2e-tests/test-applications/sveltekit-2-kit-tracing/src/routes/client-error/+page.svelte
@@ -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>
diff --git a/...es/e2e-tests/test-applications/sveltekit-2-kit-tracing/src/routes/components/+page.svelte b/...es/e2e-tests/test-applications/sveltekit-2-kit-tracing/src/routes/components/+page.svelte
@@ -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>
diff --git a/...e-tests/test-applications/sveltekit-2-kit-tracing/src/routes/components/Component1.svelte b/...e-tests/test-applications/sveltekit-2-kit-tracing/src/routes/components/Component1.svelte
@@ -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>
diff --git a/...e-tests/test-applications/sveltekit-2-kit-tracing/src/routes/components/Component2.svelte b/...e-tests/test-applications/sveltekit-2-kit-tracing/src/routes/components/Component2.svelte
@@ -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>
diff --git a/...e-tests/test-applications/sveltekit-2-kit-tracing/src/routes/components/Component3.svelte b/...e-tests/test-applications/sveltekit-2-kit-tracing/src/routes/components/Component3.svelte
@@ -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>
diff --git a/...2e-tests/test-applications/sveltekit-2-kit-tracing/src/routes/form-action/+page.server.ts b/...2e-tests/test-applications/sveltekit-2-kit-tracing/src/routes/form-action/+page.server.ts
@@ -0,0 +1,7 @@
+export const actions = {
+  default: async ({ request }) => {
+    const formData = await request.formData();
+    const name = formData.get('name');
+    return { name };
+  },
+};
diff --git a/...s/e2e-tests/test-applications/sveltekit-2-kit-tracing/src/routes/form-action/+page.svelte b/...s/e2e-tests/test-applications/sveltekit-2-kit-tracing/src/routes/form-action/+page.svelte
@@ -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}
diff --git a/...packages/e2e-tests/test-applications/sveltekit-2-kit-tracing/src/routes/nav1/+page.svelte b/...packages/e2e-tests/test-applications/sveltekit-2-kit-tracing/src/routes/nav1/+page.svelte
@@ -0,0 +1 @@
+<h1>Navigation 1</h1>
diff --git a/...packages/e2e-tests/test-applications/sveltekit-2-kit-tracing/src/routes/nav2/+page.svelte b/...packages/e2e-tests/test-applications/sveltekit-2-kit-tracing/src/routes/nav2/+page.svelte
@@ -0,0 +1 @@
+<h1>Navigation 2</h1>
diff --git a/...ackages/e2e-tests/test-applications/sveltekit-2-kit-tracing/src/routes/redirect1/+page.ts b/...ackages/e2e-tests/test-applications/sveltekit-2-kit-tracing/src/routes/redirect1/+page.ts
@@ -0,0 +1,5 @@
+import { redirect } from '@sveltejs/kit';
+
+export const load = async () => {
+  redirect(301, '/redirect2');
+};
diff --git a/...ackages/e2e-tests/test-applications/sveltekit-2-kit-tracing/src/routes/redirect2/+page.ts b/...ackages/e2e-tests/test-applications/sveltekit-2-kit-tracing/src/routes/redirect2/+page.ts
@@ -0,0 +1,5 @@
+import { redirect } from '@sveltejs/kit';
+
+export const load = async () => {
+  redirect(301, '/users/789');
+};
diff --git a/...ts/test-applications/sveltekit-2-kit-tracing/src/routes/server-load-error/+page.server.ts b/...ts/test-applications/sveltekit-2-kit-tracing/src/routes/server-load-error/+page.server.ts
@@ -0,0 +1,6 @@
+export const load = async () => {
+  throw new Error('Server Load Error');
+  return {
+    msg: 'Hello World',
+  };
+};
diff --git a/...tests/test-applications/sveltekit-2-kit-tracing/src/routes/server-load-error/+page.svelte b/...tests/test-applications/sveltekit-2-kit-tracing/src/routes/server-load-error/+page.svelte
@@ -0,0 +1,9 @@
+<script lang="ts">
+  export let data
+</script>
+
+<h1>Server load error</h1>
+
+<p>
+  Message: {data.msg}
+</p>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		@sentry:registry=http://127.0.0.1:4873
		@sentry-internal:registry=http://127.0.0.1:4873