Polish public error and 404 screens with brand atmosphere.
Local Build and Deploy / deploy (push) Successful in 1m31s
Local Build and Deploy / deploy (push) Successful in 1m31s
Shared ErrorScreen composition, i18n for en/nl/it, Sentry on route errors, and a self-contained global-error fallback that matches the hotel gold theme. Co-authored-by: Cursor <[email protected]>
This commit is contained in:
SimoandCursor committed
1 parent
b22725d3a9
commit
1f552c2822
8 files changed
+348
-80
No files matched your search
+32
-42
@@ -1,12 +1,15 @@
|
||||
"use client";
|
||||
|
||||
import * as Sentry from "@sentry/nextjs";
|
||||
import { Home, RefreshCw } from "lucide-react";
|
||||
import Link from "next/link";
|
||||
import { useTranslations } from "next-intl";
|
||||
import { useEffect } from "react";
|
||||
import { ErrorScreen } from "@/components/error-screen";
|
||||
|
||||
/**
|
||||
* Route-segment error boundary. Renders inside the root layout (so the shell
|
||||
* stays), shows a friendly card, and offers a reset. The raw error is logged to
|
||||
* the console, never shown to the user.
|
||||
* stays). Never shows the raw error to the user.
|
||||
*/
|
||||
export default function ErrorPage({
|
||||
error,
|
||||
@@ -15,51 +18,38 @@ export default function ErrorPage({
|
||||
error: Error & { digest?: string };
|
||||
reset: () => void;
|
||||
}) {
|
||||
const t = useTranslations("pages.error");
|
||||
|
||||
useEffect(() => {
|
||||
console.error(error);
|
||||
Sentry.captureException(error);
|
||||
}, [error]);
|
||||
|
||||
return (
|
||||
<main style={{ display: "grid", gap: "1.5rem" }}>
|
||||
<div className="content-card">
|
||||
<div className="content-card-head">
|
||||
<span className="content-card-icon" aria-hidden>
|
||||
⚠️
|
||||
</span>
|
||||
<div className="content-card-head-text">
|
||||
<p className="content-card-title">Something went wrong</p>
|
||||
<p className="content-card-subtitle">
|
||||
An unexpected error occurred
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="content-card-body">
|
||||
<p className="muted" style={{ marginTop: 0 }}>
|
||||
Try again — if the problem persists, please contact a member of
|
||||
staff.
|
||||
<ErrorScreen
|
||||
code={t("code")}
|
||||
title={t("title")}
|
||||
subtitle={t("subtitle")}
|
||||
body={t("body")}
|
||||
actions={
|
||||
<>
|
||||
<button type="button" className="btn btn-primary" onClick={() => reset()}>
|
||||
<RefreshCw className="error-screen-btn-icon" aria-hidden />
|
||||
{t("tryAgain")}
|
||||
</button>
|
||||
<Link className="btn btn-outline" href="/">
|
||||
<Home className="error-screen-btn-icon" aria-hidden />
|
||||
{t("backHome")}
|
||||
</Link>
|
||||
</>
|
||||
}
|
||||
footer={
|
||||
error.digest ? (
|
||||
<p className="error-screen-digest">
|
||||
{t("reference", { digest: error.digest })}
|
||||
</p>
|
||||
<div style={{ display: "flex", gap: "0.6rem", flexWrap: "wrap" }}>
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-primary"
|
||||
onClick={() => reset()}
|
||||
>
|
||||
Try again
|
||||
</button>
|
||||
<Link className="btn btn-outline" href="/">
|
||||
Back home
|
||||
</Link>
|
||||
</div>
|
||||
{error.digest ? (
|
||||
<p
|
||||
className="muted"
|
||||
style={{ marginTop: "0.75rem", fontSize: "0.75rem" }}
|
||||
>
|
||||
Reference: {error.digest}
|
||||
</p>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
) : null
|
||||
}
|
||||
/>
|
||||
);
|
||||
}
|
||||
+81
-25
@@ -6,7 +6,7 @@ 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.
|
||||
* the app shell or CSS variables from globals.css.
|
||||
*/
|
||||
export default function GlobalError({
|
||||
error,
|
||||
@@ -27,35 +27,91 @@ export default function GlobalError({
|
||||
minHeight: "100vh",
|
||||
display: "grid",
|
||||
placeItems: "center",
|
||||
fontFamily: "Nunito, system-ui, sans-serif",
|
||||
background: "#0f1117",
|
||||
color: "#e5e7eb",
|
||||
padding: "1.5rem",
|
||||
fontFamily:
|
||||
'Nunito, ui-rounded, "Segoe UI", system-ui, sans-serif',
|
||||
background:
|
||||
"radial-gradient(ellipse 80% 60% at 50% -10%, rgba(238, 180, 37, 0.22), transparent 55%), linear-gradient(165deg, #141821 0%, #0c0e14 45%, #10141c 100%)",
|
||||
color: "#f3f4f6",
|
||||
}}
|
||||
>
|
||||
<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.
|
||||
<style>{`
|
||||
@keyframes error-rise {
|
||||
from { opacity: 0; transform: translateY(12px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
.ge-panel {
|
||||
animation: error-rise 0.45s ease-out both;
|
||||
width: min(100%, 26rem);
|
||||
text-align: center;
|
||||
padding: 2.25rem 1.75rem;
|
||||
border-radius: 1.25rem;
|
||||
border: 1px solid rgba(238, 180, 37, 0.22);
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgba(255, 255, 255, 0.06),
|
||||
rgba(255, 255, 255, 0.02)
|
||||
);
|
||||
box-shadow:
|
||||
0 24px 48px rgba(0, 0, 0, 0.35),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.06);
|
||||
}
|
||||
.ge-code {
|
||||
margin: 0 0 0.75rem;
|
||||
font-family: "Pixelify Sans", "Courier New", monospace;
|
||||
font-size: clamp(2.5rem, 8vw, 3.5rem);
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.08em;
|
||||
line-height: 1;
|
||||
color: #eeb425;
|
||||
text-shadow: 0 0 40px rgba(238, 180, 37, 0.35);
|
||||
}
|
||||
.ge-title {
|
||||
margin: 0 0 0.5rem;
|
||||
font-size: 1.35rem;
|
||||
font-weight: 800;
|
||||
}
|
||||
.ge-body {
|
||||
margin: 0 0 1.5rem;
|
||||
color: #9ca3af;
|
||||
font-size: 0.95rem;
|
||||
line-height: 1.55;
|
||||
}
|
||||
.ge-btn {
|
||||
appearance: none;
|
||||
border: none;
|
||||
border-radius: 0.65rem;
|
||||
padding: 0.65rem 1.35rem;
|
||||
font: inherit;
|
||||
font-weight: 800;
|
||||
cursor: pointer;
|
||||
background: #eeb425;
|
||||
color: #1a1a2e;
|
||||
transition: transform 0.15s ease, filter 0.15s ease;
|
||||
}
|
||||
.ge-btn:hover { filter: brightness(1.05); transform: translateY(-1px); }
|
||||
.ge-btn:active { transform: translateY(0); }
|
||||
.ge-digest {
|
||||
margin: 1.25rem 0 0;
|
||||
font-size: 0.72rem;
|
||||
color: #6b7280;
|
||||
font-variant-numeric: tabular-nums;
|
||||
word-break: break-all;
|
||||
}
|
||||
`}</style>
|
||||
<div className="ge-panel" role="alert">
|
||||
<p className="ge-code">Error</p>
|
||||
<h1 className="ge-title">Something went wrong</h1>
|
||||
<p className="ge-body">
|
||||
The hotel ran into an unexpected error. Please try again — if it
|
||||
keeps happening, contact staff.
|
||||
</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",
|
||||
}}
|
||||
>
|
||||
<button type="button" className="ge-btn" onClick={() => reset()}>
|
||||
Try again
|
||||
</button>
|
||||
{error.digest ? (
|
||||
<p className="ge-digest">Reference: {error.digest}</p>
|
||||
) : null}
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1357,3 +1357,130 @@ details[open] > summary .details-open\:block {
|
||||
details[open] > summary .details-open\:rotate-180 {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
/* ── Public error / 404 screen ───────────────────────────── */
|
||||
@keyframes error-screen-rise {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(14px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.error-screen {
|
||||
position: relative;
|
||||
isolation: isolate;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
min-height: min(70vh, 36rem);
|
||||
padding: 2rem 1rem 3rem;
|
||||
}
|
||||
|
||||
.error-screen-glow {
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
inset: 10% 15% auto;
|
||||
height: 12rem;
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(
|
||||
ellipse at center,
|
||||
color-mix(in srgb, var(--color-primary) 35%, transparent),
|
||||
transparent 70%
|
||||
);
|
||||
filter: blur(8px);
|
||||
z-index: 0;
|
||||
opacity: 0.85;
|
||||
}
|
||||
|
||||
.error-screen-panel {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
width: min(100%, 28rem);
|
||||
text-align: center;
|
||||
padding: 2.25rem 1.75rem 2rem;
|
||||
border-radius: 1.25rem;
|
||||
border: 1px solid color-mix(in srgb, var(--color-primary) 28%, var(--border-subtle));
|
||||
background: linear-gradient(
|
||||
165deg,
|
||||
color-mix(in srgb, var(--color-primary) 10%, var(--color-surface)),
|
||||
var(--color-surface)
|
||||
);
|
||||
box-shadow:
|
||||
0 20px 48px color-mix(in srgb, rgb(0, 0, 0) 18%, transparent),
|
||||
inset 0 1px 0 color-mix(in srgb, var(--color-primary) 18%, transparent);
|
||||
animation: error-screen-rise 0.45s ease-out both;
|
||||
}
|
||||
|
||||
.error-screen-code {
|
||||
margin: 0 0 0.65rem;
|
||||
font-family: var(--font-pixel), "Courier New", monospace;
|
||||
font-size: clamp(2.75rem, 9vw, 3.75rem);
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.06em;
|
||||
line-height: 1;
|
||||
color: var(--color-primary-readable, var(--color-primary));
|
||||
text-shadow: 0 0 36px color-mix(in srgb, var(--color-primary) 45%, transparent);
|
||||
}
|
||||
|
||||
.error-screen-title {
|
||||
margin: 0 0 0.4rem;
|
||||
font-size: 1.4rem;
|
||||
font-weight: 800;
|
||||
letter-spacing: -0.02em;
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.error-screen-subtitle {
|
||||
margin: 0 0 0.85rem;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
color: var(--color-text);
|
||||
opacity: 0.88;
|
||||
}
|
||||
|
||||
.error-screen-body {
|
||||
margin: 0 0 1.5rem;
|
||||
font-size: 0.95rem;
|
||||
line-height: 1.55;
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.error-screen-actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.65rem;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.error-screen-actions .btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.45rem;
|
||||
}
|
||||
|
||||
.error-screen-btn-icon {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.error-screen-footer {
|
||||
margin-top: 1.25rem;
|
||||
}
|
||||
|
||||
.error-screen-digest {
|
||||
margin: 0;
|
||||
font-size: 0.72rem;
|
||||
color: var(--color-text-muted);
|
||||
font-variant-numeric: tabular-nums;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.error-screen-panel {
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
+20
-13
@@ -1,22 +1,29 @@
|
||||
import { Home, Newspaper } from "lucide-react";
|
||||
import Link from "next/link";
|
||||
import { ContentCard } from "@/components/public/ui";
|
||||
import { getTranslations } from "next-intl/server";
|
||||
import { ErrorScreen } from "@/components/error-screen";
|
||||
|
||||
export default async function NotFound() {
|
||||
const t = await getTranslations("pages.notFound");
|
||||
|
||||
export default function NotFound() {
|
||||
return (
|
||||
<main style={{ display: "grid", gap: "1.5rem" }}>
|
||||
<ContentCard icon="🧭" title="Page not found" subtitle="Error 404">
|
||||
<p className="muted" style={{ marginTop: 0 }}>
|
||||
The page you’re looking for doesn’t exist or has moved.
|
||||
</p>
|
||||
<div style={{ display: "flex", gap: "0.6rem", flexWrap: "wrap" }}>
|
||||
<ErrorScreen
|
||||
code={t("code")}
|
||||
title={t("title")}
|
||||
subtitle={t("subtitle")}
|
||||
body={t("body")}
|
||||
actions={
|
||||
<>
|
||||
<Link className="btn btn-primary" href="/">
|
||||
Back home
|
||||
<Home className="error-screen-btn-icon" aria-hidden />
|
||||
{t("backHome")}
|
||||
</Link>
|
||||
<Link className="btn btn-outline" href="/news">
|
||||
Latest news
|
||||
<Newspaper className="error-screen-btn-icon" aria-hidden />
|
||||
{t("latestNews")}
|
||||
</Link>
|
||||
</div>
|
||||
</ContentCard>
|
||||
</main>
|
||||
</>
|
||||
}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,37 @@
|
||||
import type { ReactNode } from "react";
|
||||
|
||||
/**
|
||||
* Shared public error / empty-route composition.
|
||||
* Used by route error.tsx and not-found.tsx (inside the app shell).
|
||||
*/
|
||||
export function ErrorScreen({
|
||||
code,
|
||||
title,
|
||||
subtitle,
|
||||
body,
|
||||
actions,
|
||||
footer,
|
||||
}: {
|
||||
code: string;
|
||||
title: string;
|
||||
subtitle: string;
|
||||
body: string;
|
||||
actions: ReactNode;
|
||||
footer?: ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<main className="error-screen">
|
||||
<div className="error-screen-glow" aria-hidden />
|
||||
<section className="error-screen-panel" aria-labelledby="error-screen-title">
|
||||
<p className="error-screen-code">{code}</p>
|
||||
<h1 id="error-screen-title" className="error-screen-title">
|
||||
{title}
|
||||
</h1>
|
||||
<p className="error-screen-subtitle">{subtitle}</p>
|
||||
<p className="error-screen-body">{body}</p>
|
||||
<div className="error-screen-actions">{actions}</div>
|
||||
{footer ? <div className="error-screen-footer">{footer}</div> : null}
|
||||
</section>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
@@ -40,6 +40,23 @@
|
||||
"darkMode": "Dark mode"
|
||||
},
|
||||
"pages": {
|
||||
"error": {
|
||||
"code": "Error",
|
||||
"title": "Something went wrong",
|
||||
"subtitle": "The hotel hit an unexpected snag.",
|
||||
"body": "Try again in a moment. If it keeps happening, contact staff with the reference below.",
|
||||
"tryAgain": "Try again",
|
||||
"backHome": "Back home",
|
||||
"reference": "Reference: {digest}"
|
||||
},
|
||||
"notFound": {
|
||||
"code": "404",
|
||||
"title": "Page not found",
|
||||
"subtitle": "This room doesn’t exist — or the furniture was moved.",
|
||||
"body": "Check the link, or head back to the lobby.",
|
||||
"backHome": "Back home",
|
||||
"latestNews": "Latest news"
|
||||
},
|
||||
"staff": {
|
||||
"title": "Staff",
|
||||
"subtitle": "The team behind the hotel",
|
||||
|
||||
@@ -40,6 +40,23 @@
|
||||
"darkMode": "Tema scuro"
|
||||
},
|
||||
"pages": {
|
||||
"error": {
|
||||
"code": "Errore",
|
||||
"title": "Qualcosa è andato storto",
|
||||
"subtitle": "L'hotel ha incontrato un imprevisto.",
|
||||
"body": "Riprova tra poco. Se continua, contatta lo staff indicando il riferimento qui sotto.",
|
||||
"tryAgain": "Riprova",
|
||||
"backHome": "Torna alla home",
|
||||
"reference": "Riferimento: {digest}"
|
||||
},
|
||||
"notFound": {
|
||||
"code": "404",
|
||||
"title": "Pagina non trovata",
|
||||
"subtitle": "Questa stanza non esiste — o i mobili sono stati spostati.",
|
||||
"body": "Controlla il link, oppure torna alla lobby.",
|
||||
"backHome": "Torna alla home",
|
||||
"latestNews": "Ultime notizie"
|
||||
},
|
||||
"staff": {
|
||||
"title": "Staff",
|
||||
"subtitle": "Il team dietro l'hotel",
|
||||
|
||||
@@ -40,6 +40,23 @@
|
||||
"darkMode": "Donkere modus"
|
||||
},
|
||||
"pages": {
|
||||
"error": {
|
||||
"code": "Fout",
|
||||
"title": "Er ging iets mis",
|
||||
"subtitle": "Het hotel liep tegen een onverwachte snag aan.",
|
||||
"body": "Probeer het zo opnieuw. Blijft het probleem? Neem contact op met de staff en noem de referentie hieronder.",
|
||||
"tryAgain": "Opnieuw proberen",
|
||||
"backHome": "Terug naar home",
|
||||
"reference": "Referentie: {digest}"
|
||||
},
|
||||
"notFound": {
|
||||
"code": "404",
|
||||
"title": "Pagina niet gevonden",
|
||||
"subtitle": "Deze kamer bestaat niet — of de meubels zijn verplaatst.",
|
||||
"body": "Controleer de link, of ga terug naar de lobby.",
|
||||
"backHome": "Terug naar home",
|
||||
"latestNews": "Laatste nieuws"
|
||||
},
|
||||
"staff": {
|
||||
"title": "Team",
|
||||
"subtitle": "Het team achter het hotel",
|
||||
|
||||
Reference in new issue
Block a user