feat: add error boundary (#534)

src/renderer/ErrorBoundary.jsx

@@ -0,0 +1,29 @@
+/* eslint-disable */
+import React from "react";
+
+class ErrorBoundary extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { hasError: true, errorMessage: "" };
+  }
+
+  static getDerivedStateFromError(error) {
+    return { hasError: true, errorMessage: error.message };
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return (
+        <div>
+          <h1>Uh oh!</h1>
+          <p>This wasn't supposed to happen. If you continue to see this message, please reach out to support.</p>
+          <p>{this.state.errorMessage}</p>
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
+}
+
+export default ErrorBoundary;

src/renderer/index.tsx

@@ -24,16 +24,19 @@ import Error from "./Error";
 import "bootstrap-css-only/css/bootstrap.min.css";
 import "@appigram/react-rangeslider/lib/index.css";
 import i18n from "./i18n";
+import ErrorBoundary from "./ErrorBoundary";
 
 const container = document.getElementById("root");
 const root = createRoot(container);
 try {
   root.render(
-    <MemoryRouter>
-      <I18nextProvider i18n={i18n}>
-        <App />
-      </I18nextProvider>
-    </MemoryRouter>,
+    <ErrorBoundary>
+      <MemoryRouter>
+        <I18nextProvider i18n={i18n}>
+          <App />
+        </I18nextProvider>
+      </MemoryRouter>
+    </ErrorBoundary>,
   );
 } catch (e) {
   root.render(<Error error={e} />);