Spaces:
Running
Running
File size: 2,507 Bytes
93c113e | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 | "use client"
import { useEffect } from "react"
/**
* Top-level error boundary for every route under app/. Next.js renders
* this when a server component throws or a client render exception
* escapes the closest boundary. Replaces the bare default
* "Application error: a client-side exception has occurred" overlay
* with a recoverable affordance so a transient backend hiccup (cold
* parquet cache, slow first query) doesn't strand the reader on an
* unfriendly screen.
*/
export default function RouteError({
error,
reset,
}: {
error: Error & { digest?: string }
reset: () => void
}) {
useEffect(() => {
if (typeof window !== "undefined" && "console" in window) {
console.error("[route-error]", error)
}
}, [error])
return (
<div
style={{
minHeight: "60vh",
display: "flex",
alignItems: "center",
justifyContent: "center",
padding: "24px",
}}
>
<div
style={{
maxWidth: 460,
width: "100%",
padding: "28px 28px 24px",
border: "1px solid var(--border-soft)",
background: "var(--bg)",
}}
>
<div
className="font-mono uppercase"
style={{
fontSize: 10,
letterSpacing: "0.18em",
color: "var(--fg-subtle)",
marginBottom: 14,
}}
>
Something went wrong
</div>
<p
style={{
margin: 0,
color: "var(--fg)",
fontSize: 15,
lineHeight: 1.55,
}}
>
We couldn't load this view. The data backend may still be
warming up — most cold-start hiccups clear within a few
seconds.
</p>
<div
style={{
display: "flex",
gap: 10,
marginTop: 20,
flexWrap: "wrap",
}}
>
<button type="button" className="btn-ec" onClick={() => reset()}>
Try again
</button>
<a href="/" className="btn-ec outline">
Back to home
</a>
</div>
{error.digest && (
<div
className="font-mono"
style={{
marginTop: 18,
fontSize: 10,
color: "var(--fg-subtle)",
wordBreak: "break-all",
}}
>
ref: {error.digest}
</div>
)}
</div>
</div>
)
}
|