yap-blog/src/app/global-error.tsx
2026-07-02 21:32:33 -04:00

53 lines
1.5 KiB
TypeScript

"use client";
// Last-resort boundary: rendered when the root layout itself fails
// (e.g. the database is unreachable). Must provide its own <html>.
export default function GlobalError({
error,
reset,
}: {
error: Error & { digest?: string };
reset: () => void;
}) {
return (
<html lang="en">
<body
style={{
margin: 0,
minHeight: "100vh",
display: "grid",
placeItems: "center",
background: "#002b36",
color: "#839496",
fontFamily: "ui-sans-serif, system-ui, sans-serif",
}}
>
<div style={{ textAlign: "center", padding: "2rem" }}>
<h1 style={{ color: "#93a1a1", fontSize: "1.25rem" }}>The site is unavailable</h1>
<p style={{ fontSize: "0.875rem", maxWidth: "28rem" }}>
Something went wrong while loading the site
{error.digest ? ` (reference ${error.digest})` : ""}. Please try again in a moment.
</p>
<button
type="button"
onClick={reset}
style={{
marginTop: "1rem",
background: "#268bd2",
color: "#002b36",
border: "none",
borderRadius: "6px",
padding: "0.5rem 1rem",
fontSize: "0.875rem",
fontWeight: 600,
cursor: "pointer",
}}
>
Try again
</button>
</div>
</body>
</html>
);
}