handleError for SvelteKit 3: ids only for unknown errors, compact 404 log line; error page suggestions prefer the real parent over the section

src/error.html

@@ -8,7 +8,12 @@
 		<style>
 			:root {
 				color-scheme: dark light;
-				font-family: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
+				font-family:
+					ui-sans-serif,
+					system-ui,
+					-apple-system,
+					'Segoe UI',
+					sans-serif;
 			}
 			body {
 				margin: 0;

src/hooks.client.ts

@@ -1,10 +1,10 @@
 import type { HandleClientError } from '@sveltejs/kit';
 
-// Errors thrown while rendering/loading in the browser: same shape as the server (short id,
-// generic message) so the error page looks the same either way.
-export const handleError: HandleClientError = ({ error, status, message }) => {
-	if (status === 404) return { message: 'Not Found' };
+// Unknown errors thrown while loading/rendering in the browser get an id like on the server, so
+// the error page looks the same either way. App and framework errors keep their defaults.
+export const handleError: HandleClientError = (input) => {
+	if (input.kind !== 'unknown') return;
 	const id = crypto.randomUUID().slice(0, 8);
-	console.error(`[error ${id}] ${status}`, error);
-	return { message: status >= 500 ? 'Internal Error' : message, id };
+	console.error(`[error ${id}]`, input.error);
+	return { id };
 };

src/hooks.server.ts

@@ -42,18 +42,20 @@ export const handle: Handle = async ({ event, resolve }) => {
 	return response;
 };
 
-// Unexpected errors (anything not thrown with error()) and unknown routes. 5xx get a short id
-// that the error page shows and the log line starts with ("[error ab12cd34]"), so a screenshot
-// or report can be matched to the stack trace. The client only gets a generic message: no
-// stack, no internals. Query strings are left out of the log (they can carry tokens).
-export const handleError: HandleServerError = ({ error, event, status, message }) => {
-	const route = event.route.id ?? '(no route)';
-	const where = `${event.request.method} ${event.url.pathname} route=${route}`;
-	if (status === 404) {
-		console.warn(`[404] ${where}`);
-		return { message: 'Not Found' };
+// Runs for every error (SvelteKit 3 passes a `kind`). Unknown errors (bugs, failing services)
+// get a short id that the error page shows and the log line starts with ("[error ab12cd34]"),
+// so a screenshot or report can be matched to the stack trace; the client only gets the
+// generic "Internal Error", never the stack. 404s get one compact line (Caddy keeps no access
+// log), other error() calls are expected and stay quiet. Query strings are never logged.
+export const handleError: HandleServerError = (input) => {
+	const { event } = input;
+	const where = `${event.request.method} ${event.url.pathname} route=${event.route.id ?? '(none)'}`;
+	if (input.kind === 'unknown') {
+		const id = crypto.randomUUID().slice(0, 8);
+		console.error(`[error ${id}] 500 ${where}`, input.error);
+		return { id };
 	}
-	const id = crypto.randomUUID().slice(0, 8);
-	console.error(`[error ${id}] ${status} ${where}`, error);
-	return { message: status >= 500 ? 'Internal Error' : message, id };
+	if (input.error.status === 404) console.warn(`[404] ${where}`);
+	else if (input.error.status >= 500)
+		console.error(`[${input.error.status}] ${where} ${input.error.message}`);
 };

src/lib/errors.test.ts

@@ -27,6 +27,10 @@ describe('suggestPages', () => {
 		expect(hrefs('/trackers/helth')).not.toContain('/trackers/health');
 		expect(hrefs('/trackers/helth', true)).toContain('/trackers/health');
 	});
+	it('ranks the tracker above the section it lives in', () => {
+		expect(hrefs('/trackers/carz')[0]).toBe('/trackers/cars');
+		expect(hrefs('/trackers/doesnotexist')).not.toContain('/trackers');
+	});
 	it('returns nothing for the home page or noise', () => {
 		expect(hrefs('/')).toEqual([]);
 		expect(hrefs('/zzqxj')).toEqual([]);

src/lib/errors.ts

@@ -122,8 +122,10 @@ export function suggestPages(pathname: string, isOwner: boolean, limit = 3): Sug
 			let score = 0;
 			for (const s of segments) score = Math.max(score, similarity(s, name), similarity(s, slug));
 			// Generic section names only count when spelled out: they match too much otherwise.
-			if (d.kind === 'page') score *= 0.8;
-			if (d.href !== '/' && path.startsWith(`${d.href}/`))
+			if (d.kind === 'page') score = path.startsWith(`${d.href}/`) ? 0 : score * 0.8;
+			// The closest real parent (/trackers/cars for /trackers/cars/nope); sections like
+			// /trackers are already in the navigation tiles.
+			if (d.kind !== 'page' && path.startsWith(`${d.href}/`))
 				score = Math.max(score, 0.9 + d.href.length / 1000);
 			return { d, score };
 		})