Spaces:
Running
Running
| "use client"; | |
| import React, { useEffect, useState } from "react"; | |
| import Link from "next/link"; | |
| import { AlertCircle, RotateCcw, Home, ChevronDown, ChevronUp, Copy, Check } from "lucide-react"; | |
| export default function RootError({ | |
| error, | |
| reset, | |
| }: { | |
| error: Error & { digest?: string }; | |
| reset: () => void; | |
| }) { | |
| const [showDetails, setShowDetails] = useState(false); | |
| const [copied, setCopied] = useState(false); | |
| useEffect(() => { | |
| // Log error for client observability | |
| console.error("[RootError caught]:", error); | |
| }, [error]); | |
| const copyDiagnostic = () => { | |
| const text = `Digest: ${error.digest || "none"}\nMessage: ${error.message}\nStack: ${error.stack || "none"}`; | |
| navigator.clipboard?.writeText(text); | |
| setCopied(true); | |
| setTimeout(() => setCopied(false), 2000); | |
| }; | |
| return ( | |
| <div | |
| style={{ | |
| minHeight: "100vh", | |
| display: "flex", | |
| flexDirection: "column", | |
| alignItems: "center", | |
| justifyContent: "center", | |
| padding: "var(--space-6, 1.5rem)", | |
| background: `radial-gradient(ellipse 60% 50% at 50% 40%, rgba(239, 68, 68, 0.08) 0%, rgba(10, 9, 13, 1) 100%), var(--bg-primary, #0A090D)`, | |
| color: "var(--text-primary, #F6F4F8)", | |
| textAlign: "center", | |
| position: "relative", | |
| overflow: "hidden", | |
| }} | |
| > | |
| {/* Background grid */} | |
| <div | |
| aria-hidden="true" | |
| style={{ | |
| position: "absolute", | |
| inset: 0, | |
| backgroundImage: | |
| "linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px)", | |
| backgroundSize: "48px 48px", | |
| pointerEvents: "none", | |
| }} | |
| /> | |
| <div style={{ position: "relative", zIndex: 1, maxWidth: 520, width: "100%" }}> | |
| {/* Status Pill */} | |
| <div | |
| style={{ | |
| display: "inline-flex", | |
| alignItems: "center", | |
| gap: "var(--space-2, 0.5rem)", | |
| padding: "4px 12px", | |
| background: "rgba(239, 68, 68, 0.12)", | |
| border: "1px solid rgba(239, 68, 68, 0.35)", | |
| borderRadius: "9999px", | |
| fontSize: "var(--text-xs, 0.75rem)", | |
| fontWeight: 600, | |
| letterSpacing: "0.08em", | |
| color: "var(--color-error, #EF4444)", | |
| textTransform: "uppercase", | |
| marginBottom: "var(--space-6, 1.5rem)", | |
| }} | |
| > | |
| <AlertCircle size={13} /> | |
| <span>System Interruption</span> | |
| </div> | |
| {/* EasyUI Glyph-displacement 500 */} | |
| <div | |
| style={{ | |
| display: "flex", | |
| alignItems: "center", | |
| justifyContent: "center", | |
| gap: "var(--space-2, 0.5rem)", | |
| fontFamily: "var(--font-display, monospace)", | |
| fontSize: "clamp(4.5rem, 14vw, 7.5rem)", | |
| fontWeight: 800, | |
| lineHeight: 1, | |
| letterSpacing: "-0.04em", | |
| userSelect: "none", | |
| marginBottom: "var(--space-4, 1rem)", | |
| }} | |
| > | |
| <span | |
| style={{ | |
| color: "var(--text-primary, #F6F4F8)", | |
| display: "inline-block", | |
| animation: "easyui-glyph-bounce 4s ease-in-out infinite", | |
| textShadow: "0 0 30px rgba(255, 255, 255, 0.1)", | |
| }} | |
| > | |
| 5 | |
| </span> | |
| <span | |
| style={{ | |
| color: "var(--color-error, #EF4444)", | |
| display: "inline-block", | |
| animation: "easyui-glyph-bounce 4s ease-in-out 0.25s infinite", | |
| textShadow: "0 0 40px rgba(239, 68, 68, 0.4)", | |
| }} | |
| > | |
| 0 | |
| </span> | |
| <span | |
| style={{ | |
| color: "var(--text-primary, #F6F4F8)", | |
| display: "inline-block", | |
| animation: "easyui-glyph-bounce 4s ease-in-out 0.5s infinite", | |
| textShadow: "0 0 30px rgba(255, 255, 255, 0.1)", | |
| }} | |
| > | |
| 0 | |
| </span> | |
| </div> | |
| {/* Headline */} | |
| <h1 | |
| style={{ | |
| fontFamily: "var(--font-display, inherit)", | |
| fontSize: "clamp(1.4rem, 3.5vw, 1.875rem)", | |
| fontWeight: 700, | |
| letterSpacing: "-0.02em", | |
| marginBottom: "var(--space-3, 0.75rem)", | |
| }} | |
| > | |
| Something hit a technical snag | |
| </h1> | |
| {/* Description */} | |
| <p | |
| style={{ | |
| fontSize: "var(--text-sm, 0.875rem)", | |
| color: "var(--text-secondary, #A7A3B4)", | |
| lineHeight: 1.6, | |
| marginBottom: "var(--space-6, 1.5rem)", | |
| }} | |
| > | |
| Our application encountered an unexpected runtime error. We've logged the incident and our | |
| audio engineers are looking into it. | |
| </p> | |
| {/* Action Buttons */} | |
| <div | |
| style={{ | |
| display: "flex", | |
| flexWrap: "wrap", | |
| gap: "var(--space-3, 0.75rem)", | |
| justifyContent: "center", | |
| marginBottom: "var(--space-6, 1.5rem)", | |
| }} | |
| > | |
| <button | |
| type="button" | |
| onClick={() => reset()} | |
| className="btn btn-primary" | |
| style={{ | |
| display: "inline-flex", | |
| alignItems: "center", | |
| gap: "var(--space-2, 0.5rem)", | |
| padding: "var(--space-3, 0.75rem) var(--space-6, 1.5rem)", | |
| fontSize: "var(--text-sm, 0.875rem)", | |
| fontWeight: 600, | |
| }} | |
| > | |
| <RotateCcw size={15} /> Try Again | |
| </button> | |
| <Link | |
| href="/dashboard" | |
| className="btn btn-secondary" | |
| style={{ | |
| display: "inline-flex", | |
| alignItems: "center", | |
| gap: "var(--space-2, 0.5rem)", | |
| textDecoration: "none", | |
| padding: "var(--space-3, 0.75rem) var(--space-6, 1.5rem)", | |
| fontSize: "var(--text-sm, 0.875rem)", | |
| fontWeight: 600, | |
| }} | |
| > | |
| <Home size={15} /> Go to Dashboard | |
| </Link> | |
| </div> | |
| {/* Diagnostic Drawer */} | |
| <div style={{ width: "100%", textAlign: "left" }}> | |
| <button | |
| type="button" | |
| onClick={() => setShowDetails(!showDetails)} | |
| style={{ | |
| background: "transparent", | |
| border: "none", | |
| color: "var(--text-tertiary, #6D697C)", | |
| fontSize: "var(--text-xs, 0.75rem)", | |
| cursor: "pointer", | |
| display: "inline-flex", | |
| alignItems: "center", | |
| gap: 4, | |
| margin: "0 auto", | |
| }} | |
| > | |
| {showDetails ? ( | |
| <> | |
| Hide error diagnostic <ChevronUp size={12} /> | |
| </> | |
| ) : ( | |
| <> | |
| View error diagnostic <ChevronDown size={12} /> | |
| </> | |
| )} | |
| </button> | |
| {showDetails && ( | |
| <div | |
| style={{ | |
| marginTop: "var(--space-3, 0.75rem)", | |
| padding: "var(--space-3, 0.75rem)", | |
| background: "rgba(0, 0, 0, 0.6)", | |
| border: "1px solid var(--border-color, #272430)", | |
| borderRadius: "var(--radius-sm, 2px)", | |
| fontFamily: "var(--font-mono, monospace)", | |
| fontSize: "11px", | |
| color: "var(--text-secondary, #A7A3B4)", | |
| position: "relative", | |
| }} | |
| > | |
| <div | |
| style={{ | |
| display: "flex", | |
| justifyContent: "space-between", | |
| alignItems: "center", | |
| borderBottom: "1px solid var(--border-color-subtle, #1C1924)", | |
| paddingBottom: 6, | |
| marginBottom: 8, | |
| }} | |
| > | |
| <span style={{ color: "var(--color-primary, #FF9F0A)" }}> | |
| Digest: {error.digest || "N/A"} | |
| </span> | |
| <button | |
| type="button" | |
| onClick={copyDiagnostic} | |
| style={{ | |
| background: "none", | |
| border: "none", | |
| color: copied ? "var(--color-success, #10B981)" : "var(--text-tertiary, #6D697C)", | |
| fontSize: "10px", | |
| cursor: "pointer", | |
| display: "flex", | |
| alignItems: "center", | |
| gap: 3, | |
| }} | |
| > | |
| {copied ? ( | |
| <> | |
| <Check size={11} /> Copied | |
| </> | |
| ) : ( | |
| <> | |
| <Copy size={11} /> Copy | |
| </> | |
| )} | |
| </button> | |
| </div> | |
| <div style={{ maxHeight: 160, overflowY: "auto", whiteSpace: "pre-wrap", wordBreak: "break-all" }}> | |
| <p style={{ color: "var(--color-error, #EF4444)", marginBottom: 4 }}> | |
| {error.name}: {error.message} | |
| </p> | |
| {error.stack} | |
| </div> | |
| </div> | |
| )} | |
| </div> | |
| </div> | |
| </div> | |
| ); | |
| } | |