feat: Add tracing to load, server actions, and handle/resolve

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

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

@@ -101,6 +101,7 @@ const get_defaults = (prefix = '') => ({
 		serviceWorker: {
 			register: true
 		},
+		tracing: false,
 		typescript: {},
 		paths: {
 			base: '',
@@ -404,3 +405,76 @@ test('errors on loading config with incorrect default export', async () => {
 		'The Svelte config file must have a configuration object as its default export. See https://svelte.dev/docs/kit/configuration'
 	);
 });
+
+test('accepts valid tracing values', () => {
+	// Test boolean values
+	assert.doesNotThrow(() => {
+		validate_config({
+			kit: {
+				tracing: true
+			}
+		});
+	});
+
+	assert.doesNotThrow(() => {
+		validate_config({
+			kit: {
+				tracing: false
+			}
+		});
+	});
+
+	// Test string values
+	assert.doesNotThrow(() => {
+		validate_config({
+			kit: {
+				tracing: 'server'
+			}
+		});
+	});
+
+	assert.doesNotThrow(() => {
+		validate_config({
+			kit: {
+				tracing: 'client'
+			}
+		});
+	});
+
+	assert.doesNotThrow(() => {
+		validate_config({
+			kit: {
+				tracing: undefined
+			}
+		});
+	});
+});
+
+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"$/);
+
+	assert.throws(() => {
+		validate_config({
+			kit: {
+				// @ts-expect-error - given value expected to throw
+				tracing: 42
+			}
+		});
+	}, /^config\.kit\.tracing should be true, false, "server", or "client"$/);
+
+	assert.throws(() => {
+		validate_config({
+			kit: {
+				// @ts-expect-error - given value expected to throw
+				tracing: null
+			}
+		});
+	}, /^config\.kit\.tracing should be true, false, "server", or "client"$/);
+});

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

@@ -270,6 +270,12 @@ 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"`);
+			}),
+
 			typescript: object({
 				config: fun((config) => config)
 			}),

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

@@ -174,6 +174,8 @@ 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

@@ -60,6 +60,7 @@ export const options = {
 			.replace(/%sveltekit\.status%/g, '" + status + "')
 			.replace(/%sveltekit\.error\.message%/g, '" + message + "')}
 	},
+	tracing: ${config.kit.tracing === true || config.kit.tracing === 'server'},
 	version_hash: ${s(hash(config.kit.version.name))}
 };
 

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

@@ -686,6 +686,16 @@ 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
+	 * @since 2.22.0
+	 */
+	tracing?: boolean | 'server' | 'client';
 	typescript?: {
 		/**
 		 * A function that allows you to edit the generated `tsconfig.json`. You can mutate the config (recommended) or return a new one.

packages/kit/src/runtime/client/client.js

@@ -44,6 +44,8 @@ import { get_message, get_status } from '../../utils/error.js';
 import { writable } from 'svelte/store';
 import { page, update, navigating } from './state.svelte.js';
 import { add_data_suffix, add_resolution_suffix } from '../pathname.js';
+import { record_span } from '../telemetry/record_span.js';
+import { get_tracer } from '../telemetry/get_tracer.js';
 
 export { load_css };
 
@@ -759,13 +761,30 @@ async function load_node({ loader, parent, url, params, route, server_data_node
 			}
 		};
 
+		async function traced_load() {
+			const tracer = await get_tracer({ is_enabled: app.tracing });
+
+			return record_span({
+				name: 'sveltekit.load.universal',
+				tracer,
+				attributes: {
+					'sveltekit.load.node_id': node.universal_id || 'unknown',
+					'sveltekit.load.type': 'universal',
+					'sveltekit.load.environment': 'client',
+					'sveltekit.route.id': route.id || 'unknown'
+				},
+				fn: async () => (await node.universal?.load?.call(null, load_input)) ?? null
+			});
+		}
+
 		if (DEV) {
 			try {
 				lock_fetch();
-				data = (await node.universal.load.call(null, load_input)) ?? null;
+				data = await traced_load();
+
 				if (data != null && Object.getPrototypeOf(data) !== Object.prototype) {
 					throw new Error(
-						`a load function related to route '${route.id}' returned ${
+						`the load function located in ${node.universal_id} returned ${
 							typeof data !== 'object'
 								? `a ${typeof data}`
 								: data instanceof Response
@@ -780,7 +799,7 @@ async function load_node({ loader, parent, url, params, route, server_data_node
 				unlock_fetch();
 			}
 		} else {
-			data = (await node.universal.load.call(null, load_input)) ?? null;
+			data = await traced_load();
 		}
 	}
 

packages/kit/src/runtime/client/types.d.ts

@@ -56,6 +56,11 @@ export interface SvelteKitApp {
 	 */
 	hash: boolean;
 
+	/**
+	 * Whether OpenTelemetry tracing is enabled (config.tracing === true || config.tracing === 'client')
+	 */
+	tracing: boolean;
+
 	root: typeof SvelteComponent;
 }
 

packages/kit/src/runtime/server/data/index.js

@@ -63,6 +63,7 @@ export async function render_data(
 						event: new_event,
 						state,
 						node,
+						tracing: options.tracing,
 						parent: async () => {
 							/** @type {Record<string, any>} */
 							const data = {};

packages/kit/src/runtime/server/page/actions.js

@@ -6,6 +6,8 @@ import { get_status, normalize_error } from '../../../utils/error.js';
 import { is_form_content_type, negotiate } from '../../../utils/http.js';
 import { handle_error_and_jsonify } from '../utils.js';
 import { with_event } from '../../app/server/event.js';
+import { record_span } from '../../telemetry/record_span.js';
+import { get_tracer } from '../../telemetry/get_tracer.js';
 
 /** @param {import('@sveltejs/kit').RequestEvent} event */
 export function is_action_json_request(event) {
@@ -51,7 +53,7 @@ export async function handle_action_json_request(event, options, server) {
 	check_named_default_separate(actions);
 
 	try {
-		const data = await call_action(event, actions);
+		const data = await call_action(event, actions, options.tracing);
 
 		if (__SVELTEKIT_DEV__) {
 			validate_action_return(data);
@@ -139,9 +141,10 @@ export function is_action_request(event) {
 /**
  * @param {import('@sveltejs/kit').RequestEvent} event
  * @param {import('types').SSRNode['server'] | undefined} server
+ * @param {boolean} tracing
  * @returns {Promise<import('@sveltejs/kit').ActionResult>}
  */
-export async function handle_action_request(event, server) {
+export async function handle_action_request(event, server, tracing) {
 	const actions = server?.actions;
 
 	if (!actions) {
@@ -164,7 +167,7 @@ export async function handle_action_request(event, server) {
 	check_named_default_separate(actions);
 
 	try {
-		const data = await call_action(event, actions);
+		const data = await call_action(event, actions, tracing);
 
 		if (__SVELTEKIT_DEV__) {
 			validate_action_return(data);
@@ -216,9 +219,10 @@ function check_named_default_separate(actions) {
 /**
  * @param {import('@sveltejs/kit').RequestEvent} event
  * @param {NonNullable<import('types').ServerNode['actions']>} actions
+ * @param {boolean} tracing
  * @throws {Redirect | HttpError | SvelteKitError | Error}
  */
-async function call_action(event, actions) {
+async function call_action(event, actions, tracing) {
 	const url = new URL(event.request.url);
 
 	let name = 'default';
@@ -247,7 +251,30 @@ async function call_action(event, actions) {
 		);
 	}
 
-	return with_event(event, () => action(event));
+	const tracer = await get_tracer({ is_enabled: tracing });
+
+	return record_span({
+		name: 'sveltekit.action',
+		tracer,
+		attributes: {
+			'sveltekit.action.name': name,
+			'sveltekit.route.id': event.route.id || 'unknown'
+		},
+		fn: async (action_span) => {
+			const result = await with_event(event, () => action(event));
+			if (result instanceof ActionFailure) {
+				action_span.setAttributes({
+					'sveltekit.action.result.type': 'failure',
+					'sveltekit.action.result.status': result.status
+				});
+			} else {
+				action_span.setAttributes({
+					'sveltekit.action.result.type': 'success'
+				});
+			}
+			return result;
+		}
+	});
 }
 
 /** @param {any} data */

packages/kit/src/runtime/server/page/index.js

@@ -56,7 +56,7 @@ export async function render_page(event, page, options, manifest, state, nodes,
 		if (is_action_request(event)) {
 			// for action requests, first call handler in +page.server.js
 			// (this also determines status code)
-			action_result = await handle_action_request(event, leaf_node.server);
+			action_result = await handle_action_request(event, leaf_node.server, options.tracing);
 			if (action_result?.type === 'redirect') {
 				return redirect_response(action_result.status, action_result.location);
 			}
@@ -166,7 +166,8 @@ export async function render_page(event, page, options, manifest, state, nodes,
 								if (parent) Object.assign(data, parent.data);
 							}
 							return data;
-						}
+						},
+						tracing: options.tracing
 					});
 				} catch (e) {
 					load_error = /** @type {Error} */ (e);
@@ -194,7 +195,8 @@ export async function render_page(event, page, options, manifest, state, nodes,
 						resolve_opts,
 						server_data_promise: server_promises[i],
 						state,
-						csr
+						csr,
+						tracing: options.tracing
 					});
 				} catch (e) {
 					load_error = /** @type {Error} */ (e);