From f42b29e4ac0ef43febe0f9b433fa82a1969c48df Mon Sep 17 00:00:00 2001
From: Oumar Mimouni <oumar.mimouni@gmail.com>
Date: Fri, 31 Jan 2025 14:01:18 +0100
Subject: [PATCH 1/2] feat(router): add global error boundary for route errors
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Use React Router’s useRouteError to get error details.
- Create an ErrorPage component in pages/public/error.tsx.
- Show useful error messages based on status codes.
Add a button to help users go back or retry.
---
 apps/client/src/pages/public/error.tsx | 41 ++++++++++++++++++++++++++
 apps/client/src/router/index.tsx       |  3 +-
 2 files changed, 43 insertions(+), 1 deletion(-)
 create mode 100644 apps/client/src/pages/public/error.tsx

diff --git a/apps/client/src/pages/public/error.tsx b/apps/client/src/pages/public/error.tsx
new file mode 100644
index 000000000..f1158e89f
--- /dev/null
+++ b/apps/client/src/pages/public/error.tsx
@@ -0,0 +1,41 @@
+import { useRouteError } from "react-router";
+import { Button } from "@reactive-resume/ui";
+
+type RouterError = {
+    status: number;
+    statusText?: string;
+    data: string;
+    message?: string;
+} & Error;
+
+export const ErrorPage = () => {
+    const error = useRouteError() as RouterError;
+
+    return (
+        <main className="flex items-center justify-center min-h-screen p-4">
+            <div className="w-full max-w-sm space-y-6">
+                <h4 className="flex flex-col text-4xl font-bold text-white">
+                    <span>
+                        Error {error.status}
+                    </span>
+                    {error.statusText && <span className="text-base font-normal">{error.statusText}</span>}
+                </h4>
+
+                <p className="text-sm text-gray-500 break-words">
+                    {error.data || error.message}
+                </p>
+
+                <div className="pt-2">
+                    <a
+                        href={process.env.PUBLIC_URL}
+                        className="inline-block"
+                    >
+                        <Button>
+                            Go to home
+                        </Button>
+                    </a>
+                </div>
+            </div>
+        </main>
+    );
+};
diff --git a/apps/client/src/router/index.tsx b/apps/client/src/router/index.tsx
index ea6496570..99fd390cf 100644
--- a/apps/client/src/router/index.tsx
+++ b/apps/client/src/router/index.tsx
@@ -20,9 +20,10 @@ import { Providers } from "../providers";
 import { AuthGuard } from "./guards/auth";
 import { GuestGuard } from "./guards/guest";
 import { authLoader } from "./loaders/auth";
+import { ErrorPage } from "../pages/public/error";
 
 export const routes = createRoutesFromElements(
-  <Route element={<Providers />}>
+  <Route element={<Providers />} errorElement={<ErrorPage />}>
     <Route element={<HomeLayout />}>
       <Route path="/" element={<HomePage />} />
     </Route>

From e438602773373f45fb69f377cb48eda924821a66 Mon Sep 17 00:00:00 2001
From: Oumar Mimouni <oumar.mimouni@gmail.com>
Date: Fri, 31 Jan 2025 14:38:17 +0100
Subject: [PATCH 2/2] fix(errorpage): added localProvider, replaced a with Link
 and added custom messages

- Add LocaleProvider wrapper for i18n support
- Replace a tag with React Router Link components
- Add custom error messages for different HTTP status codes
- Implement proper translation support using Trans and t components
---
 apps/client/src/pages/public/error.tsx | 69 +++++++++++++++++---------
 1 file changed, 46 insertions(+), 23 deletions(-)

diff --git a/apps/client/src/pages/public/error.tsx b/apps/client/src/pages/public/error.tsx
index f1158e89f..e96ddf314 100644
--- a/apps/client/src/pages/public/error.tsx
+++ b/apps/client/src/pages/public/error.tsx
@@ -1,5 +1,8 @@
-import { useRouteError } from "react-router";
+// External libraries
+import { Trans, t } from "@lingui/macro";
+import { Link, useRouteError } from "react-router";
 import { Button } from "@reactive-resume/ui";
+import { LocaleProvider } from "@/client/providers/locale";
 
 type RouterError = {
     status: number;
@@ -8,34 +11,54 @@ type RouterError = {
     message?: string;
 } & Error;
 
+const getErrorMessage = (status: number) => {
+    switch (status) {
+        case 404:
+            return "The page you're looking for doesn't exist.";
+        case 403:
+            return "You don't have permission to access this page.";
+        case 500:
+            return "An internal server error occurred.";
+        case 401:
+            return "You are not authorized to access this page.";
+        case 400:
+            return "The request was invalid.";
+        default:
+            return "An unexpected error occurred.";
+    }
+};
+
 export const ErrorPage = () => {
     const error = useRouteError() as RouterError;
 
     return (
-        <main className="flex items-center justify-center min-h-screen p-4">
-            <div className="w-full max-w-sm space-y-6">
-                <h4 className="flex flex-col text-4xl font-bold text-white">
-                    <span>
-                        Error {error.status}
-                    </span>
-                    {error.statusText && <span className="text-base font-normal">{error.statusText}</span>}
-                </h4>
+        <LocaleProvider>
+            <main className="flex items-center justify-center min-h-screen p-4">
+                <div className="w-full max-w-sm space-y-6">
+                    <h4 className="flex flex-col text-4xl font-bold text-white">
+                        <span>
+                            {t`Error ${error.status}`}
+                        </span>
+                        {error.statusText && <span className="text-base font-normal">{`${error.statusText}`}</span>}
+                    </h4>
 
-                <p className="text-sm text-gray-500 break-words">
-                    {error.data || error.message}
-                </p>
+                    <p className="text-sm text-gray-500 break-words">
+                        {/* {error.data || error.message} */}
+                        <Trans>{error.data || error.message || getErrorMessage(error.status)}</Trans>
+                    </p>
 
-                <div className="pt-2">
-                    <a
-                        href={process.env.PUBLIC_URL}
-                        className="inline-block"
-                    >
-                        <Button>
-                            Go to home
-                        </Button>
-                    </a>
+                    <div className="pt-2">
+                        <Link
+                            to="/"
+                            className="inline-block"
+                        >
+                            <Button>
+                                {t`Go to home`}
+                            </Button>
+                        </Link>
+                    </div>
                 </div>
-            </div>
-        </main>
+            </main>
+        </LocaleProvider>
     );
 };