54 lines
1.7 KiB
TypeScript
54 lines
1.7 KiB
TypeScript
|
// app/error.tsx
|
||
|
|
// Top-level error boundary. Renders inside the body (must be a
|
||
|
|
// Client Component per Next.js App Router). Keeps the design-system
|
||
|
|
// chrome alive so a failing page still looks finished.
|
||
|
|
|
||
|
|
"use client";
|
||
|
|
|
||
|
|
import { useEffect } from "react";
|
||
|
|
import Link from "next/link";
|
||
|
|
|
||
|
|
export default function GlobalError({
|
||
|
|
error,
|
||
|
|
reset
|
||
|
|
}: {
|
||
|
|
error: Error & { digest?: string };
|
||
|
|
reset: () => void;
|
||
|
|
}) {
|
||
|
|
useEffect(() => {
|
||
|
|
console.error("App error boundary:", error);
|
||
|
|
}, [error]);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<section className="container-x py-16">
|
||
|
|
<div className="max-w-xl mx-auto bg-surface border border-border rounded-lg p-10 flex flex-col gap-5">
|
||
|
|
<p className="text-xs uppercase tracking-[0.08em] text-muted font-semibold">
|
||
|
|
Something went wrong
|
||
|
|
</p>
|
||
|
|
<h1 className="text-2xl font-bold text-fg leading-tight">
|
||
|
|
We couldn't load that page
|
||
|
|
</h1>
|
||
|
|
<p className="text-base text-muted">
|
||
|
|
{error.message ||
|
||
|
|
"An unexpected error occurred. The registry is still reachable from the overview."}
|
||
|
|
</p>
|
||
|
|
<div className="flex gap-3">
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
onClick={reset}
|
||
|
|
className="inline-flex items-center px-5 py-3 rounded-md bg-accent text-accent-on font-semibold text-sm hover:bg-accent-hover transition-colors"
|
||
|
|
>
|
||
|
|
Try again
|
||
|
|
</button>
|
||
|
|
<Link
|
||
|
|
href="/"
|
||
|
|
className="inline-flex items-center px-5 py-3 rounded-md border border-border text-fg font-semibold text-sm no-underline hover:bg-surface-warm transition-colors"
|
||
|
|
>
|
||
|
|
Back to overview
|
||
|
|
</Link>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
);
|
||
|
|
}
|