63 lines
1.4 KiB
TypeScript
63 lines
1.4 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect } from "react";
|
|
|
|
/**
|
|
* Last-resort boundary for errors thrown in the root layout itself. It replaces
|
|
* the whole document, so it must render its own <html>/<body> and can't rely on
|
|
* the app shell or its CSS variables.
|
|
*/
|
|
export default function GlobalError({
|
|
error,
|
|
reset,
|
|
}: {
|
|
error: Error & { digest?: string };
|
|
reset: () => void;
|
|
}) {
|
|
useEffect(() => {
|
|
console.error(error);
|
|
}, [error]);
|
|
|
|
return (
|
|
<html lang="en">
|
|
<body
|
|
style={{
|
|
margin: 0,
|
|
minHeight: "100vh",
|
|
display: "grid",
|
|
placeItems: "center",
|
|
fontFamily: "Nunito, system-ui, sans-serif",
|
|
background: "#0f1117",
|
|
color: "#e5e7eb",
|
|
}}
|
|
>
|
|
<div style={{ textAlign: "center", padding: "2rem", maxWidth: 420 }}>
|
|
<div style={{ fontSize: "2.5rem" }}>⚠️</div>
|
|
<h1 style={{ margin: "0.5rem 0", fontSize: "1.4rem" }}>
|
|
Something went wrong
|
|
</h1>
|
|
<p style={{ color: "#9ca3af", marginTop: 0 }}>
|
|
The hotel ran into an unexpected error. Please try again.
|
|
</p>
|
|
<button
|
|
type="button"
|
|
onClick={() => reset()}
|
|
style={{
|
|
marginTop: "1rem",
|
|
padding: "0.55rem 1.4rem",
|
|
border: "none",
|
|
borderRadius: 10,
|
|
fontWeight: 700,
|
|
cursor: "pointer",
|
|
background: "#f59e0b",
|
|
color: "#1a1a2e",
|
|
}}
|
|
>
|
|
Try again
|
|
</button>
|
|
</div>
|
|
</body>
|
|
</html>
|
|
);
|
|
}
|