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: '',

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

@@ -270,6 +270,8 @@ const options = object(
 				files: fun((filename) => !/\.DS_Store/.test(filename))
 			}),
 
+			tracing: boolean(false),
+
 			typescript: object({
 				config: fun((config) => config)
 			}),

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

@@ -175,6 +175,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)};
+
 			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},
 	version_hash: ${s(hash(config.kit.version.name))}
 };
 

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

@@ -694,6 +694,12 @@ export interface KitConfig {
 		 */
 		files?(filepath: string): boolean;
 	};
+	/**
+	 * Whether to enable OpenTelemetry tracing for SvelteKit operations including handle hooks, load functions, and form actions.
+	 * @default false
+	 * @since 2.22.0
+	 */
+	tracing?: boolean;
 	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

@@ -41,6 +41,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 '../server/telemetry/record-span.js';
+import { get_tracer } from '../server/telemetry/get-tracer.js';
 
 export { load_css };
 
@@ -753,13 +755,30 @@ async function load_node({ loader, parent, url, params, route, server_data_node
 			}
 		};
 
+		async function traced_load() {
+			const tracer = 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
@@ -774,7 +793,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
+	 */
+	tracing: boolean;
+
 	root: typeof SvelteComponent;
 }
 

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

@@ -6,6 +6,8 @@ import { is_form_content_type, negotiate } from '../../../utils/http.js';
 import { HttpError, Redirect, ActionFailure, SvelteKitError } from '../../control.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 = 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);