66 lines
2.3 KiB
TypeScript
66 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="mx-auto flex min-h-[60vh] max-w-2xl items-center justify-center px-4 py-12">
|
|
<div className="w-full border-2 border-zinc-900 bg-white">
|
|
<div className="flex items-center gap-3 border-b-2 border-zinc-900 bg-yellow-300 px-4 py-2">
|
|
<span
|
|
aria-hidden="true"
|
|
className="inline-flex h-5 w-5 items-center justify-center bg-zinc-900 text-xs font-bold text-yellow-300"
|
|
>
|
|
!
|
|
</span>
|
|
<span className="font-mono text-[11px] font-bold uppercase tracking-[0.25em] text-zinc-900">
|
|
api unreachable
|
|
</span>
|
|
</div>
|
|
|
|
<div className="px-6 py-6 sm:px-8 sm:py-8">
|
|
<h1 className="font-mono text-2xl font-bold uppercase tracking-tight text-zinc-900 sm:text-3xl">
|
|
Couldn't reach the API
|
|
</h1>
|
|
<p className="mt-3 text-sm text-zinc-700 sm:text-base">
|
|
The dashboard fetches data from{" "}
|
|
<code className="rounded-sm bg-zinc-900 px-1.5 py-0.5 font-mono text-xs text-yellow-300">
|
|
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 border-2 border-zinc-900 bg-yellow-300 px-4 py-2 font-mono text-[11px] font-bold uppercase tracking-[0.2em] text-zinc-900 hover:bg-zinc-900 hover:text-yellow-300"
|
|
>
|
|
Retry →
|
|
</button>
|
|
|
|
<div className="mt-8 border-t-2 border-zinc-200 pt-4">
|
|
<div className="font-mono text-[10px] font-bold uppercase tracking-[0.25em] text-zinc-500">
|
|
error
|
|
</div>
|
|
<pre className="mt-2 overflow-x-auto rounded-sm bg-zinc-100 p-3 font-mono text-xs text-zinc-800">
|
|
{error.message}
|
|
{error.digest ? `\n\ndigest: ${error.digest}` : ""}
|
|
</pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|