From 09bfb17f03cf6d6d078d7a2b0f68832638a153a4 Mon Sep 17 00:00:00 2001 From: Michilis Date: Wed, 1 Jul 2026 06:06:22 +0000 Subject: [PATCH] Add custom error and global-error pages matching site design Adds app/error.tsx (client error boundary, reuses Header/Footer/Button) and app/global-error.tsx (root layout crash fallback with self-contained html/body and manually replicated styling), both bilingual (ES/EN) and matching the brand's colors, fonts, and tone. Co-Authored-By: Claude Sonnet 5 --- frontend/src/app/error.tsx | 54 +++++++++++++++++++++ frontend/src/app/global-error.tsx | 79 +++++++++++++++++++++++++++++++ 2 files changed, 133 insertions(+) create mode 100644 frontend/src/app/error.tsx create mode 100644 frontend/src/app/global-error.tsx diff --git a/frontend/src/app/error.tsx b/frontend/src/app/error.tsx new file mode 100644 index 0000000..8dfcd05 --- /dev/null +++ b/frontend/src/app/error.tsx @@ -0,0 +1,54 @@ +'use client'; + +import { useEffect } from 'react'; +import Link from 'next/link'; +import Header from '@/components/layout/Header'; +import Footer from '@/components/layout/Footer'; +import Button from '@/components/ui/Button'; + +export default function Error({ + error, + reset, +}: { + error: Error & { digest?: string }; + reset: () => void; +}) { + useEffect(() => { + if (process.env.NODE_ENV === 'development') { + console.error(error); + } + }, [error]); + + return ( +
+
+
+
+
馃槄
+

+ 隆Ups! Algo sali贸 mal +

+

+ Oops, something went wrong +

+

+ No fue tu culpa, fue un error de nuestro lado. Prueba de nuevo o vuelve al inicio mientras lo revisamos. +
+ It was not your fault, something broke on our end. Try again or head back home while we take a look. +

+
+ + + + +
+
+
+
+
+ ); +} diff --git a/frontend/src/app/global-error.tsx b/frontend/src/app/global-error.tsx new file mode 100644 index 0000000..f419e73 --- /dev/null +++ b/frontend/src/app/global-error.tsx @@ -0,0 +1,79 @@ +'use client'; + +import { useEffect } from 'react'; +import { Poppins } from 'next/font/google'; +import './globals.css'; + +const poppins = Poppins({ + subsets: ['latin'], + display: 'swap', + variable: '--font-poppins', + weight: ['400', '500', '600', '700'], +}); + +export default function GlobalError({ + error, + reset, +}: { + error: Error & { digest?: string }; + reset: () => void; +}) { + useEffect(() => { + if (process.env.NODE_ENV === 'development') { + console.error(error); + } + }, [error]); + + return ( + + +
+
+
+ + Spanglish + +
+
+ +
+
+
馃樀
+

+ 隆Ups! Algo sali贸 mal +

+

+ Oops, something went wrong +

+

+ Toda la p谩gina tuvo un problema al cargar. Prueba de nuevo o vuelve al inicio. +
+ The whole page had trouble loading. Try again or head back home. +

+
+ + + Ir al inicio 路 Go home + +
+
+
+ + +
+ + + ); +}