feat(sveltekit): Serve the managed tunnel from sentryHandle under the app's base path

`sentryHandle` answers tunnel requests before isolation, tracing and routing.
`sentrySvelteKit()` hands `paths.base` to the client and server SDKs, so
`tunnel: true` works under a base path without repeating it.

Author: logaretm

dev-packages/e2e-tests/test-applications/sveltekit-3-cloudflare-workers/package.json

@@ -11,7 +11,9 @@
     "clean": "npx rimraf node_modules pnpm-lock.yaml",
     "test:e2e": "playwright test",
     "test:build": "pnpm install && pnpm build",
-    "test:assert": "pnpm test:e2e"
+    "test:assert": "pnpm test:e2e",
+    "test:build:tunnel": "pnpm install && E2E_TEST_TUNNEL=1 E2E_TEST_DSN=http://public@localhost:3031/1337 PUBLIC_E2E_TEST_DSN=http://public@localhost:3031/1337 pnpm build",
+    "test:assert:tunnel": "E2E_TEST_TUNNEL=1 E2E_TEST_DSN=http://public@localhost:3031/1337 PUBLIC_E2E_TEST_DSN=http://public@localhost:3031/1337 playwright test tunnel"
   },
   "dependencies": {
     "@sentry/sveltekit": "file:../../packed/sentry-sveltekit-packed.tgz"
@@ -30,5 +32,14 @@
   },
   "volta": {
     "extends": "../../package.json"
+  },
+  "sentryTest": {
+    "variants": [
+      {
+        "label": "sveltekit-3-cloudflare-workers (tunnel)",
+        "build-command": "pnpm test:build:tunnel",
+        "assert-command": "pnpm test:assert:tunnel"
+      }
+    ]
   }
 }

dev-packages/e2e-tests/test-applications/sveltekit-3-cloudflare-workers/src/app.d.ts

@@ -1,6 +1,8 @@
 // See https://svelte.dev/docs/kit/types#app.d.ts
 // `App.Platform` (including `platform.ctx`) is declared by `@sveltejs/adapter-cloudflare`.
 declare global {
+  const __E2E_TEST_TUNNEL__: boolean;
+
   namespace App {
     // interface Error {}
     // interface Locals {}

dev-packages/e2e-tests/test-applications/sveltekit-3-cloudflare-workers/src/hooks.client.ts

@@ -4,7 +4,7 @@ import * as Sentry from '@sentry/sveltekit';
 Sentry.init({
   environment: 'qa',
   dsn: PUBLIC_E2E_TEST_DSN,
-  tunnel: 'http://localhost:3031/', // proxy server
+  tunnel: __E2E_TEST_TUNNEL__ ? true : 'http://localhost:3031/', // proxy server
   tracesSampleRate: 1.0,
 });
 

dev-packages/e2e-tests/test-applications/sveltekit-3-cloudflare-workers/src/hooks.server.ts

@@ -10,7 +10,7 @@ export const handle = sequence(
     environment: 'qa', // dynamic sampling bias to keep spans
     dsn: E2E_TEST_DSN,
     debug: !!process.env.DEBUG,
-    tunnel: 'http://localhost:3031/', // proxy server
+    tunnel: __E2E_TEST_TUNNEL__ ? true : 'http://localhost:3031/', // proxy server
     tracesSampleRate: 1.0,
   }),
   sentryHandle(),

dev-packages/e2e-tests/test-applications/sveltekit-3-cloudflare-workers/tests/tunnel.test.ts

@@ -0,0 +1,43 @@
+import { expect, test } from '@playwright/test';
+import { getSpanOp, waitForStreamedSpan } from '@sentry-internal/test-utils';
+
+test.skip(!process.env.E2E_TEST_TUNNEL, 'Only runs in the tunnel variant');
+
+const TUNNEL_PATH = /^\/app\/[a-z0-9]{1,7}$/;
+
+test('serves the managed tunnel from the Worker under the base path', async ({ page }) => {
+  const pageloadSpanPromise = waitForStreamedSpan(
+    'sveltekit-3-cloudflare-workers',
+    span => getSpanOp(span) === 'pageload' && span.is_segment,
+  );
+  const tunnelServerSpanPromise = waitForStreamedSpan(
+    'sveltekit-3-cloudflare-workers',
+    span => getSpanOp(span) === 'http.server' && TUNNEL_PATH.test(String(span.attributes['url.path']?.value ?? '')),
+  );
+  const tunnelResponsePromise = page.waitForResponse(
+    response => response.request().method() === 'POST' && TUNNEL_PATH.test(new URL(response.url()).pathname),
+  );
+
+  await page.goto('/app/');
+  const tunnelResponse = await tunnelResponsePromise;
+
+  expect(tunnelResponse.status()).toBe(200);
+  expect(new URL(tunnelResponse.url()).origin).toBe(new URL(page.url()).origin);
+  await expect(pageloadSpanPromise).resolves.toBeDefined();
+
+  // Anchor on a regular server span requested after the tunnel traffic: spans flush in order, so a tunnel span
+  // would arrive first.
+  const anchorSpanPromise = waitForStreamedSpan(
+    'sveltekit-3-cloudflare-workers',
+    span =>
+      getSpanOp(span) === 'http.server' &&
+      String(span.attributes['url.path']?.value ?? '').startsWith('/app/server-load-error'),
+  );
+  await page.request.get('/app/server-load-error');
+
+  const winner = await Promise.race([
+    tunnelServerSpanPromise.then(() => 'tunnel' as const),
+    anchorSpanPromise.then(() => 'anchor' as const),
+  ]);
+  expect(winner).toBe('anchor');
+});

dev-packages/e2e-tests/test-applications/sveltekit-3-cloudflare-workers/vite.config.js

@@ -4,7 +4,13 @@ import { sveltekit } from '@sveltejs/kit/vite';
 import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
 import { defineConfig } from 'vite';
 
+// The tunnel variant serves the app under a base path to cover that the managed tunnel follows it.
+const tunnelVariant = !!process.env.E2E_TEST_TUNNEL;
+
 export default defineConfig({
+  define: {
+    __E2E_TEST_TUNNEL__: JSON.stringify(tunnelVariant),
+  },
   plugins: [
     sentrySvelteKit({
       autoUploadSourceMaps: false,
@@ -17,6 +23,7 @@ export default defineConfig({
       prerender: {
         handleHttpError: 'ignore',
       },
+      paths: tunnelVariant ? { base: '/app' } : undefined,
     }),
   ],
 });

dev-packages/e2e-tests/test-applications/sveltekit-3/package.json

@@ -12,7 +12,9 @@
     "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"
+    "test:assert": "pnpm test:prod",
+    "test:build:tunnel": "pnpm install && E2E_TEST_TUNNEL=1 E2E_TEST_DSN=http://public@localhost:3031/1337 PUBLIC_E2E_TEST_DSN=http://public@localhost:3031/1337 pnpm build",
+    "test:assert:tunnel": "E2E_TEST_TUNNEL=1 E2E_TEST_DSN=http://public@localhost:3031/1337 PUBLIC_E2E_TEST_DSN=http://public@localhost:3031/1337 TEST_ENV=production playwright test tunnel"
   },
   "dependencies": {
     "@sentry/sveltekit": "file:../../packed/sentry-sveltekit-packed.tgz"
@@ -31,5 +33,14 @@
   "volta": {
     "extends": "../../package.json"
   },
-  "type": "module"
+  "type": "module",
+  "sentryTest": {
+    "variants": [
+      {
+        "label": "sveltekit-3 (tunnel)",
+        "build-command": "pnpm test:build:tunnel",
+        "assert-command": "pnpm test:assert:tunnel"
+      }
+    ]
+  }
 }

dev-packages/e2e-tests/test-applications/sveltekit-3/src/app.d.ts

@@ -1,6 +1,8 @@
 // See https://kit.svelte.dev/docs/types#app
 // for information about these interfaces
 declare global {
+  const __E2E_TEST_TUNNEL__: boolean;
+
   namespace App {
     // interface Error {}
     // interface Locals {}

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

@@ -4,7 +4,7 @@ import * as Sentry from '@sentry/sveltekit';
 Sentry.init({
   environment: 'qa', // dynamic sampling bias to keep transactions
   dsn: PUBLIC_E2E_TEST_DSN,
-  tunnel: `http://localhost:3031/`, // proxy server
+  tunnel: __E2E_TEST_TUNNEL__ ? true : `http://localhost:3031/`, // proxy server
   tracesSampleRate: 1.0,
 });
 

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

@@ -7,6 +7,6 @@ Sentry.init({
   environment: 'qa', // dynamic sampling bias to keep transactions
   dsn: E2E_TEST_DSN,
   debug: !!process.env.DEBUG,
-  tunnel: `http://localhost:3031/`, // proxy server
+  tunnel: __E2E_TEST_TUNNEL__ ? true : `http://localhost:3031/`, // proxy server
   tracesSampleRate: 1.0,
 });