[+] added an errorElement on router-dom to avoid the app from crashin…

…g completely if only a component has an issue

src/components/ErrorElement/ErrorElement.tsx

@@ -0,0 +1,43 @@
+import { useLocation, useRouteError } from 'react-router-dom';
+import { PageState } from 'components';
+import { analytics } from 'helpers';
+import { faTimes } from 'icons/regular';
+
+export const ErrorElement = () => {
+  const { pathname } = useLocation();
+  const explorerVersion = process.env.VITE_APP_CACHE_BUST;
+  const error = useRouteError();
+  console.error(error);
+
+  if (explorerVersion !== undefined) {
+    analytics.sendEvent({
+      action: 'error-encountered',
+      label: pathname,
+      explorerVersion
+    });
+  }
+
+  return (
+    <PageState
+      icon={faTimes}
+      title='Unexpected Error'
+      description={
+        <div className='px-spacer'>
+          <div className='text-break-all text-neutral-500'>
+            Something went wrong. We are looking into the incident.
+          </div>
+          <button
+            className='btn btn-sm btn-primary mx-auto mt-spacer'
+            onClick={() => {
+              window.location.reload();
+            }}
+          >
+            Reload
+          </button>
+        </div>
+      }
+      className='py-spacer m-auto'
+      dataTestId='errorScreen'
+    />
+  );
+};

src/components/ErrorElement/index.ts

@@ -0,0 +1 @@
+export * from './ErrorElement';

src/routes/helpers/wrapRoutes.ts → src/routes/helpers/wrapRoutes.tsx

@@ -1,4 +1,5 @@
 import { RouteObject } from 'react-router-dom';
+import { ErrorElement } from 'components/ErrorElement';
 import { withPageTitle } from '../helpers/withPageTitle';
 
 import { TitledRouteObject } from '../routes';
@@ -20,8 +21,12 @@ export const wrapRoutes = (routes: TitledRouteObject[]): RouteObject[] =>
 
       delete route['title'];
 
+      route.errorElement = <ErrorElement />;
+
       return route;
     }
 
+    route.errorElement = <ErrorElement />;
+
     return route;
   });