fix: add self-contained global-error.tsx (useContext null during prerender)

2026-10-28 18:24:07 +00:00
1 parent c2b296d605
commit 945ce598d2
@@ -0,0 +1,58 @@
+"use client";
+
+// global-error.tsx — Next.js special page, rendered OUTSIDE the root layout.
+// It must be fully self-contained: no ThemeProvider, no Sonner, no context hooks.
+// Replaces the entire <html> + <body> tree when a global error occurs.
+
+export default function GlobalError({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  return (
+    <html lang="de">
+      <body
+        style={{
+          margin: 0,
+          minHeight: "100vh",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          fontFamily: "system-ui, -apple-system, sans-serif",
+          background: "#0a0a0a",
+          color: "#fafafa",
+        }}
+      >
+        <div style={{ textAlign: "center", padding: "2rem", maxWidth: 480 }}>
+          <h1 style={{ fontSize: "1.5rem", marginBottom: "0.5rem" }}>
+            Etwas ist schiefgelaufen
+          </h1>
+          <p style={{ color: "#a1a1a1", fontSize: "0.875rem", marginBottom: "1.5rem" }}>
+            Ein unerwarteter Fehler ist aufgetreten. Bitte versuche es erneut.
+          </p>
+          {error.digest && (
+            <p style={{ color: "#525252", fontSize: "0.75rem", marginBottom: "1.5rem" }}>
+              Fehler-ID: {error.digest}
+            </p>
+          )}
+          <button
+            onClick={() => reset()}
+            style={{
+              padding: "0.5rem 1rem",
+              borderRadius: "0.375rem",
+              border: "1px solid #404040",
+              background: "transparent",
+              color: "#fafafa",
+              cursor: "pointer",
+              fontSize: "0.875rem",
+            }}
+          >
+            Erneut versuchen
+          </button>
+        </div>
+      </body>
+    </html>
+  );
+}