Global error page: ErrorView with per-status copy, did-you-mean suggestions, error ids from handleError, static error.html; 404 instead of 500 for bad progress ids; tolerate full header line in DAISY_TASK_WEBHOOK_HEADER and stop logging raw fetch errors

src/hooks.server.ts

@@ -1,4 +1,4 @@
-import type { Handle, ServerInit } from '@sveltejs/kit/hooks';
+import type { Handle, HandleServerError, ServerInit } from '@sveltejs/kit/hooks';
 import { startMusicPoller } from '#lib/server/music/poller.js';
 import { building } from '$app/env';
 import { auth } from '#lib/server/auth.js';
@@ -41,3 +41,19 @@ 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' };
+	}
+	const id = crypto.randomUUID().slice(0, 8);
+	console.error(`[error ${id}] ${status} ${where}`, error);
+	return { message: status >= 500 ? 'Internal Error' : message, id };
+};