From 655bb3198f6ce1b231291c5e63bfff59b0724a27 Mon Sep 17 00:00:00 2001
From: MariiaNebesnova <mariia_nebesnova@epam.com>
Date: Wed, 28 Jun 2023 17:45:01 +0300
Subject: [PATCH] add error boundary

---
 package-lock.json | 24 +++++++++++++++--
 package.json      |  1 +
 src/app/App.tsx   | 69 ++++++++++++++++++++++++++++++++++-------------
 3 files changed, 74 insertions(+), 20 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 0d768a19..98167d48 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "jdn-ai-chrome-extension",
-  "version": "3.12.482",
+  "version": "3.13.506",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "jdn-ai-chrome-extension",
-      "version": "3.12.482",
+      "version": "3.13.506",
       "hasInstallScript": true,
       "license": "MIT",
       "dependencies": {
@@ -26,6 +26,7 @@
         "react": "17.0.2",
         "react-children-utilities": "^2.8.0",
         "react-dom": "17.0.2",
+        "react-error-boundary": "^4.0.10",
         "react-redux": "7.2.6",
         "react-remark": "^2.1.0",
         "redux-mock-store": "^1.5.4",
@@ -15030,6 +15031,17 @@
         "react": "17.0.2"
       }
     },
+    "node_modules/react-error-boundary": {
+      "version": "4.0.10",
+      "resolved": "https://registry.npmjs.org/react-error-boundary/-/react-error-boundary-4.0.10.tgz",
+      "integrity": "sha512-pvVKdi77j2OoPHo+p3rorgE43OjDWiqFkaqkJz8sJKK6uf/u8xtzuaVfj5qJ2JnDLIgF1De3zY5AJDijp+LVPA==",
+      "dependencies": {
+        "@babel/runtime": "^7.12.5"
+      },
+      "peerDependencies": {
+        "react": ">=16.13.1"
+      }
+    },
     "node_modules/react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
@@ -29096,6 +29108,14 @@
         "scheduler": "^0.20.2"
       }
     },
+    "react-error-boundary": {
+      "version": "4.0.10",
+      "resolved": "https://registry.npmjs.org/react-error-boundary/-/react-error-boundary-4.0.10.tgz",
+      "integrity": "sha512-pvVKdi77j2OoPHo+p3rorgE43OjDWiqFkaqkJz8sJKK6uf/u8xtzuaVfj5qJ2JnDLIgF1De3zY5AJDijp+LVPA==",
+      "requires": {
+        "@babel/runtime": "^7.12.5"
+      }
+    },
     "react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
diff --git a/package.json b/package.json
index 9b4d9eef..ef34f154 100644
--- a/package.json
+++ b/package.json
@@ -60,6 +60,7 @@
     "react": "17.0.2",
     "react-children-utilities": "^2.8.0",
     "react-dom": "17.0.2",
+    "react-error-boundary": "^4.0.10",
     "react-redux": "7.2.6",
     "react-remark": "^2.1.0",
     "redux-mock-store": "^1.5.4",
diff --git a/src/app/App.tsx b/src/app/App.tsx
index bc4a79b7..ec5ca5db 100644
--- a/src/app/App.tsx
+++ b/src/app/App.tsx
@@ -5,6 +5,7 @@ import "antd/dist/antd.less";
 import "antd/lib/style/themes/default.less";
 
 import Layout, { Content, Header } from "antd/lib/layout/layout";
+import { Alert, Button } from "antd";
 import { Backdrop } from "./components/Backdrop";
 import { pageType } from "../common/constants/constants";
 import { StatusBar } from "./components/StatusBar";
@@ -22,6 +23,26 @@ import { BackendStatus } from "./types/mainSlice.types";
 import { LocatorsPage } from "../features/locators/LocatorsPage";
 import { PageObjectPage } from "../features/pageObjects/PageObjectPage";
 import { OnboardingProvider } from "../features/onboarding/OnboardingProvider";
+import { ErrorBoundary } from "react-error-boundary";
+// import ErrorBoundary from "antd/lib/alert/ErrorBoundary";
+
+// const { ErrorBoundary } = Alert;
+
+const ThrowError: React.FC = () => {
+  const [error, setError] = useState<Error>();
+  const onClick = () => {
+    setError(new Error("An Uncaught Error"));
+  };
+
+  if (error) {
+    throw error;
+  }
+  return (
+    <Button danger onClick={onClick}>
+      Click me to throw a error
+    </Button>
+  );
+};
 
 const App = () => {
   const [isInvalidSession, setIsInvalidSession] = useState(false);
@@ -55,25 +76,37 @@ const App = () => {
 
   return (
     <div>
-      <Backdrop />
-      <Layout className="jdn__app">
-        <Header className="jdn__header">
-          <StatusBar />
-        </Header>
-        <Content className="jdn__content">
-          {backendAvailable === BackendStatus.Accessed ? (
-            isInvalidSession ? (
-              <SeveralTabsWarning {...{ checkSession: () => checkSession(setIsInvalidSession) }} />
+      <ErrorBoundary
+        fallback={
+          <Alert
+            message="Error"
+            description="Something went wrong. Try to reload plugin or contact the developer."
+            type="error"
+            showIcon
+          />
+        }
+      >
+        <ThrowError />
+        <Backdrop />
+        <Layout className="jdn__app">
+          <Header className="jdn__header">
+            <StatusBar />
+          </Header>
+          <Content className="jdn__content">
+            {backendAvailable === BackendStatus.Accessed ? (
+              isInvalidSession ? (
+                <SeveralTabsWarning {...{ checkSession: () => checkSession(setIsInvalidSession) }} />
+              ) : (
+                renderPage()
+              )
+            ) : backendAvailable === BackendStatus.TryToAccess ? (
+              BackendStatus.TryToAccess
             ) : (
-              renderPage()
-            )
-          ) : backendAvailable === BackendStatus.TryToAccess ? (
-            BackendStatus.TryToAccess
-          ) : (
-            <Guide />
-          )}
-        </Content>
-      </Layout>
+              <Guide />
+            )}
+          </Content>
+        </Layout>
+      </ErrorBoundary>
     </div>
   );
 };