mirror of
https://github.com/AmruthPillai/Reactive-Resume.git
synced 2025-11-10 04:22:27 +10:00
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:
41
apps/client/src/pages/public/error.tsx
Normal file
41
apps/client/src/pages/public/error.tsx
Normal 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>
|
||||
);
|
||||
};
|
||||
@ -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>
|
||||
|
||||
Reference in New Issue
Block a user