forgejo-lila/lila
1
0
Fork 0
Code Issues 50 Pull requests Projects 1 Releases Packages Wiki Activity Actions

feat: add root and route-level error boundaries

Browse source
This commit is contained in:
lila 2026-04-26 08:45:18 +02:00
parent e3d28e4127
commit 0da8397940
4 changed files with 109 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

56
apps/web/src/components/RootError.tsx Normal file
View file

@ -0,0 +1,56 @@
import { Link } from "@tanstack/react-router";
interface RootErrorProps {
error: Error;
reset: () => void;
}
export default function RootError({ error, reset }: RootErrorProps) {
return (
<section className="relative flex flex-col items-center justify-center min-h-screen text-center overflow-hidden px-6">
<div className="absolute inset-0 -z-10">
<div className="absolute top-0 left-1/2 h-72 w-184 -translate-x-1/2 rounded-full bg-(--color-primary) opacity-[0.10] blur-3xl" />
<div className="absolute top-10 left-1/2 h-72 w-184 -translate-x-1/2 rounded-full bg-(--color-accent) opacity-[0.10] blur-3xl" />
</div>
<div className="-rotate-1 mb-4">
<span className="inline-flex items-center gap-2 rounded-full bg-(--color-surface) px-4 py-1 text-xs font-semibold tracking-widest uppercase text-(--color-accent) border border-(--color-primary-light)">
something went wrong
</span>
</div>
<h1 className="text-5xl md:text-6xl font-black tracking-tight text-(--color-text) leading-[1.05]">
Unexpected{" "}
<span className="inline-block rotate-1 px-3 py-1 bg-(--color-primary) text-white rounded-xl">
error
</span>
</h1>
<p className="mt-6 text-lg font-medium text-(--color-text-muted) max-w-sm">
Something crashed. This has been noted —{" "}
<span className="text-(--color-accent) font-bold">it's not you</span>.
</p>
{import.meta.env.DEV && (
<pre className="mt-4 max-w-xl w-full text-left text-xs bg-(--color-surface) border border-(--color-primary-light) rounded-2xl p-4 overflow-auto text-(--color-text-muted)">
{error.message}
</pre>
)}
<div className="mt-8 flex gap-3 flex-wrap justify-center">
<button
onClick={reset}
className="px-7 py-3 rounded-full text-white font-bold text-sm bg-(--color-primary) hover:bg-(--color-primary-dark)"
>
Try again
</button>
<Link
to="/"
className="px-7 py-3 rounded-full font-bold text-sm text-(--color-primary) border-2 border-(--color-primary) hover:bg-(--color-surface)"
>
Back to home
</Link>
</div>
</section>
);
}

49
apps/web/src/components/RouteError.tsx Normal file
View file

@ -0,0 +1,49 @@
interface RouteErrorProps {
error: Error;
reset: () => void;
}
export default function RouteError({ error, reset }: RouteErrorProps) {
return (
<section className="relative flex flex-col items-center justify-center py-24 text-center overflow-hidden">
<div className="absolute inset-0 -z-10">
<div className="absolute top-0 left-1/2 h-72 w-184 -translate-x-1/2 rounded-full bg-(--color-primary) opacity-[0.10] blur-3xl" />
<div className="absolute top-10 left-1/2 h-72 w-184 -translate-x-1/2 rounded-full bg-(--color-accent) opacity-[0.10] blur-3xl" />
</div>
<div className="-rotate-1 mb-4">
<span className="inline-flex items-center gap-2 rounded-full bg-(--color-surface) px-4 py-1 text-xs font-semibold tracking-widest uppercase text-(--color-accent) border border-(--color-primary-light)">
something went wrong
</span>
</div>
<h1 className="text-5xl font-black tracking-tight text-(--color-text) leading-[1.05]">
This page{" "}
<span className="inline-block rotate-1 px-3 py-1 bg-(--color-primary) text-white rounded-xl">
crashed
</span>
</h1>
<p className="mt-6 text-lg font-medium text-(--color-text-muted) max-w-sm">
Something went wrong loading this page.{" "}
<span className="text-(--color-accent) font-bold">Try again</span> or
head back home.
</p>
{import.meta.env.DEV && (
<pre className="mt-4 max-w-xl w-full text-left text-xs bg-(--color-surface) border border-(--color-primary-light) rounded-2xl p-4 overflow-auto text-(--color-text-muted)">
{error.message}
</pre>
)}
<div className="mt-8 flex gap-3 flex-wrap justify-center">
<button
onClick={reset}
className="px-7 py-3 rounded-full text-white font-bold text-sm bg-(--color-primary) hover:bg-(--color-primary-dark)"
>
Try again
</button>
</div>
</section>
);
}