refactor(frontend): use handleError hook for errors instead of try/catch

Foxnouns.Frontend/src/app.d.ts

@@ -1,7 +1,16 @@
 // See https://svelte.dev/docs/kit/types#app.d.ts
+
+import type { ErrorCode } from "$api/error";
+
 // for information about these interfaces
 declare global {
 	namespace App {
+		interface Error {
+			message: string;
+			status: number;
+			code: ErrorCode;
+			id: string;
+		}
 		// interface Error {}
 		// interface Locals {}
 		// interface PageData {}

Foxnouns.Frontend/src/hooks.server.ts

@@ -1,6 +1,8 @@
+import ApiError, { ErrorCode } from "$api/error";
 import { PRIVATE_API_HOST, PRIVATE_INTERNAL_API_HOST } from "$env/static/private";
 import { PUBLIC_API_BASE } from "$env/static/public";
-import type { HandleFetch } from "@sveltejs/kit";
+import log from "$lib/log";
+import type { HandleFetch, HandleServerError } from "@sveltejs/kit";
 
 export const handleFetch: HandleFetch = async ({ request, fetch }) => {
 	if (request.url.startsWith(`${PUBLIC_API_BASE}/internal`)) {
@@ -11,3 +13,24 @@ export const handleFetch: HandleFetch = async ({ request, fetch }) => {
 
 	return await fetch(request);
 };
+
+export const handleError: HandleServerError = async ({ error, status, message }) => {
+	const id = crypto.randomUUID();
+
+	if (error instanceof ApiError) {
+		return {
+			id,
+			status: error.raw?.status || status,
+			message: error.raw?.message || "Unknown error",
+			code: error.code,
+		};
+	}
+
+	if (status >= 400 && status <= 499) {
+		return { id, status, message, code: ErrorCode.GenericApiError };
+	}
+
+	log.error("[%s] error in handler:", id, error);
+
+	return { id, status, message, code: ErrorCode.InternalServerError };
+};

Foxnouns.Frontend/src/routes/+error.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { page } from "$app/stores";
+	import Error from "$components/Error.svelte";
 	import { t } from "$lib/i18n";
 	import type { LayoutData } from "./$types";
 
@@ -14,22 +15,8 @@
 </svelte:head>
 
 <div class="container">
-	<h3>{$t("title.an-error-occurred")}</h3>
-	<p>
-		<strong>{$page.status}</strong>: {error.message}
-	</p>
-	<p>
-		{#if $page.status === 400}
-			{$t("error.400-description")}
-		{:else if $page.status === 404}
-			{$t("error.404-description")}
-		{:else if $page.status === 500}
-			{$t("error.500-description")}
-		{:else}
-			{$t("error.unknown-status-description")}
-		{/if}
-	</p>
-	<div class="btn-group">
+	<Error {error} headerElem="h3" />
+	<div class="btn-group mt-2">
 		{#if data.meUser}
 			<a class="btn btn-primary" href="/@{data.meUser.username}">
 				{$t("error.back-to-profile-button")}

Foxnouns.Frontend/src/routes/@[username]/+page.server.ts

@@ -1,25 +1,14 @@
 import { apiRequest } from "$api";
-import ApiError, { ErrorCode } from "$api/error.js";
 import type { UserWithMembers } from "$api/models";
-import log from "$lib/log.js";
 import paginate from "$lib/paginate";
-import { error } from "@sveltejs/kit";
 
 const MEMBERS_PER_PAGE = 20;
 
 export const load = async ({ params, fetch, cookies, url }) => {
-	let user: UserWithMembers;
-
-	try {
-		user = await apiRequest<UserWithMembers>("GET", `/users/${params.username}`, {
-			fetch,
-			cookies,
-		});
-	} catch (e) {
-		if (e instanceof ApiError && e.code === ErrorCode.UserNotFound) error(404, "User not found");
-		log.error("Error fetching user %s:", params.username, e);
-		throw e;
-	}
+	const user = await apiRequest<UserWithMembers>("GET", `/users/${params.username}`, {
+		fetch,
+		cookies,
+	});
 
 	const { data, currentPage, pageCount } = paginate(
 		user.members,

Foxnouns.Frontend/src/routes/@[username]/[memberName]/+page.server.ts

@@ -1,28 +1,15 @@
 import { apiRequest } from "$api";
-import ApiError, { ErrorCode } from "$api/error.js";
 import type { Member } from "$api/models/member";
-import log from "$lib/log.js";
-import { error } from "@sveltejs/kit";
 
 export const load = async ({ params, fetch, cookies }) => {
-	try {
-		const member = await apiRequest<Member>(
-			"GET",
-			`/users/${params.username}/members/${params.memberName}`,
-			{
-				fetch,
-				cookies,
-			},
-		);
+	const member = await apiRequest<Member>(
+		"GET",
+		`/users/${params.username}/members/${params.memberName}`,
+		{
+			fetch,
+			cookies,
+		},
+	);
 
-		return { member };
-	} catch (e) {
-		if (e instanceof ApiError) {
-			if (e.code === ErrorCode.UserNotFound) error(404, "User not found");
-			if (e.code === ErrorCode.MemberNotFound) error(404, "Member not found");
-		}
-
-		log.error("Error fetching user %s/member %s:", params.username, params.memberName, e);
-		throw e;
-	}
+	return { member };
 };