test(e2e): Add a sveltekit-2-otlp E2E app for user-owned OpenTelemetry setups

Mirrors the nextjs-otlp app: the app registers its own OpenTelemetry tracer and meter providers,
Sentry runs with enableOpenTelemetrySetup disabled, and the specs assert that errors, logs and
metrics link to the active OpenTelemetry trace while spans and metrics keep exporting over OTLP.

Author: chargome

dev-packages/e2e-tests/test-applications/sveltekit-2-otlp/.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-otlp/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "sveltekit-2-otlp",
+  "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": {
+    "@opentelemetry/api": "^1.9.1",
+    "@opentelemetry/exporter-metrics-otlp-http": "^0.220.0",
+    "@opentelemetry/exporter-trace-otlp-http": "^0.220.0",
+    "@opentelemetry/resources": "^2.9.0",
+    "@opentelemetry/sdk-metrics": "^2.9.0",
+    "@opentelemetry/sdk-trace-base": "^2.9.0",
+    "@opentelemetry/sdk-trace-node": "^2.9.0",
+    "@sentry/core": "file:../../packed/sentry-core-packed.tgz",
+    "@sentry/sveltekit": "file:../../packed/sentry-sveltekit-packed.tgz"
+  },
+  "devDependencies": {
+    "@playwright/test": "~1.56.0",
+    "@sentry-internal/test-utils": "link:../../../test-utils",
+    "@sveltejs/adapter-node": "5.5.1",
+    "@sveltejs/kit": "2.52.2",
+    "@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.3.2"
+  },
+  "type": "module",
+  "volta": {
+    "extends": "../../package.json"
+  }
+}

dev-packages/e2e-tests/test-applications/sveltekit-2-otlp/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-otlp/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-otlp/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-otlp/src/hooks.client.ts

@@ -0,0 +1,10 @@
+import { env } from '$env/dynamic/public';
+import * as Sentry from '@sentry/sveltekit';
+
+Sentry.init({
+  environment: 'qa',
+  dsn: env.PUBLIC_E2E_TEST_DSN,
+  tunnel: `http://localhost:3031/`, // proxy server
+});
+
+export const handleError = Sentry.handleErrorWithSentry();

dev-packages/e2e-tests/test-applications/sveltekit-2-otlp/src/hooks.server.ts

@@ -0,0 +1,7 @@
+import * as Sentry from '@sentry/sveltekit';
+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());

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

@@ -0,0 +1,64 @@
+import { E2E_TEST_DSN } from '$env/static/private';
+import { metrics } from '@opentelemetry/api';
+import { OTLPMetricExporter } from '@opentelemetry/exporter-metrics-otlp-http';
+import { OTLPTraceExporter } from '@opentelemetry/exporter-trace-otlp-http';
+import { resourceFromAttributes } from '@opentelemetry/resources';
+import { MeterProvider, PeriodicExportingMetricReader } from '@opentelemetry/sdk-metrics';
+import { BatchSpanProcessor } from '@opentelemetry/sdk-trace-base';
+import { NodeTracerProvider } from '@opentelemetry/sdk-trace-node';
+import * as Sentry from '@sentry/sveltekit';
+import { OTLP_RECEIVER_PORT, startOtlpReceiver } from './otel-receiver';
+
+startOtlpReceiver();
+
+const resource = resourceFromAttributes({ 'service.name': 'sveltekit-2-otlp' });
+const otlpBaseUrl = `http://localhost:${OTLP_RECEIVER_PORT}`;
+
+// In production the exporter would point at `otlpTracesEndpoint.url`; here it points at the local
+// receiver so the test can assert what was exported. The auth headers are the real DSN-derived ones.
+const otlpTracesEndpoint = Sentry.getOtlpTracesEndpoint(E2E_TEST_DSN);
+if (!otlpTracesEndpoint) {
+  throw new Error('Could not derive an OTLP traces endpoint from E2E_TEST_DSN');
+}
+
+// The user owns tracing: this registers the global tracer provider, context manager and
+// propagator. Sentry is initialized afterwards with `enableOpenTelemetrySetup: false` so it does
+// not contend for any of them.
+new NodeTracerProvider({
+  resource,
+  spanProcessors: [
+    new BatchSpanProcessor(
+      new OTLPTraceExporter({ url: `${otlpBaseUrl}/v1/traces`, headers: otlpTracesEndpoint.headers }),
+      { scheduledDelayMillis: 100 },
+    ),
+  ],
+}).register();
+
+metrics.setGlobalMeterProvider(
+  new MeterProvider({
+    resource,
+    readers: [
+      new PeriodicExportingMetricReader({
+        exporter: new OTLPMetricExporter({ url: `${otlpBaseUrl}/v1/metrics` }),
+        exportIntervalMillis: 500,
+        exportTimeoutMillis: 500,
+      }),
+    ],
+  }),
+);
+
+Sentry.init({
+  environment: 'qa',
+  dsn: E2E_TEST_DSN,
+  debug: !!process.env.DEBUG,
+  tunnel: `http://localhost:3031/`, // proxy server
+
+  // Errors only: no `tracesSampleRate`, so Sentry starts no spans and sends no transactions.
+
+  // The app brings its own OpenTelemetry SDK, which already owns the global tracer provider,
+  // context manager and propagator.
+  enableOpenTelemetrySetup: false,
+
+  // Puts the active OpenTelemetry span's trace on everything Sentry sends.
+  integrations: [Sentry.openTelemetryIntegration()],
+});

dev-packages/e2e-tests/test-applications/sveltekit-2-otlp/src/otel-receiver.ts

@@ -0,0 +1,119 @@
+import { createServer } from 'node:http';
+
+export const OTLP_RECEIVER_PORT = 3033;
+
+export interface CollectedSpan {
+  traceId: string;
+  spanId: string;
+  parentSpanId?: string;
+  name: string;
+  sentryAuthHeader?: string;
+}
+
+export interface CollectedMetric {
+  name: string;
+  value: number;
+  attributes: Record<string, string>;
+}
+
+const collectedSpans: CollectedSpan[] = [];
+const collectedMetrics: CollectedMetric[] = [];
+
+interface OtlpAnyValue {
+  stringValue?: string;
+  intValue?: string | number;
+  doubleValue?: number;
+  boolValue?: boolean;
+}
+
+function flattenAttributes(attributes: { key: string; value: OtlpAnyValue }[] = []): Record<string, string> {
+  const flattened: Record<string, string> = {};
+
+  for (const { key, value } of attributes) {
+    const rawValue = value.stringValue ?? value.intValue ?? value.doubleValue ?? value.boolValue;
+    if (rawValue !== undefined) {
+      flattened[key] = String(rawValue);
+    }
+  }
+
+  return flattened;
+}
+
+function collectSpans(body: any, sentryAuthHeader: string | undefined): void {
+  for (const resourceSpan of body?.resourceSpans ?? []) {
+    for (const scopeSpan of resourceSpan.scopeSpans ?? []) {
+      for (const span of scopeSpan.spans ?? []) {
+        collectedSpans.push({
+          traceId: span.traceId,
+          spanId: span.spanId,
+          parentSpanId: span.parentSpanId,
+          name: span.name,
+          sentryAuthHeader,
+        });
+      }
+    }
+  }
+}
+
+function collectMetrics(body: any): void {
+  for (const resourceMetric of body?.resourceMetrics ?? []) {
+    for (const scopeMetric of resourceMetric.scopeMetrics ?? []) {
+      for (const metric of scopeMetric.metrics ?? []) {
+        // Only counters are recorded by this app, so `sum` is the only shape that needs handling.
+        for (const dataPoint of metric.sum?.dataPoints ?? []) {
+          collectedMetrics.push({
+            name: metric.name,
+            value: Number(dataPoint.asInt ?? dataPoint.asDouble ?? 0),
+            attributes: flattenAttributes(dataPoint.attributes),
+          });
+        }
+      }
+    }
+  }
+}
+
+async function readJsonBody(stream: AsyncIterable<Buffer>): Promise<any> {
+  const chunks: Buffer[] = [];
+  for await (const chunk of stream) {
+    chunks.push(chunk);
+  }
+  return JSON.parse(Buffer.concat(chunks).toString('utf8'));
+}
+
+/**
+ * Stands in for the OTLP backend the app would export to in production, so the test can assert what
+ * the user's OpenTelemetry SDK actually put on the wire.
+ *
+ * It deliberately runs as a plain `node:http` server rather than a Next.js route: exporting into the
+ * Next.js server would make every export request produce spans of its own, which would then be
+ * exported again.
+ */
+export function startOtlpReceiver(): void {
+  const server = createServer((req, res) => {
+    void (async () => {
+      if (req.method === 'POST' && req.url === '/v1/traces') {
+        const sentryAuthHeader = req.headers['x-sentry-auth'];
+        collectSpans(await readJsonBody(req), Array.isArray(sentryAuthHeader) ? sentryAuthHeader[0] : sentryAuthHeader);
+        res.writeHead(200, { 'content-type': 'application/json' }).end('{}');
+        return;
+      }
+
+      if (req.method === 'POST' && req.url === '/v1/metrics') {
+        collectMetrics(await readJsonBody(req));
+        res.writeHead(200, { 'content-type': 'application/json' }).end('{}');
+        return;
+      }
+
+      if (req.method === 'GET' && req.url === '/collected') {
+        res
+          .writeHead(200, { 'content-type': 'application/json' })
+          .end(JSON.stringify({ spans: collectedSpans, metrics: collectedMetrics }));
+        return;
+      }
+
+      res.writeHead(404).end();
+    })();
+  });
+
+  server.listen(OTLP_RECEIVER_PORT);
+}

dev-packages/e2e-tests/test-applications/sveltekit-2-otlp/src/routes/+page.svelte

@@ -0,0 +1 @@
+<h1>SvelteKit app with user-owned OpenTelemetry tracing and metrics</h1>