1"use client";
2
3
12export default function GlobalError({
13 error,
14 reset
15}: {
16 error: Error & { digest?: string };
17 reset: () => void;
18}) {
19 return (
20 <html lang="en">
21 <body
22 style={{
23 margin: 0,
24 minHeight: "100vh",
25 display: "flex",
26 alignItems: "center",
27 justifyContent: "center",
28 fontFamily: "ui-sans-serif, system-ui, sans-serif",
29 background: "#fafafa",
30 color: "#18181b"
31 }}
32 >
33 <div
34 style={{
35 maxWidth: 420,
36 margin: 24,
37 padding: 24,
38 borderRadius: 12,
39 border: "1px solid #e4e4e7",
40 background: "#fff",
41 boxShadow: "0 1px 3px rgba(0,0,0,0.06)",
42 textAlign: "center"
43 }}
44 >
45 <h1 style={{ fontSize: 16, fontWeight: 600, margin: "0 0 8px" }}>
46 The app failed to start
47 </h1>
48 <p style={{ fontSize: 14, color: "#71717a", margin: "0 0 4px" }}>
49 Something went wrong while loading the interface. Reload to try again — your
50 content is stored on the server and is safe.
51 </p>
52 {error?.digest ? (
53 <p style={{ fontSize: 11, color: "#a1a1aa", wordBreak: "break-all" }}>
54 Ref: {error.digest}
55 </p>
56 ) : null}
57 <button
58 type="button"
59 onClick={() => reset()}
60 style={{
61 marginTop: 16,
62 padding: "8px 16px",
63 borderRadius: 8,
64 border: "none",
65 background: "#18181b",
66 color: "#fff",
67 fontSize: 14,
68 cursor: "pointer"
69 }}
70 >
71 Reload
72 </button>
73 </div>
74 </body>
75 </html>
76 );
77}
78