Improve server error logging

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

@@ -3,6 +3,7 @@ import { set_private_env, set_public_env, set_safe_public_env } from '../shared-
 import { options, get_hooks } from '__SERVER__/internal.js';
 import { DEV } from 'esm-env';
 import { filter_private_env, filter_public_env } from '../../utils/env.js';
+import { format_server_error } from './utils.js';
 import { prerendering } from '__sveltekit/environment';
 import { set_read_implementation, set_manifest } from '__sveltekit/server';
 import { set_app } from './app.js';
@@ -77,8 +78,14 @@ export class Server {
 					handle: module.handle || (({ event, resolve }) => resolve(event)),
 					handleError:
 						module.handleError ||
-						(({ status, error }) =>
-							console.error((status === 404 && /** @type {Error} */ (error)?.message) || error)),
+						(({ status, error, event }) => {
+							const error_message = format_server_error(
+								status,
+								/** @type {Error} */ (error),
+								event
+							);
+							console.error(error_message);
+						}),
 					handleFetch: module.handleFetch || (({ request, fetch }) => fetch(request)),
 					reroute: module.reroute || (() => {}),
 					transport: module.transport || {}

packages/kit/src/runtime/server/utils.js

@@ -180,3 +180,52 @@ export function has_prerendered_path(manifest, pathname) {
 		(pathname.at(-1) === '/' && manifest._.prerendered_routes.has(pathname.slice(0, -1)))
 	);
 }
+
+/**
+ * Formats the error into a nice message with sanitized stack trace
+ * @param {number} status
+ * @param {Error} error
+ * @param {import('@sveltejs/kit').RequestEvent} event
+ */
+export function format_server_error(status, error, event) {
+	const formatted_text = `\x1b[1;31m[${status}] ${event.request.method} ${event.url.pathname}\x1b[0m\n`;
+
+	if (status === 404) {
+		return formatted_text + error.message;
+	}
+
+	return formatted_text + clean_up_stack_trace(error);
+}
+
+/**
+ * Provides a refined stack trace by excluding lines following the last occurrence of a line containing +page. +layout. or +server.
+ * @param {Error} error
+ */
+export function clean_up_stack_trace(error) {
+	const stack_trace = error.stack?.split('\n') ?? [];
+	const last_line_from_src_code = find_last_index(
+		stack_trace,
+		(line) =>
+			['+page.', '+layout.', '+server.'].find((snippet) => line.includes(snippet)) !== undefined
+	);
+
+	if (last_line_from_src_code === -1) {
+		// default to the whole stack trace
+		return error.stack;
+	}
+
+	return stack_trace.slice(0, last_line_from_src_code + 1).join('\n');
+}
+
+/**
+ * @param {any[]} array
+ * @param {(item: any, index: number, array: any[]) => boolean} predicate
+ */
+export function find_last_index(array, predicate) {
+	for (let i = array.length - 1; i >= 0; i--) {
+		if (predicate(array[i], i, array)) {
+			return i;
+		}
+	}
+	return -1;
+}

packages/kit/src/utils/filesystem.js

@@ -105,7 +105,7 @@ export function walk(cwd, dirs = false) {
 		}
 	}
 
-	return (walk_dir(''), all_files);
+	return walk_dir(''), all_files;
 }
 
 /** @param {string} str */

packages/kit/test/apps/basics/src/routes/css/dynamic/+page.svelte

@@ -2,10 +2,10 @@
 	let Dynamic;
 </script>
 
-<button on:click={async () => {
+<button
+	on:click={async () => {
 		Dynamic = (await import('./Dynamic.svelte')).default;
-	}}
-	>load component</button
+	}}>load component</button
 >
 
 <svelte:component this={Dynamic}></svelte:component>

playgrounds/basic/src/routes/+page.svelte

@@ -12,4 +12,5 @@
 
 <ul>
 	<li><a href="images">images</a></li>
+	<li><a href="force-error">force error</a></li>
 </ul>

playgrounds/basic/src/routes/force-error/+page.server.ts

@@ -0,0 +1,5 @@
+export const actions = {
+	default: async () => {
+		throw new Error('test');
+	}
+};

playgrounds/basic/src/routes/force-error/+page.svelte

@@ -0,0 +1,4 @@
+<br />
+<form method="post">
+	<button type="submit"> Trigger server error </button>
+</form>