From d1d92c63e8705e9730431b14f6e9c16a27b77e52 Mon Sep 17 00:00:00 2001
From: ilnaz <237x237@gmail.com>
Date: Sat, 16 Nov 2024 20:09:02 +0300
Subject: [PATCH] feat: add ErrorBoundary page (#23)

---
 locales/ru.json                               |  6 +-
 src/app.tsx                                   |  9 ++-
 .../ErrorBoundary/ErrorBoundary.tsx           | 64 +++++++++++++++++++
 src/components/ErrorBoundary/index.ts         |  1 +
 4 files changed, 75 insertions(+), 5 deletions(-)
 create mode 100644 src/components/ErrorBoundary/ErrorBoundary.tsx
 create mode 100644 src/components/ErrorBoundary/index.ts

diff --git a/locales/ru.json b/locales/ru.json
index 6f5e671..8646704 100644
--- a/locales/ru.json
+++ b/locales/ru.json
@@ -28,6 +28,8 @@
   "dry-wash.arm.master.drawer.button.cancel": "Отменить",
   "dry-wash.arm.master.sideBar.title": " Сухой мастер",
   "dry-wash.arm.master.sideBar.title.master": "Мастера",
-  "dry-wash.arm.master.sideBar.title.orders": "Заказы"
-
+  "dry-wash.arm.master.sideBar.title.orders": "Заказы",
+  "dry-wash.errorBoundary.title":"Что-то пошло не так",
+  "dry-wash.errorBoundary.description": " Мы уже работаем над исправлением проблемы",
+  "dry-wash.errorBoundary.button.reload": "Перезагрузить страницу"
 }
diff --git a/src/app.tsx b/src/app.tsx
index ff29f4a..37cb4f4 100644
--- a/src/app.tsx
+++ b/src/app.tsx
@@ -2,13 +2,16 @@ import React from 'react';
 import { BrowserRouter } from 'react-router-dom';
 import Routers from './routes';
 import { ChakraProvider, theme as chakraTheme } from '@chakra-ui/react';
+import ErrorBoundary from './components/ErrorBoundary';
 
 const App = () => {
   return (
     <ChakraProvider theme={chakraTheme}>
-      <BrowserRouter>
-        <Routers></Routers>
-      </BrowserRouter>
+      <ErrorBoundary>
+        <BrowserRouter>
+          <Routers />
+        </BrowserRouter>
+      </ErrorBoundary>
     </ChakraProvider>
   );
 };
diff --git a/src/components/ErrorBoundary/ErrorBoundary.tsx b/src/components/ErrorBoundary/ErrorBoundary.tsx
new file mode 100644
index 0000000..63b1be2
--- /dev/null
+++ b/src/components/ErrorBoundary/ErrorBoundary.tsx
@@ -0,0 +1,64 @@
+import React, { Component, ErrorInfo, ReactNode } from 'react';
+import { Heading, Text, Button, Center, VStack } from '@chakra-ui/react';
+import i18next from 'i18next';
+
+interface ErrorBoundaryState {
+  hasError: boolean;
+  error: Error | null;
+  errorInfo: ErrorInfo | null;
+}
+
+interface ErrorBoundaryProps {
+  children: ReactNode;
+}
+
+class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
+  constructor(props: ErrorBoundaryProps) {
+    super(props);
+    this.state = {
+      hasError: false,
+      error: null,
+      errorInfo: null,
+    };
+  }
+
+  static getDerivedStateFromError(): Partial<ErrorBoundaryState> {
+    return { hasError: true };
+  }
+
+  componentDidCatch(error: Error, errorInfo: ErrorInfo): void {
+    console.error('Error caught by ErrorBoundary:', error, errorInfo);
+    this.setState({ error, errorInfo });
+  }
+
+  render() {
+    const { hasError } = this.state;
+    //TODO: добавить анимацию после залива 404 страницы
+    if (hasError) {
+      return (
+        <Center minH='100vh'>
+          <VStack spacing={4} textAlign='center'>
+            <Heading as='h1' size='2xl'>
+              {i18next.t('dry-wash.errorBoundary.title')}
+            </Heading>
+            <Text fontSize='lg'>
+              {i18next.t('dry-wash.errorBoundary.description')}
+            </Text>
+            <Button
+              colorScheme='teal'
+              size='lg'
+              variant='outline'
+              onClick={() => window.location.reload()}
+            >
+              {i18next.t('dry-wash.errorBoundary.button.reload')}
+            </Button>
+          </VStack>
+        </Center>
+      );
+    }
+
+    return this.props.children;
+  }
+}
+
+export default ErrorBoundary;
diff --git a/src/components/ErrorBoundary/index.ts b/src/components/ErrorBoundary/index.ts
new file mode 100644
index 0000000..257f6a2
--- /dev/null
+++ b/src/components/ErrorBoundary/index.ts
@@ -0,0 +1 @@
+export { default } from './ErrorBoundary';