squid/blog
squid/blog
1
2
Fork 0
Code Issues 7 Pull Requests Actions Projects 1 Releases 7 Wiki Activity

feat: add custom ErrorPage component for improved error handling
Some checks failed
Frontend CI / build (push) Failing after 53s
Details

Browse Source
This commit is contained in:
SquidSpirit 2025-10-13 10:51:55 +08:00
parent 365c979878
commit f228a9bb4a
3 changed files with 28 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
frontend/src/lib/common/framework/ui/ErrorPage.svelte Normal file
View File

@ -0,0 +1,14 @@
<div
class="min-h-content-height mx-auto flex max-w-screen-xl flex-col items-center justify-center px-4 md:px-6"
>
<div class="flex flex-row items-end gap-x-4 md:gap-x-6">
<h1 class="text-5xl font-extrabold text-gray-800 underline md:text-7xl">404</h1>
<h2 class="flex flex-row items-center gap-x-2 text-2xl font-bold md:gap-x-2.5 md:text-3xl">
<div class="h-7 w-1.5 bg-gray-800 md:h-9 md:w-2"></div>
<div class="rounded-md bg-blue-600 px-1 py-px md:px-1.5 md:py-0.5">
<span class="text-white">Not</span>
</div>
<span class="text-gray-800">Found.</span>
</h2>
</div>
</div>

19
frontend/src/routes/+error.svelte
View File

@ -1,14 +1,5 @@
<div <script>
class="mx-auto flex min-h-content-height max-w-screen-xl flex-col items-center justify-center px-4 md:px-6" import ErrorPage from '$lib/common/framework/ui/ErrorPage.svelte';
> </script>
<div class="flex flex-row items-end gap-x-4 md:gap-x-6">
<h1 class="text-5xl font-extrabold text-gray-800 underline md:text-7xl">404</h1> <ErrorPage />
<h2 class="flex flex-row items-center gap-x-2 text-2xl font-bold md:gap-x-2.5 md:text-3xl">
<div class="h-7 w-1.5 bg-gray-800 md:h-9 md:w-2"></div>
<div class="rounded-md bg-blue-600 px-1 py-px md:px-1.5 md:py-0.5">
<span class="text-white">Not</span>
</div>
<span class="text-gray-800">Found.</span>
</h2>
</div>
</div>

13
frontend/src/routes/dashboard/+layout.svelte
View File

@ -8,6 +8,7 @@
import { onMount, setContext } from 'svelte'; import { onMount, setContext } from 'svelte';
import type { LayoutProps } from './$types'; import type { LayoutProps } from './$types';
import { StatusType } from '$lib/common/adapter/presenter/asyncState'; import { StatusType } from '$lib/common/adapter/presenter/asyncState';
import ErrorPage from '$lib/common/framework/ui/ErrorPage.svelte';
const { children }: LayoutProps = $props(); const { children }: LayoutProps = $props();
@ -18,10 +19,12 @@
setContext(AuthBloc.name, authBloc); setContext(AuthBloc.name, authBloc);
const authState = $derived($authBloc);
onMount(() => authBloc.dispatch({ event: AuthEventType.CurrentUserLoadedEvent })); onMount(() => authBloc.dispatch({ event: AuthEventType.CurrentUserLoadedEvent }));
const authState = $derived($authBloc);
const isLoading = $derived.by(
() => authState.status === StatusType.Loading || authState.status === StatusType.Idle
);
const hasError = $derived.by(() => { const hasError = $derived.by(() => {
if (authState.status === StatusType.Error) { if (authState.status === StatusType.Error) {
return true; return true;
@ -33,8 +36,10 @@
}); });
</script> </script>
{#if hasError} {#if isLoading}
<div>Error</div> <div></div>
{:else if hasError}
<ErrorPage />
{:else} {:else}
{@render children()} {@render children()}
{/if} {/if}