Add error boundary (#421)

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'>
+    <ErrorBoundary>
-      <I18nextProvider i18n={i18n}>
+      <Suspense fallback='loading language'>
-        <ThemeProvider theme={theme}>
+        <I18nextProvider i18n={i18n}>
-          <AppContextProvider settings={settings} setSettings={setSettings}>
+          <ThemeProvider theme={theme}>
-            <CssBaseline />
+            <AppContextProvider settings={settings} setSettings={setSettings}>
-            {window.NativeRobosats === undefined ? <UnsafeAlert /> : <TorConnectionBadge />}
+              <CssBaseline />
-            <Main />
+              {window.NativeRobosats === undefined ? <UnsafeAlert /> : <TorConnectionBadge />}
-          </AppContextProvider>
+              <Main />
-        </ThemeProvider>
+            </AppContextProvider>
-      </I18nextProvider>
+          </ThemeProvider>
-    </Suspense>
+        </I18nextProvider>
+      </Suspense>
+    </ErrorBoundary>
   );
 };
 

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;
+  }
+}