feat: add universal IDs to client nodes

Author: elliott-with-the-longest-name-on-github

packages/kit/src/core/config/index.spec.js

@@ -101,7 +101,7 @@ const get_defaults = (prefix = '') => ({
 		serviceWorker: {
 			register: true
 		},
-		tracing: false,
+		tracing: undefined,
 		typescript: {},
 		paths: {
 			base: '',
@@ -407,58 +407,59 @@ test('errors on loading config with incorrect default export', async () => {
 });
 
 test('accepts valid tracing values', () => {
-	// Test boolean values
 	assert.doesNotThrow(() => {
 		validate_config({
 			kit: {
-				tracing: true
+				tracing: 'server'
 			}
 		});
 	});
 
 	assert.doesNotThrow(() => {
 		validate_config({
 			kit: {
-				tracing: false
+				tracing: undefined
 			}
 		});
 	});
+});
 
-	// Test string values
-	assert.doesNotThrow(() => {
+test('errors on invalid tracing values', () => {
+	assert.throws(() => {
 		validate_config({
 			kit: {
-				tracing: 'server'
+				// @ts-expect-error - given value expected to throw
+				tracing: true
 			}
 		});
-	});
+	}, /^config\.kit\.tracing should be undefined or "server"$/);
 
-	assert.doesNotThrow(() => {
+	assert.throws(() => {
 		validate_config({
 			kit: {
-				tracing: 'client'
+				// @ts-expect-error - given value expected to throw
+				tracing: false
 			}
 		});
-	});
+	}, /^config\.kit\.tracing should be undefined or "server"$/);
 
-	assert.doesNotThrow(() => {
+	assert.throws(() => {
 		validate_config({
 			kit: {
-				tracing: undefined
+				// @ts-expect-error - given value expected to throw
+				tracing: 'client'
 			}
 		});
-	});
-});
+	}, /^config\.kit\.tracing should be undefined or "server"$/);
 
-test('errors on invalid tracing values', () => {
 	assert.throws(() => {
 		validate_config({
 			kit: {
 				// @ts-expect-error - given value expected to throw
 				tracing: 'invalid'
 			}
 		});
-	}, /^config\.kit\.tracing should be true, false, "server", or "client"$/);
+	}, /^config\.kit\.tracing should be undefined or "server"$/);
 
 	assert.throws(() => {
 		validate_config({
@@ -467,7 +468,7 @@ test('errors on invalid tracing values', () => {
 				tracing: 42
 			}
 		});
-	}, /^config\.kit\.tracing should be true, false, "server", or "client"$/);
+	}, /^config\.kit\.tracing should be undefined or "server"$/);
 
 	assert.throws(() => {
 		validate_config({
@@ -476,5 +477,5 @@ test('errors on invalid tracing values', () => {
 				tracing: null
 			}
 		});
-	}, /^config\.kit\.tracing should be true, false, "server", or "client"$/);
+	}, /^config\.kit\.tracing should be undefined or "server"$/);
 });

packages/kit/src/core/config/options.js

@@ -270,10 +270,11 @@ const options = object(
 				files: fun((filename) => !/\.DS_Store/.test(filename))
 			}),
 
-			tracing: validate(false, (input, keypath) => {
-				if (typeof input === 'boolean') return input;
-				if (input === 'server' || input === 'client') return input;
-				throw new Error(`${keypath} should be true, false, "server", or "client"`);
+			tracing: validate(undefined, (input, keypath) => {
+				if (input !== 'server') {
+					throw new Error(`${keypath} should be undefined or "server"`);
+				}
+				return input;
 			}),
 
 			typescript: object({

packages/kit/src/core/sync/write_client_manifest.js

@@ -174,8 +174,6 @@ export function write_client_manifest(kit, manifest_data, output, metadata) {
 
 			export const hash = ${s(kit.router.type === 'hash')};
 
-			export const tracing = ${s(kit.tracing === true || kit.tracing === 'client')};
-
 			export const decode = (type, value) => decoders[type](value);
 
 			export { default as root } from '../root.${isSvelte5Plus() ? 'js' : 'svelte'}';

packages/kit/src/core/sync/write_server.js

@@ -33,6 +33,7 @@ import { set_building, set_prerendering } from '__sveltekit/environment';
 import { set_assets } from '__sveltekit/paths';
 import { set_manifest, set_read_implementation } from '__sveltekit/server';
 import { set_private_env, set_public_env, set_safe_public_env } from '${runtime_directory}/shared-server.js';
+import { get_tracer } from '${runtime_directory}/telemetry/get_tracer.js';
 
 export const options = {
 	app_template_contains_nonce: ${template.includes('%sveltekit.nonce%')},
@@ -60,7 +61,7 @@ export const options = {
 			.replace(/%sveltekit\.status%/g, '" + status + "')
 			.replace(/%sveltekit\.error\.message%/g, '" + message + "')}
 	},
-	tracing: ${config.kit.tracing === true || config.kit.tracing === 'server'},
+	tracer: get_tracer({ is_enabled: ${s(config.kit.tracing === 'server')} }),
 	version_hash: ${s(hash(config.kit.version.name))}
 };
 

packages/kit/src/exports/hooks/sequence.js

@@ -1,3 +1,6 @@
+import { get_tracer } from '../../runtime/telemetry/get_tracer.js';
+import { record_span } from '../../runtime/telemetry/record_span.js';
+
 /**
  * A helper function for sequencing multiple `handle` calls in a middleware-like manner.
  * The behavior for the `handle` options is as follows:
@@ -73,7 +76,8 @@ export function sequence(...handlers) {
 	const length = handlers.length;
 	if (!length) return ({ event, resolve }) => resolve(event);
 
-	return ({ event, resolve }) => {
+	return async ({ event, resolve }) => {
+		const tracer = await get_tracer();
 		return apply_handle(0, event, {});
 
 		/**
@@ -85,38 +89,46 @@ export function sequence(...handlers) {
 		function apply_handle(i, event, parent_options) {
 			const handle = handlers[i];
 
-			return handle({
-				event,
-				resolve: (event, options) => {
-					/** @type {import('@sveltejs/kit').ResolveOptions['transformPageChunk']} */
-					const transformPageChunk = async ({ html, done }) => {
-						if (options?.transformPageChunk) {
-							html = (await options.transformPageChunk({ html, done })) ?? '';
-						}
+			return record_span({
+				name: 'sveltekit.handle.child',
+				tracer,
+				attributes: {
+					'sveltekit.handle.child.index': i
+				},
+				fn: async (span) =>
+					handle({
+						event: { ...event, span },
+						resolve: (event, options) => {
+							/** @type {import('@sveltejs/kit').ResolveOptions['transformPageChunk']} */
+							const transformPageChunk = async ({ html, done }) => {
+								if (options?.transformPageChunk) {
+									html = (await options.transformPageChunk({ html, done })) ?? '';
+								}
 
-						if (parent_options?.transformPageChunk) {
-							html = (await parent_options.transformPageChunk({ html, done })) ?? '';
-						}
+								if (parent_options?.transformPageChunk) {
+									html = (await parent_options.transformPageChunk({ html, done })) ?? '';
+								}
 
-						return html;
-					};
+								return html;
+							};
 
-					/** @type {import('@sveltejs/kit').ResolveOptions['filterSerializedResponseHeaders']} */
-					const filterSerializedResponseHeaders =
-						parent_options?.filterSerializedResponseHeaders ??
-						options?.filterSerializedResponseHeaders;
+							/** @type {import('@sveltejs/kit').ResolveOptions['filterSerializedResponseHeaders']} */
+							const filterSerializedResponseHeaders =
+								parent_options?.filterSerializedResponseHeaders ??
+								options?.filterSerializedResponseHeaders;
 
-					/** @type {import('@sveltejs/kit').ResolveOptions['preload']} */
-					const preload = parent_options?.preload ?? options?.preload;
+							/** @type {import('@sveltejs/kit').ResolveOptions['preload']} */
+							const preload = parent_options?.preload ?? options?.preload;
 
-					return i < length - 1
-						? apply_handle(i + 1, event, {
-								transformPageChunk,
-								filterSerializedResponseHeaders,
-								preload
-							})
-						: resolve(event, { transformPageChunk, filterSerializedResponseHeaders, preload });
-				}
+							return i < length - 1
+								? apply_handle(i + 1, event, {
+										transformPageChunk,
+										filterSerializedResponseHeaders,
+										preload
+									})
+								: resolve(event, { transformPageChunk, filterSerializedResponseHeaders, preload });
+						}
+					})
 			});
 		}
 	};

packages/kit/src/exports/hooks/sequence.spec.js

@@ -4,6 +4,14 @@ import { installPolyfills } from '../node/polyfills.js';
 
 installPolyfills();
 
+const dummy_event = /** @type {import('@sveltejs/kit').RequestEvent} */ ({
+	route: { id: 'test' },
+	request: { method: 'GET' },
+	url: new URL('https://example.com'),
+	isDataRequest: false,
+	isSubRequest: false
+});
+
 test('applies handlers in sequence', async () => {
 	/** @type {string[]} */
 	const order = [];
@@ -29,10 +37,9 @@ test('applies handlers in sequence', async () => {
 		}
 	);
 
-	const event = /** @type {import('@sveltejs/kit').RequestEvent} */ ({});
 	const response = new Response();
 
-	assert.equal(await handler({ event, resolve: () => response }), response);
+	assert.equal(await handler({ event: dummy_event, resolve: () => response }), response);
 	expect(order).toEqual(['1a', '2a', '3a', '3b', '2b', '1b']);
 });
 
@@ -47,9 +54,8 @@ test('uses transformPageChunk option passed to non-terminal handle function', as
 		async ({ event, resolve }) => resolve(event)
 	);
 
-	const event = /** @type {import('@sveltejs/kit').RequestEvent} */ ({});
 	const response = await handler({
-		event,
+		event: dummy_event,
 		resolve: async (_event, opts = {}) => {
 			let html = '';
 
@@ -84,9 +90,8 @@ test('merges transformPageChunk option', async () => {
 		}
 	);
 
-	const event = /** @type {import('@sveltejs/kit').RequestEvent} */ ({});
 	const response = await handler({
-		event,
+		event: dummy_event,
 		resolve: async (_event, opts = {}) => {
 			let html = '';
 
@@ -117,9 +122,8 @@ test('uses first defined preload option', async () => {
 		}
 	);
 
-	const event = /** @type {import('@sveltejs/kit').RequestEvent} */ ({});
 	const response = await handler({
-		event,
+		event: dummy_event,
 		resolve: (_event, opts = {}) => {
 			let html = '';
 
@@ -150,9 +154,8 @@ test('uses first defined filterSerializedResponseHeaders option', async () => {
 		}
 	);
 
-	const event = /** @type {import('@sveltejs/kit').RequestEvent} */ ({});
 	const response = await handler({
-		event,
+		event: dummy_event,
 		resolve: (_event, opts = {}) => {
 			let html = '';
 

packages/kit/src/exports/public.d.ts

@@ -18,6 +18,7 @@ import {
 } from '../types/private.js';
 import { BuildData, SSRNodeLoader, SSRRoute, ValidatedConfig } from 'types';
 import type { SvelteConfig } from '@sveltejs/vite-plugin-svelte';
+import { Span } from '@opentelemetry/api';
 
 export { PrerenderOption } from '../types/private.js';
 
@@ -687,15 +688,11 @@ export interface KitConfig {
 		files?(filepath: string): boolean;
 	};
 	/**
-	 * Whether to enable OpenTelemetry tracing for SvelteKit operations including handle hooks, load functions, and form actions.
-	 * - `true` - Enable tracing for both server and client
-	 * - `false` - Disable tracing
-	 * - `'server'` - Enable tracing only on the server side
-	 * - `'client'` - Enable tracing only on the client side
-	 * @default false
+	 * Whether to enable serverside OpenTelemetry tracing for SvelteKit operations including handle hooks, load functions, and form actions.
+	 * @default undefined
 	 * @since 2.22.0
 	 */
-	tracing?: boolean | 'server' | 'client';
+	tracing?: 'server';
 	typescript?: {
 		/**
 		 * A function that allows you to edit the generated `tsconfig.json`. You can mutate the config (recommended) or return a new one.
@@ -977,6 +974,11 @@ export interface LoadEvent<
 	 * ```
 	 */
 	untrack: <T>(fn: () => T) => T;
+
+	/**
+	 * If tracing is enabled, the current span.
+	 */
+	span?: Span;
 }
 
 export interface NavigationEvent<
@@ -1252,6 +1254,11 @@ export interface RequestEvent<
 	 * `true` for `+server.js` calls coming from SvelteKit without the overhead of actually making an HTTP request. This happens when you make same-origin `fetch` requests on the server.
 	 */
 	isSubRequest: boolean;
+
+	/**
+	 * If tracing is enabled, the current span.
+	 */
+	span?: Span;
 }
 
 /**
@@ -1408,6 +1415,11 @@ export interface ServerLoadEvent<
 	 * ```
 	 */
 	untrack: <T>(fn: () => T) => T;
+
+	/**
+	 * If tracing is enabled, the current span.
+	 */
+	span?: Span;
 }
 
 /**