Improve error handling

src/app.d.ts

@@ -4,7 +4,9 @@ declare global {
 	namespace App {
 		interface Error {
 			message: string;
-			owlCode?: string;
+			code?: string;
+			name?: string;
+			msg?: string;
 		}
 		// interface Locals {}
 		// interface PageData {}

src/hooks.client.ts

@@ -0,0 +1,11 @@
+import type { HandleClientError } from "@sveltejs/kit";
+
+export const handleError: HandleClientError = ({ error }) => {
+    const err = error as any;
+
+    return {
+        message: err?.message || 'An unexpected application error occurred.',
+        code: err?.code || 'CRITICAL',
+        msg: err?.msg || 'UNHANDLED_EXCEPTION'
+    };
+};

src/lib/owlClient.ts

@@ -18,4 +18,6 @@ export const OwlClient = new OwlBoardClient(
 	// API Key Here when ready!!!
 );
 
+export function ThrowApiError(e: any): void {}
+
 export { ValidationError, ApiError };

src/routes/+error.svelte

@@ -8,6 +8,11 @@
 
 <!-- Will need to check error type, using the upstream code combined with response code -->
 
+{#if page.error}
+{JSON.stringify(page.error)}
+STATUS: {page.status}
+{/if}
+
 <div class="error-wrapper">
 	{#if page.status == 404}
 		<!-- Warning no data image -->

src/routes/+layout.svelte

@@ -106,6 +106,7 @@
 	<!-- Dynamic Nav Elements Here! -->
 	{#each visibleItems as item}
 		{@const isActive = activePath.replace(/\/$/, '') === item.path.replace(/\/$/, '')}
+		{@const Icon = item.icon}
 		<a
 			href={item.path}
 			class="nav-item"
@@ -113,7 +114,7 @@
 			aria-current={isActive ? 'page' : undefined}
 			onclick={() => (menuOpen = false)}
 		>
-			<item.icon size={24} stroke={isActive ? 2 : 1.5} class="nav-icon" />
+			<Icon size={24} stroke={isActive ? 2 : 1.5} class="nav-icon" />
 
 			<span class="label">{item.label}</span>
 		</a>
@@ -138,6 +139,7 @@
 			<div class="menu-popover" transition:slide={{ axis: 'y', duration: 250 }}>
 				{#each hiddenItems as item}
 					{@const isActive = activePath.replace(/\/$/, '') === item.path.replace(/\/$/, '')}
+					{@const Icon = item.icon}
 					<a
 						href={item.path}
 						class="menu-popover-item"
@@ -145,7 +147,7 @@
 						class:active={isActive}
 						aria-current={isActive ? 'page' : undefined}
 					>
-						<item.icon size={20} />
+						<Icon size={20} />
 						<span>{item.label}</span>
 					</a>
 				{/each}