feat(router): add global error boundary for route errors

- 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.
This commit is contained in:
Oumar Mimouni
2025-01-31 14:01:18 +01:00
parent 92995d9c2b
commit f42b29e4ac
2 changed files with 43 additions and 1 deletions

View File

@ -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>
);
};

View File

@ -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>