From b406974299bbc3a83bf5d41a228b8a1208cc6e7e Mon Sep 17 00:00:00 2001
From: NlightN22 <oncharterliz@gmail.com>
Date: Sun, 1 Dec 2024 15:32:02 +0700
Subject: [PATCH] add global error boundary

---
 package.json                                  |  1 +
 src/index.tsx                                 | 19 ++++++++-----
 .../error.boundaries/ErrorFallback.tsx        | 28 +++++++++++++++++++
 .../components/modal.windows/FfprobeModal.tsx | 10 +++----
 yarn.lock                                     |  7 +++++
 5 files changed, 53 insertions(+), 12 deletions(-)
 create mode 100644 src/shared/components/error.boundaries/ErrorFallback.tsx

diff --git a/package.json b/package.json
index a722aea..ab63a37 100644
--- a/package.json
+++ b/package.json
@@ -47,6 +47,7 @@
     "react": "^18.2.0",
     "react-device-detect": "^2.2.3",
     "react-dom": "^18.2.0",
+    "react-error-boundary": "^4.1.2",
     "react-i18next": "^14.1.0",
     "react-intersection-observer": "^9.13.1",
     "react-konva": "^18.2.10",
diff --git a/src/index.tsx b/src/index.tsx
index 38ff78d..b3add42 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -8,6 +8,9 @@ import './services/i18n';
 import keycloakInstance from './services/keycloak-config';
 import CenterLoader from './shared/components/loaders/CenterLoader';
 import RootStore from './shared/stores/root.store';
+import { isProduction } from './shared/env.const';
+import { ErrorBoundary } from 'react-error-boundary';
+import ErrorFallback from './shared/components/error.boundaries/ErrorFallback';
 
 const root = ReactDOM.createRoot(
   document.getElementById('root') as HTMLElement
@@ -19,11 +22,11 @@ const rootStore = new RootStore()
 export const Context = createContext<RootStore>(rootStore)
 
 const eventLogger = (event: string, error?: any) => {
-  console.log('onKeycloakEvent', event, error);
+  if (!isProduction) console.log('onKeycloakEvent', event, error);
 };
 
 const tokenLogger = (tokens: any) => {
-  console.log('onKeycloakTokens', tokens);
+  if (!isProduction) console.log('onKeycloakTokens', tokens);
 }
 
 root.render(
@@ -37,11 +40,13 @@ root.render(
       checkLoginIframe: false
     }}
   >
-    <Context.Provider value={rootStore}>
-      <BrowserRouter>
-        <App />
-      </BrowserRouter>
-    </Context.Provider>
+    <ErrorBoundary FallbackComponent={ErrorFallback}>
+      <Context.Provider value={rootStore}>
+        <BrowserRouter>
+          <App />
+        </BrowserRouter>
+      </Context.Provider>
+    </ErrorBoundary>
   </ReactKeycloakProvider>
 );
 
diff --git a/src/shared/components/error.boundaries/ErrorFallback.tsx b/src/shared/components/error.boundaries/ErrorFallback.tsx
new file mode 100644
index 0000000..c36cfdd
--- /dev/null
+++ b/src/shared/components/error.boundaries/ErrorFallback.tsx
@@ -0,0 +1,28 @@
+import React, { FC } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { routesPath } from '../../../router/routes.path';
+
+interface ErrorFallbackProps {
+    error: Error
+}
+
+const ErrorFallback: React.FC<ErrorFallbackProps> = ({
+    error
+}) => {
+
+    const navigate = useNavigate()
+
+    const handleResetErrorBoundary = () => {
+        navigate(routesPath.MAIN_PATH)
+    }
+
+    return (
+        <div role="alert">
+            <h1>Something went wrong:</h1>
+            <pre>{error.message}</pre>
+            <button onClick={handleResetErrorBoundary}>Try again</button>
+        </div>
+    );
+};
+
+export default ErrorFallback;
\ No newline at end of file
diff --git a/src/shared/components/modal.windows/FfprobeModal.tsx b/src/shared/components/modal.windows/FfprobeModal.tsx
index 29c69a5..c8ae4bf 100644
--- a/src/shared/components/modal.windows/FfprobeModal.tsx
+++ b/src/shared/components/modal.windows/FfprobeModal.tsx
@@ -27,21 +27,21 @@ export const FfprobeModal = ({ context, id, innerProps }: ContextModalProps<Ffpr
     const streamItems = data.map((res, streamIndex) => {
         if (res.return_code !== 0) {
             return (
-                <>
+                <div key={streamIndex}>
                     <Center><Text weight={700}>Stream: {streamIndex}</Text></Center>
                     <Text>{res.return_code}</Text>
                     <Text>{res.stderr}</Text>
-                </>
+                </div>
             )
         }
-        const flows = res.stdout.streams.map((stream) => (
-            <>
+        const flows = res.stdout.streams.map((stream, flowIndex) => (
+            <div key={streamIndex + flowIndex}>
                 <Text>Codec: {stream.codec_long_name}</Text>
                 {!stream.width && !stream.height ? null :
                     <Text>Resolution: {stream.width}x{stream.height} </Text>
                 }
                 <Text>FPS: {stream.avg_frame_rate}</Text>
-            </>
+            </div>
         ))
         return (
             <>
diff --git a/yarn.lock b/yarn.lock
index ed82b24..af769b2 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8716,6 +8716,13 @@ react-dom@^18.2.0:
     loose-envify "^1.1.0"
     scheduler "^0.23.0"
 
+react-error-boundary@^4.1.2:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/react-error-boundary/-/react-error-boundary-4.1.2.tgz#bc750ad962edb8b135d6ae922c046051eb58f289"
+  integrity sha512-GQDxZ5Jd+Aq/qUxbCm1UtzmL/s++V7zKgE8yMktJiCQXCCFZnMZh9ng+6/Ne6PjNSXH0L9CjeOEREfRnq6Duag==
+  dependencies:
+    "@babel/runtime" "^7.12.5"
+
 react-error-overlay@^6.0.11:
   version "6.0.11"
   resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.11.tgz#92835de5841c5cf08ba00ddd2d677b6d17ff9adb"