Compare commits
No commits in common. "18ca96bfe9c042934af368cb4090d4eeba88fbbe" and "db918ba7c7a4d632a33e5387455d601fb56c6423" have entirely different histories.
18ca96bfe9
...
db918ba7c7
@ -28,8 +28,6 @@
|
||||
"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.errorBoundary.title":"Что-то пошло не так",
|
||||
"dry-wash.errorBoundary.description": " Мы уже работаем над исправлением проблемы",
|
||||
"dry-wash.errorBoundary.button.reload": "Перезагрузить страницу"
|
||||
"dry-wash.arm.master.sideBar.title.orders": "Заказы"
|
||||
|
||||
}
|
||||
|
@ -2,16 +2,13 @@ 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}>
|
||||
<ErrorBoundary>
|
||||
<BrowserRouter>
|
||||
<Routers />
|
||||
</BrowserRouter>
|
||||
</ErrorBoundary>
|
||||
<BrowserRouter>
|
||||
<Routers></Routers>
|
||||
</BrowserRouter>
|
||||
</ChakraProvider>
|
||||
);
|
||||
};
|
||||
|
@ -1,64 +0,0 @@
|
||||
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;
|
@ -1 +0,0 @@
|
||||
export { default } from './ErrorBoundary';
|
Loading…
Reference in New Issue
Block a user