From a6a3004b67ac8f10d9609ae24b26c5187e0d2c48 Mon Sep 17 00:00:00 2001
From: Andrei Kondratov <peckondratov@gmail.com>
Date: Thu, 26 Sep 2024 16:15:43 +0500
Subject: [PATCH] feat: adapted the Error component to handle child rendering
 errors

---
 packages/client/src/app/App.tsx           |  5 ++---
 packages/client/src/pages/Error/Error.tsx | 22 +++++++++++++++-------
 2 files changed, 17 insertions(+), 10 deletions(-)

diff --git a/packages/client/src/app/App.tsx b/packages/client/src/app/App.tsx
index b960df3..0ce1e32 100644
--- 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
index 66042e9..fb45d46 100644
--- 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'}