feat: basic error page

greymass · Oct 8, 2024 · e613257 · e613257
1 parent 97d36be
commit e613257
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 2 deletions.
diff --git a/src/app.d.ts b/src/app.d.ts
@@ -0,0 +1,9 @@
+declare global {
+	namespace App {
+		interface Error {
+			code?: string;
+		}
+	}
+}
+
+export {};
diff --git a/src/error.html b/src/error.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<title>%sveltekit.error.message%</title>
+	</head>
+
+	<body>
+		<h1>Error in root layout</h1>
+		<p>Status: %sveltekit.status%</p>
+		<p>Message: %sveltekit.error.message%</p>
+	</body>
+</html>
diff --git a/src/routes/+error.svelte b/src/routes/+error.svelte
@@ -2,4 +2,6 @@
 	import { page } from '$app/stores';
 </script>
 
+<!-- This error page would get triggered if the user entered an invalid URL like /en/eos/asdf  -->
+<!-- TODO: We'll need some alternative styling here since it doesn't inherit any layout from the rest of the site. -->
 <pre>{JSON.stringify($page.error, null, 2)}</pre>
diff --git a/src/routes/[network]/(explorer)/account/[name]/+layout.ts b/src/routes/[network]/(explorer)/account/[name]/+layout.ts
@@ -1,10 +1,16 @@
 import { AccountState } from '$lib/state/client/account.svelte';
 import { getNetworkFromParams } from '$lib/state/network.svelte';
-import type { LoadEvent } from '@sveltejs/kit';
+import { error, type LoadEvent } from '@sveltejs/kit';
 
 export const load = async ({ fetch, params }: LoadEvent) => {
 	const network = getNetworkFromParams(String(params.network));
-	const account = await AccountState.for(network, String(params.name), fetch);
+	let account: AccountState;
+	try {
+		account = await AccountState.for(network, String(params.name), fetch);
+	} catch (e) {
+		console.error(e);
+		error(404, { message: `Account not found: ${String(params.name)}`, code: 'NOT_FOUND' });
+	}
 	return {
 		account,
 		name: params.name

diff --git a/src/routes/[network]/+error.svelte b/src/routes/[network]/+error.svelte
@@ -0,0 +1,12 @@
+<script lang="ts">
+	import { page } from '$app/stores';
+</script>
+
+<!-- This error page gets triggered if any of the routes in the sibling directories fail -->
+<!-- TODO: this page needs a design still -->
+
+{#if $page.error?.code === 'NOT_FOUND'}
+	<h1 class="h1">{$page.error.message}</h1>
+{:else}
+	<pre>{JSON.stringify($page.error, null, 2)}</pre>
+{/if}