79 lines
2.2 KiB
TypeScript
79 lines
2.2 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect } from "react";
|
|
|
|
/**
|
|
* Last-resort boundary for errors thrown in the root layout itself
|
|
* (before the locale layout / intl provider mount). It replaces the
|
|
* entire document, so it must render its own <html>/<body> and cannot
|
|
* use translations or rely on the app stylesheet being applied — styles
|
|
* are inlined with the palette's hex values so it renders correctly in
|
|
* isolation. Everything below the locale layout is handled by
|
|
* [locale]/error.tsx instead; this should almost never be seen.
|
|
*/
|
|
export default function GlobalError({
|
|
error,
|
|
reset,
|
|
}: {
|
|
error: Error & { digest?: string };
|
|
reset: () => void;
|
|
}) {
|
|
useEffect(() => {
|
|
console.error("Portal global error:", error);
|
|
}, [error]);
|
|
|
|
return (
|
|
<html lang="en" className="dark">
|
|
<body
|
|
style={{
|
|
margin: 0,
|
|
minHeight: "100vh",
|
|
display: "flex",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
background: "#0a0c10",
|
|
color: "#e8ecf4",
|
|
fontFamily: "system-ui, sans-serif",
|
|
padding: "20px",
|
|
}}
|
|
>
|
|
<div style={{ maxWidth: "28rem", textAlign: "center" }}>
|
|
<h1 style={{ fontSize: "1.25rem", fontWeight: 600, margin: "0 0 0.5rem" }}>
|
|
Something went wrong
|
|
</h1>
|
|
<p style={{ fontSize: "0.875rem", color: "#8892a4", margin: "0 0 1.5rem" }}>
|
|
An unexpected error occurred. Please try again.
|
|
</p>
|
|
{error?.digest && (
|
|
<p
|
|
style={{
|
|
fontSize: "11px",
|
|
fontFamily: "monospace",
|
|
color: "#565e6e",
|
|
margin: "0 0 1.5rem",
|
|
}}
|
|
>
|
|
{error.digest}
|
|
</p>
|
|
)}
|
|
<button
|
|
onClick={reset}
|
|
style={{
|
|
padding: "0.5rem 1rem",
|
|
borderRadius: "0.5rem",
|
|
border: "none",
|
|
background: "#00d4aa",
|
|
color: "#0a0c10",
|
|
fontSize: "0.875rem",
|
|
fontWeight: 500,
|
|
cursor: "pointer",
|
|
}}
|
|
>
|
|
Try again
|
|
</button>
|
|
</div>
|
|
</body>
|
|
</html>
|
|
);
|
|
}
|