WORKFLOW-APP/app/error.tsx
SJCoetz bb97fef453 feat: initialize full ysterbaard frontend application
Add complete production-ready Ysterbaard PocketBase registry browser frontend:
- Next.js 14 App Router with TypeScript, Tailwind CSS, and TanStack React Query
- Secure server-side PocketBase API proxy to avoid exposing superuser tokens
- Read-only directors and companies registry browse pages with search, filtering, and pagination
- Client onboarding workflow for creating and managing client submissions
- Docker container configuration for easy deployment
- All supporting UI components, utility functions, and configuration files
2026-07-23 19:10:47 +02:00

53 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&apos;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>
);
}