yiekheng
f13e3993e9
Drop the brutalist hazard-tape vocabulary in favor of refined modern SaaS: white cards on zinc-50, soft ring-1 zinc-200 borders (no hard 2px black), rounded-full pills, sans for chrome + mono for tabular data, emerald replacing yellow as the saturated accent. Theme color shifts to zinc-900 with an emerald dot on the icon.
67 lines
2.3 KiB
TypeScript
67 lines
2.3 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect } from "react";
|
|
|
|
export default function Error({
|
|
error,
|
|
reset,
|
|
}: {
|
|
error: Error & { digest?: string };
|
|
reset: () => void;
|
|
}) {
|
|
useEffect(() => {
|
|
console.error("Top-level error boundary caught:", error);
|
|
}, [error]);
|
|
|
|
return (
|
|
<div className="flex min-h-[60vh] items-center justify-center px-4 py-12">
|
|
<div className="w-full max-w-lg overflow-hidden rounded-2xl bg-white ring-1 ring-zinc-200/60">
|
|
<div className="flex items-center gap-3 border-b border-zinc-100 px-6 py-4">
|
|
<span
|
|
aria-hidden="true"
|
|
className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-red-100 text-xs font-semibold text-red-700"
|
|
>
|
|
!
|
|
</span>
|
|
<span className="text-[11px] font-medium uppercase tracking-wider text-zinc-500">
|
|
API unreachable
|
|
</span>
|
|
</div>
|
|
|
|
<div className="px-6 py-6 sm:px-8">
|
|
<h1 className="text-2xl font-semibold tracking-tight text-zinc-900">
|
|
Couldn't reach the API
|
|
</h1>
|
|
<p className="mt-2 text-sm leading-relaxed text-zinc-600">
|
|
The dashboard fetches data from{" "}
|
|
<code className="rounded bg-zinc-100 px-1.5 py-0.5 font-mono text-xs text-zinc-700">
|
|
api-server:3000
|
|
</code>{" "}
|
|
on the internal docker network. The container may be down or
|
|
still starting. Wait a few seconds and retry.
|
|
</p>
|
|
|
|
<button
|
|
type="button"
|
|
onClick={reset}
|
|
className="mt-6 inline-flex items-center gap-2 rounded-full bg-zinc-900 px-5 py-2 text-xs font-medium text-white transition-colors hover:bg-zinc-700"
|
|
>
|
|
Retry
|
|
<span aria-hidden="true">→</span>
|
|
</button>
|
|
|
|
<div className="mt-8 border-t border-zinc-100 pt-4">
|
|
<div className="text-[11px] font-medium uppercase tracking-wider text-zinc-500">
|
|
Error
|
|
</div>
|
|
<pre className="mt-2 overflow-x-auto rounded-md bg-zinc-50 p-3 font-mono text-xs text-zinc-700 ring-1 ring-zinc-200/60">
|
|
{error.message}
|
|
{error.digest ? `\n\ndigest: ${error.digest}` : ""}
|
|
</pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|