Feat: Unexpected js error handling and 404. Router error element to c…

…atch errors and redirect to error page.

src/components/Error/Error.jsx

@@ -1,17 +1,39 @@
-import { useRouteError } from 'react-router-dom';
-import { ReactComponent as NotFound } from '../../assets/images/illustatus.svg';
-import Alert from '../Alert/Alert';
-import { InfoCircleOutlined } from '@ant-design/icons';
+import { useNavigate, useRouteError } from 'react-router-dom';
+import { ReactComponent as GeneralErrors } from '../../assets/images/general-error.svg';
+import { ReactComponent as Error404 } from '../../assets/images/404-error.svg';
 import './error.css';
+import { useTranslation } from 'react-i18next';
+import { Button } from 'antd';
+
+function ErrorAlert(props) {
+  const { errorType = 'general' } = props;
 
-function ErrorAlert() {
   const error = useRouteError();
-  console.log(error);
+  const navigate = useNavigate();
+  const { t } = useTranslation();
+
+  const image = errorType === 'general' ? <GeneralErrors /> : <Error404 />;
+  const message = errorType === 'general' ? error.message : t('errorPage.notFoundMessage');
+
+  console.error(message, new Date().toISOString());
+
   return (
     <div className="error-page">
-      <NotFound />
-      <div className="floating-alert">
-        <Alert message={error.message} type="error" showIcon icon={<InfoCircleOutlined />} />
+      <div className="content">
+        <div className="image-container">{image}</div>
+        <section>
+          <h1>{t('errorPage.heading')}</h1>
+          <p className="error-message">{message}</p>
+          <p className="error-time">{new Date().toISOString()}</p>
+          <div className="btn-container">
+            <Button
+              onClick={() => {
+                navigate(-1);
+              }}>
+              {t('errorPage.buttonText')}
+            </Button>
+          </div>
+        </section>
       </div>
     </div>
   );

src/components/Error/error.css

@@ -1,18 +1,67 @@
-.error-page{
-    width: 100vw;
-    height: 100vh;
-    overflow: hidden;
+.error-page {
+  width: 100vw;
+  height: 100vh;
+  overflow: hidden;
+  background: var(--primary-white);
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 
-.error-page > svg {
-  height: 100%;
+.error-page .content {
+  min-width: 500px;
+  max-width: 700px;
+  max-height: 750px;
+  width: 40%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  align-items: center;
+}
+
+.error-page .image-container {
+  height: 40%;
+}
+
+.error-page .image-container > svg {
   width: 100%;
+  height: 100%;
 }
 
-.error-page .floating-alert{
-    width: 400px;
-    position: absolute;
-    right: 50%;
-    top: 0;
-    transform: translate(50%);
-}
+.error-page h1 {
+  color: var(--content-neutral-primary, #222732);
+  text-align: center;
+  font-size: 60px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 120%;
+}
+
+.error-page .error-message,
+.error-page .error-time {
+  color: var(--content-neutral-secondary, #646d7b);
+  text-align: center;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 24px;
+}
+
+.error-page .btn-container {
+  display: grid;
+  place-content: center;
+}
+
+.error-page .btn-container .ant-btn {
+  border-radius: 4px;
+  background: var(--content-action-default, #1b3de6);
+  color: var(--primary-white);
+  font-weight: 600;
+  text-transform: capitalize;
+  border: none;
+  font-size: 16px;
+  padding: 8px 16px;
+  display: grid;
+  place-content: center;
+}

src/index.css

@@ -11,6 +11,9 @@ html,
 body,
 #root {
   height: 100%;
+  --primary-white: #ffffff;
+  --content-neutral-primary: #222732;
+  --content-neutral-secondary: #646d7b;
 }
 
 body {

src/locales/en/translationEn.json

@@ -409,6 +409,13 @@
       }
     }
   },
+  "errorPage": {
+    "heading": "Oops, something went wrong!",
+    "notFoundMessage": "The requested page could not be found (404)",
+    "serverErrorsMessage": "If the problem persists, let the site owner know {{code}}",
+    "jsErrorMessage": "Go back to the previous page",
+    "buttonText": "Back"
+  },
   "common": {
     "tabEnglish": "English",
     "tabFrench": "French",

src/locales/fr/transalationFr.json

@@ -408,6 +408,13 @@
       }
     }
   },
+  "errorPage": {
+    "heading": "Oups, quelque chose s'est mal passé",
+    "notFoundMessage": "La page demandée n'a pas été trouvée (404)",
+    "serverErrorsMessage": "Si le problème persiste, informez le propriétaire du site {{code}}",
+    "jsErrorMessage": "Retourner à la page précédente",
+    "buttonText": "Retour"
+  },
   "common": {
     "tabEnglish": "Anglais",
     "tabFrench": "Français",

src/router/index.js

@@ -6,7 +6,7 @@ import Dashboard from '../pages/Dashboard';
 import ResetPassword from '../pages/ResetPassword';
 import Events from '../pages/Dashboard/Events';
 import AddEvent from '../pages/Dashboard/AddEvent';
-import { ReactComponent as NotFound } from '../../src/assets/images/illustatus.svg';
+// import { ReactComponent as NotFound } from '../../src/assets/images/illustatus.svg';
 import EventReadOnly from '../pages/Dashboard/EventReadOnly';
 import CreateAccount from '../pages/CreateAccount/CreateAccount';
 import Users from '../pages/Dashboard/Users';
@@ -82,10 +82,6 @@ export const router = createBrowserRouter([
   },
   {
     path: PathName.NotFound,
-    element: (
-      <div>
-        <NotFound />
-      </div>
-    ),
+    element: <ErrorAlert errorType="page not found" />,
   },
 ]);