F: Implement ErrorFallback for root

rsconcept/frontend/src/app/ApplicationLayout.tsx

@@ -1,5 +1,4 @@
 import { Suspense } from 'react';
-import { ErrorBoundary } from 'react-error-boundary';
 import { Outlet } from 'react-router';
 
 import ConceptToaster from '@/app/ConceptToaster';
@@ -10,22 +9,10 @@ import ModalLoader from '@/components/ui/ModalLoader';
 import { useAppLayoutStore, useMainHeight, useViewportHeight } from '@/stores/appLayout';
 import { globals } from '@/utils/constants';
 
-import ErrorFallback from './ErrorFallback';
 import { GlobalDialogs } from './GlobalDialogs';
 import { GlobalTooltips } from './GlobalTooltips';
 import { NavigationState } from './Navigation/NavigationContext';
 
-const resetState = () => {
-  console.log('Resetting state after error fallback');
-};
-
-const logError = (error: Error, info: { componentStack?: string | null | undefined }) => {
-  console.log('Error fallback: ' + error.message);
-  if (info.componentStack) {
-    console.log('Component stack: ' + info.componentStack);
-  }
-};
-
 function ApplicationLayout() {
   const mainHeight = useMainHeight();
   const viewportHeight = useViewportHeight();
@@ -35,7 +22,6 @@ function ApplicationLayout() {
   const noFooter = useAppLayoutStore(state => state.noFooter);
 
   return (
-    <ErrorBoundary FallbackComponent={ErrorFallback} onError={logError} onReset={resetState}>
     <NavigationState>
       <div className='min-w-[20rem] antialiased h-full max-w-[120rem] mx-auto'>
         <ConceptToaster
@@ -69,7 +55,6 @@ function ApplicationLayout() {
         </div>
       </div>
     </NavigationState>
-    </ErrorBoundary>
   );
 }
 

rsconcept/frontend/src/app/ErrorFallback.tsx

@@ -1,13 +1,19 @@
-import { type FallbackProps } from 'react-error-boundary';
+import { useNavigate, useRouteError } from 'react-router';
 
 import InfoError from '@/components/info/InfoError';
 import Button from '@/components/ui/Button';
 
-function ErrorFallback({ error, resetErrorBoundary }: FallbackProps) {
+function ErrorFallback() {
+  const error = useRouteError();
+  const router = useNavigate();
+
+  function resetErrorBoundary() {
+    Promise.resolve(router('/')).catch(console.log);
+  }
   return (
     <div className='flex flex-col gap-3 my-3 items-center antialiased' role='alert'>
       <h1 className='my-2'>Что-то пошло не так!</h1>
-      <Button onClick={resetErrorBoundary} text='Попробовать еще раз' />
+      <Button onClick={resetErrorBoundary} text='Вернуться на главную' />
       <InfoError error={error as Error} />
     </div>
   );

rsconcept/frontend/src/app/Router.tsx

@@ -13,13 +13,14 @@ import LoginPage from '@/pages/LoginPage';
 import NotFoundPage from '@/pages/NotFoundPage';
 
 import ApplicationLayout from './ApplicationLayout';
+import ErrorFallback from './ErrorFallback';
 import { routes } from './urls';
 
 export const Router = createBrowserRouter([
   {
     path: '/',
     element: <ApplicationLayout />,
-    errorElement: <NotFoundPage />,
+    errorElement: <ErrorFallback />,
     loader: prefetchAuth,
     hydrateFallbackElement: <Loader />,
     children: [