From a16af276c588f85ab2d8a57c160faefe569a7cd6 Mon Sep 17 00:00:00 2001
From: Reckless_Satoshi <90936742+Reckless-Satoshi@users.noreply.github.com>
Date: Sat, 15 Apr 2023 18:47:46 +0000
Subject: [PATCH] Add error boundary (#421)

---
 frontend/src/App.tsx                      | 25 ++++++-----
 frontend/src/components/ErrorBoundary.tsx | 52 +++++++++++++++++++++++
 2 files changed, 66 insertions(+), 11 deletions(-)
 create mode 100644 frontend/src/components/ErrorBoundary.tsx

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 57c28919..86f6c647 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -12,6 +12,7 @@ import i18n from './i18n/Web';
 
 import { systemClient } from './services/System';
 import { Settings } from './models';
+import ErrorBoundary from './components/ErrorBoundary';
 
 const makeTheme = function (settings: Settings) {
   const theme: Theme = createTheme({
@@ -40,17 +41,19 @@ const App = (): JSX.Element => {
   }, []);
 
   return (
-    <Suspense fallback='loading language'>
-      <I18nextProvider i18n={i18n}>
-        <ThemeProvider theme={theme}>
-          <AppContextProvider settings={settings} setSettings={setSettings}>
-            <CssBaseline />
-            {window.NativeRobosats === undefined ? <UnsafeAlert /> : <TorConnectionBadge />}
-            <Main />
-          </AppContextProvider>
-        </ThemeProvider>
-      </I18nextProvider>
-    </Suspense>
+    <ErrorBoundary>
+      <Suspense fallback='loading language'>
+        <I18nextProvider i18n={i18n}>
+          <ThemeProvider theme={theme}>
+            <AppContextProvider settings={settings} setSettings={setSettings}>
+              <CssBaseline />
+              {window.NativeRobosats === undefined ? <UnsafeAlert /> : <TorConnectionBadge />}
+              <Main />
+            </AppContextProvider>
+          </ThemeProvider>
+        </I18nextProvider>
+      </Suspense>
+    </ErrorBoundary>
   );
 };
 
diff --git a/frontend/src/components/ErrorBoundary.tsx b/frontend/src/components/ErrorBoundary.tsx
new file mode 100644
index 00000000..d5e377e5
--- /dev/null
+++ b/frontend/src/components/ErrorBoundary.tsx
@@ -0,0 +1,52 @@
+import React, { Component } from 'react';
+
+interface ErrorBoundaryProps {
+  children: React.ReactNode;
+}
+
+interface ErrorBoundaryState {
+  hasError: boolean;
+  error: Error;
+  errorInfo: React.ErrorInfo;
+}
+
+export default class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
+  constructor(props: ErrorBoundaryProps) {
+    super(props);
+    this.state = {
+      hasError: false,
+      error: { name: '', message: '' },
+      errorInfo: { componentStack: '' },
+    };
+  }
+
+  componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void {
+    console.error(error, errorInfo);
+    this.setState({ hasError: true, error, errorInfo });
+    setTimeout(() => {
+      window.location.reload();
+    }, 10000);
+  }
+  render() {
+    if (this.state.hasError) {
+      return (
+        <div>
+          <h1>Something went wrong. Restarting app in 10 seconds...</h1>
+          <p>
+            <b>Error:</b> {this.state.error.name}
+          </p>
+          <p>
+            <b>Error message:</b> {this.state.error.message}
+          </p>
+          <p>
+            <b>Error cause:</b> {this.state.error.cause}
+          </p>
+          <p>
+            <b>Error component stack:</b> {this.state.errorInfo.componentStack}
+          </p>
+        </div>
+      );
+    }
+    return this.props.children;
+  }
+}