fix: Unified handling of `HttpErrorContent` and `RouteErrorBoundary`

ui/src/components/HttpErrorContent/index.tsx

@@ -1,4 +1,4 @@
-import { memo } from 'react';
+import { memo, useEffect } from 'react';
 import { Link } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 
@@ -6,13 +6,28 @@ import { usePageTags } from '@/hooks';
 
 const Index = ({ httpCode = '', errMsg = '' }) => {
   const { t } = useTranslation('translation', { keyPrefix: 'page_error' });
+  useEffect(() => {
+    // auto height of container
+    const pageWrap = document.querySelector('.page-wrap');
+    if (pageWrap) {
+      // @ts-ignore
+      pageWrap.style.display = 'contents';
+    }
+
+    return () => {
+      if (pageWrap) {
+        // @ts-ignore
+        pageWrap.style.display = 'block';
+      }
+    };
+  }, []);
 
   usePageTags({
     title: t(`http_${httpCode}`, { keyPrefix: 'page_title' }),
   });
 
   return (
-    <>
+    <div className="d-flex flex-column flex-shrink-1 flex-grow-1 justify-content-center align-items-center">
       <div
         className="mb-4 text-secondary"
         style={{ fontSize: '120px', lineHeight: 1.2 }}>
@@ -27,7 +42,7 @@ const Index = ({ httpCode = '', errMsg = '' }) => {
           {t('back_home')}
         </Link>
       </div>
-    </>
+    </div>
   );
 };
 

ui/src/pages/404/index.jsx

@@ -1,27 +1,8 @@
-/* eslint-disable import/no-unresolved */
-import { useEffect } from 'react';
-import { Container } from 'react-bootstrap';
-
+// eslint-disable-next-line import/no-unresolved
 import { HttpErrorContent } from '@/components';
 
 const Index = () => {
-  useEffect(() => {
-    // auto height of container
-    const pageWrap = document.querySelector('.page-wrap');
-    pageWrap.style.display = 'contents';
-
-    return () => {
-      pageWrap.style.display = 'block';
-    };
-  }, []);
-
-  return (
-    <Container
-      className="d-flex flex-column justify-content-center align-items-center"
-      style={{ flex: 1 }}>
-      <HttpErrorContent httpCode="404" />
-    </Container>
-  );
+  return <HttpErrorContent httpCode="404" />;
 };
 
 export default Index;

ui/src/pages/50X/index.jsx

@@ -1,27 +1,8 @@
-/* eslint-disable import/no-unresolved */
-import { useEffect } from 'react';
-import { Container } from 'react-bootstrap';
-
+// eslint-disable-next-line import/no-unresolved
 import { HttpErrorContent } from '@/components';
 
 const Index = () => {
-  useEffect(() => {
-    // auto height of container
-    const pageWrap = document.querySelector('.page-wrap');
-    pageWrap.style.display = 'contents';
-
-    return () => {
-      pageWrap.style.display = 'block';
-    };
-  }, []);
-
-  return (
-    <Container
-      className="d-flex flex-column justify-content-center align-items-center"
-      style={{ flex: 1 }}>
-      <HttpErrorContent httpCode="50X" />
-    </Container>
-  );
+  return <HttpErrorContent httpCode="50X" />;
 };
 
 export default Index;

ui/src/pages/Layout/index.tsx

@@ -42,14 +42,9 @@ const Layout: FC = () => {
         {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events */}
         <div
           className="position-relative page-wrap"
-          style={{ display: httpStatusCode ? 'contents' : 'block' }}
           onClick={imgViewer.checkClickForImgView}>
           {httpStatusCode ? (
-            <div
-              className="d-flex flex-column justify-content-center align-items-center"
-              style={{ flex: 1 }}>
-              <HttpErrorContent httpCode={httpStatusCode} />
-            </div>
+            <HttpErrorContent httpCode={httpStatusCode} />
           ) : (
             <Outlet />
           )}

ui/src/router/RouteErrorBoundary.tsx

@@ -1,8 +1,7 @@
-import Error50X from '@/pages/50X';
-// import Page404 from '@/pages/404';
+import { HttpErrorContent } from '@/components';
 
-const Index = () => {
-  return <Error50X />;
+const Index = ({ errCode = '50X', errMsg = '' }) => {
+  return <HttpErrorContent httpCode={errCode} errMsg={errMsg} />;
 };
 
 export default Index;

ui/src/router/RouteGuard.tsx

@@ -3,7 +3,8 @@ import { useLocation, useNavigate, useLoaderData } from 'react-router-dom';
 
 import { floppyNavigation } from '@/utils';
 import { TGuardFunc } from '@/utils/guard';
-import { errorCodeStore } from '@/stores';
+
+import RouteErrorBoundary from './RouteErrorBoundary';
 
 const RouteGuard: FC<{
   children: ReactNode;
@@ -20,20 +21,14 @@ const RouteGuard: FC<{
     page,
   });
 
-  const { update: updateHttpError } = errorCodeStore();
-  const handleGuardError = () => {
-    const err = gr.error;
-    let errCode = err?.code;
-    if (errCode && typeof errCode !== 'string') {
-      errCode = errCode.toString();
-    }
-    if (errCode === '403' || errCode === '404' || errCode === '50X') {
-      updateHttpError(errCode, err?.msg);
-    }
-  };
-  useEffect(() => {
-    handleGuardError();
-  }, [gr.error]);
+  let guardError;
+  const errCode = gr.error?.code;
+  if (errCode === '403' || errCode === '404' || errCode === '50X') {
+    guardError = {
+      code: errCode,
+      msg: gr.error?.msg,
+    };
+  }
   const handleGuardRedirect = () => {
     const redirectUrl = gr.redirect;
     if (redirectUrl) {
@@ -47,8 +42,10 @@ const RouteGuard: FC<{
   }, [location]);
   return (
     <>
-      {/* Route Guard */}
       {gr.ok ? children : null}
+      {!gr.ok && guardError ? (
+        <RouteErrorBoundary errCode={guardError.code} />
+      ) : null}
     </>
   );
 };