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

This PR updates our SvelteKit SDK to be compatible with Sveltekit's new
tracing feature, while maintaining backwards compatibility with
Sentry<>SvelteKit setups on previous Kit versions or when SvelteKit's
tracing feature is not used.

If Kit tracing is used, the SDK
- No longer starts its own `http.server` span but uses Kit's
`sveltekit.handle.root` span as the `http.server` root span.
- Configures our `httpIntegration` to avoid emitting a span for the
incoming request span (this is in line with NextJS and Remix)
- Processes kit-emitted spans to include sentry op and origin in an
event preprocessing integration
- Changes the name of root span to Sentry-esque `http.server` name
conventions
  - store original name as `sveltekit.tracing.original_name` attribute
- Still isolates the request in addition 

build time adjustments
- Read tracing config from `svelte.config.js`
- Auto wrap universal `load` functions only for client-side code, if kit
tracing is enabled

Author: Lms24

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

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

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.

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"
+  }
+}

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;

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 {};

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>

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,
+  });
+}

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();
+}

dev-packages/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,
+});