From 3cf04d9c0f3d273b6da8c315f5b247149cd75a62 Mon Sep 17 00:00:00 2001
From: Radu Mojic <radu.mojic@multiversx.com>
Date: Wed, 20 Sep 2023 16:49:25 +0300
Subject: [PATCH] [+] added an errorElement on router-dom to avoid the app from
 crashing completely if only a component has an issue

---
 src/components/ErrorElement/ErrorElement.tsx  | 43 +++++++++++++++++++
 src/components/ErrorElement/index.ts          |  1 +
 .../helpers/{wrapRoutes.ts => wrapRoutes.tsx} |  5 +++
 3 files changed, 49 insertions(+)
 create mode 100644 src/components/ErrorElement/ErrorElement.tsx
 create mode 100644 src/components/ErrorElement/index.ts
 rename src/routes/helpers/{wrapRoutes.ts => wrapRoutes.tsx} (83%)

diff --git a/src/components/ErrorElement/ErrorElement.tsx b/src/components/ErrorElement/ErrorElement.tsx
new file mode 100644
index 000000000..f7656e17e
--- /dev/null
+++ b/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'
+    />
+  );
+};
diff --git a/src/components/ErrorElement/index.ts b/src/components/ErrorElement/index.ts
new file mode 100644
index 000000000..21ecd33ab
--- /dev/null
+++ b/src/components/ErrorElement/index.ts
@@ -0,0 +1 @@
+export * from './ErrorElement';
diff --git a/src/routes/helpers/wrapRoutes.ts b/src/routes/helpers/wrapRoutes.tsx
similarity index 83%
rename from src/routes/helpers/wrapRoutes.ts
rename to src/routes/helpers/wrapRoutes.tsx
index 2b017b9f7..3fe274112 100644
--- a/src/routes/helpers/wrapRoutes.ts
+++ b/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;
   });