Skip to content

Commit 8459fd3

Browse files
DarthGigiDarthGigi
committed
feat: enhance error handling UI across multiple routes
1 parent 686ef70 commit 8459fd3

4 files changed

Lines changed: 64 additions & 30 deletions

File tree

‎src/routes/+error.svelte‎

Lines changed: 19 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,24 @@
11
<script lang="ts">
22
import { page } from "$app/state";
3-
import { Button } from "bits-ui";
3+
import { env } from "$env/dynamic/public";
4+
import { Button } from "$ui/button";
5+
import * as Empty from "$ui/empty";
6+
import CircleXIcon from "@lucide/svelte/icons/circle-x";
47
</script>
58

6-
<main class="flex h-screen w-full flex-col items-center justify-center">
7-
<div class="flex w-full max-w-md flex-col items-center justify-center gap-3 rounded-lg p-6 glass">
8-
<h1 class="text-center text-2xl font-semibold">Oops! Something went wrong</h1>
9-
<p>Try again or contact us if the problem persists.</p>
10-
<Button.Root href="/" class="mx-auto flex w-full max-w-fit items-center justify-center rounded-3xl bg-icon px-6 py-3 text-base font-bold text-white uppercase transition-all duration-150 ease-out [text-shadow:0_0_3px_oklch(0%_0_0/50%)] hover:scale-[1.015] disabled:opacity-50 dark:text-text">Go home</Button.Root>
11-
</div>
12-
<p class="text-xs text-text/40">{page.status}: {page.error?.message}</p>
9+
<main class="flex h-[calc(100vh-3rem)] w-full flex-col items-center justify-center">
10+
<Empty.Root class="border glass max-w-md w-full grow-0">
11+
<Empty.Header class="rounded">
12+
<Empty.Media variant="icon" class="bg-inherit border">
13+
<CircleXIcon />
14+
</Empty.Media>
15+
<Empty.Title>Oops! Something went wrong</Empty.Title>
16+
<Empty.Description>Try again or contact us if the problem persists.</Empty.Description>
17+
<Empty.Description>{page.status}: {page.error?.message}</Empty.Description>
18+
</Empty.Header>
19+
<Empty.Content class="flex flex-row gap-4 items-center-safe justify-center-safe">
20+
<Button href="/" variant="default">Go home</Button>
21+
<Button href={env.PUBLIC_DISCORD_INVITE} variant="outline" target="_blank">Join our Discord</Button>
22+
</Empty.Content>
23+
</Empty.Root>
1324
</main>

‎src/routes/+layout.svelte‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -178,6 +178,8 @@
178178
});
179179
180180
let innerWidth = $state(0);
181+
182+
$inspect(!page.error);
181183
</script>
182184

183185
<ModeWatcher defaultMode="dark" defaultTheme="default" themeStorageKey="skycryptActiveTheme" darkClassNames={["dark"]} lightClassNames={["light"]} themeColors={{ dark: "#282828", light: "#dbdbdb" }} />
@@ -244,7 +246,7 @@
244246
<PerformanceMode />
245247
{/if}
246248

247-
<div class="pointer-events-none fixed inset-0 group z-[-1] isolate h-dvh w-screen" data-isSkinHidden={innerWidth < 1210} data-isStatsPage={page.url.pathname.startsWith("/stats")}>
249+
<div class="pointer-events-none fixed inset-0 group z-[-1] isolate h-dvh w-screen" data-isSkinHidden={innerWidth < 1210} data-isStatsPage={page.url.pathname.startsWith("/stats") && !page.error}>
248250
<div class="size-full relative z-10 group-data-[isSkinHidden=true]:group-data-[isStatsPage=true]:blur-lg [background-image:var(--bg-url)] bg-cover bg-scroll bg-center bg-no-repeat bg-background"></div>
249251

250252
<div class="absolute inset-0 size-full z-20 group-data-[skinHidden=true]:hidden group-data-[isStatsPage=false]:hidden [background-image:var(--bg-url)] blur-lg bg-cover bg-scroll bg-center bg-no-repeat" style="--percent: 29.75%; clip-path: polygon(var(--percent) 0%, 100% 0%, 100% 100%, var(--percent) 100%);"></div>

‎src/routes/newsroom/+error.svelte‎

Lines changed: 20 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,25 @@
11
<script lang="ts">
2+
import { resolve } from "$app/paths";
23
import { page } from "$app/state";
3-
import { Button } from "bits-ui";
4+
import { env } from "$env/dynamic/public";
5+
import { Button } from "$ui/button";
6+
import * as Empty from "$ui/empty";
7+
import CircleXIcon from "@lucide/svelte/icons/circle-x";
48
</script>
59

6-
<main class="flex h-[60dvh] w-full flex-col items-center justify-center px-5">
7-
<div class="flex w-full max-w-md flex-col items-center justify-center gap-3 rounded-lg p-6 text-center glass glass-brightness-150 dark:glass-brightness-50 glass-contrast-60 dark:glass-contrast-100">
8-
<p class="text-3xl font-bold text-link">{page.status}</p>
9-
<h1 class="text-xl font-semibold text-text">
10-
{page.status === 404 ? "Post not found" : "Something went wrong"}
11-
</h1>
12-
{#if page.error?.message}
13-
<p class="text-sm text-text/75">{page.error.message}</p>
14-
{/if}
15-
<Button.Root href="/newsroom" class="mx-auto mt-2 flex w-full max-w-fit items-center justify-center rounded-3xl bg-icon px-6 py-3 text-base font-bold text-white uppercase transition-all duration-150 ease-out text-shadow-[0_0_3px_oklch(0%_0_0/50%)] hover:scale-[1.015] dark:text-text">Back to newsroom</Button.Root>
16-
</div>
10+
<main class="flex h-[calc(100vh-3rem)] w-full flex-col items-center justify-center">
11+
<Empty.Root class="border glass max-w-md w-full grow-0">
12+
<Empty.Header class="rounded">
13+
<Empty.Media variant="icon" class="bg-inherit border">
14+
<CircleXIcon />
15+
</Empty.Media>
16+
<Empty.Title>Oops! Something went wrong</Empty.Title>
17+
<Empty.Description>Try again or contact us if the problem persists.</Empty.Description>
18+
<Empty.Description>{page.status}: {page.error?.message}</Empty.Description>
19+
</Empty.Header>
20+
<Empty.Content class="flex flex-row gap-4 items-center-safe justify-center-safe">
21+
<Button href={resolve("/newsroom")} variant="default">Back to the Newsroom</Button>
22+
<Button href={env.PUBLIC_DISCORD_INVITE} variant="outline" target="_blank">Join our Discord</Button>
23+
</Empty.Content>
24+
</Empty.Root>
1725
</main>

‎src/routes/stats/[ign]/[[profile]]/+error.svelte‎

Lines changed: 22 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,27 @@
11
<script lang="ts">
22
import { page } from "$app/state";
3-
import { Button } from "bits-ui";
3+
import { env } from "$env/dynamic/public";
4+
import { Button } from "$ui/button";
5+
import * as Empty from "$ui/empty";
6+
import { Separator } from "$ui/separator";
7+
import CircleXIcon from "@lucide/svelte/icons/circle-x";
48
</script>
59

6-
<main class="flex h-screen w-full flex-col items-center justify-center">
7-
<div class="flex w-full max-w-md flex-col items-center justify-center gap-3 rounded-lg p-6 glass">
8-
<h1 class="text-center text-2xl font-semibold">Oops! Something went wrong</h1>
9-
<p class="text-center">An error occurred while trying to fetch the stats for '{page.params.ign}'</p>
10-
<p>Try again or contact us if the problem persists.</p>
11-
<Button.Root href="/" class="mx-auto flex w-full max-w-fit items-center justify-center rounded-3xl bg-icon px-6 py-3 text-base font-bold text-white uppercase transition-all duration-150 ease-out [text-shadow:0_0_3px_oklch(0%_0_0/50%)] hover:scale-[1.015] disabled:opacity-50 dark:text-text">Go home</Button.Root>
12-
</div>
13-
<p class="text-xs text-text/40">{page.status}: {page.error?.message}</p>
10+
<main class="flex h-[calc(100vh-3rem)] w-full flex-col items-center justify-center">
11+
<Empty.Root class="border glass max-w-md w-full grow-0">
12+
<Empty.Header class="rounded">
13+
<Empty.Media variant="icon" class="bg-inherit border">
14+
<CircleXIcon />
15+
</Empty.Media>
16+
<Empty.Title>Oops! Something went wrong</Empty.Title>
17+
<Empty.Description>An error occurred while trying to fetch the stats for '{page.params.ign}'</Empty.Description>
18+
<Empty.Description>Try again or contact us if the problem persists.</Empty.Description>
19+
<Separator />
20+
<Empty.Description>{page.status}: {page.error?.message}</Empty.Description>
21+
</Empty.Header>
22+
<Empty.Content class="flex flex-row gap-4 items-center-safe justify-center-safe">
23+
<Button href="/" variant="default">Go home</Button>
24+
<Button href={env.PUBLIC_DISCORD_INVITE} variant="outline" target="_blank">Join our Discord</Button>
25+
</Empty.Content>
26+
</Empty.Root>
1427
</main>

0 commit comments

Comments
 (0)