feat: adapted the Error component to handle child rendering errors

Timur233 · Sep 26, 2024 · a6a3004 · a6a3004
1 parent cb72185
commit a6a3004
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 10 deletions.
diff --git a/packages/client/src/app/App.tsx b/packages/client/src/app/App.tsx
@@ -22,9 +22,7 @@ import { createBrowserRouter, RouterProvider } from 'react-router-dom'
 const routerConfig = createBrowserRouter([
   {
     element: <RootLayout />,
-    errorElement: (
-      <Error code={404} message={'Запрашиваемая страница не найдена'} />
-    ),
+    errorElement: <Error />,
     children: [
       {
         element: <PublicLayout />,
@@ -97,6 +95,7 @@ function App() {
   //   fetchServerData()
   // }, [])
   //
+
   return (
     <div className={'app-layout'}>
       <RouterProvider router={routerConfig} />

diff --git a/packages/client/src/pages/Error/Error.tsx b/packages/client/src/pages/Error/Error.tsx
@@ -1,17 +1,25 @@
+import { isRouteErrorResponse, useRouteError } from 'react-router-dom'
 import DestroyedTanksImage from '../../assets/images/destroyed-tanks.png'
 import './Error.scss'
 
-interface ErrorProps {
-  code: number
-  message: string
-}
+export const Error = () => {
+  const error = useRouteError()
+
+  let status
+  let statusText
+
+  if (isRouteErrorResponse(error)) {
+    status = error.status
+    statusText = error.statusText
+  } else {
+    statusText = 'Something went wrong, we are already correcting the error'
+  }
 
-export const Error = (props: ErrorProps) => {
   return (
     <div className={'error-page'}>
       <div className={'error-page__info'}>
-        <span>{props.code}</span>
-        <h1>{props.message}</h1>
+        <span>{status || 'Oops!'}</span>
+        <h1>{statusText}</h1>
       </div>
       <img
         className={'error-page__destroyed-tanks'}