From aebef6d7de00b49a878b28a1d7c3e534cd669416 Mon Sep 17 00:00:00 2001
From: Linden <65407488+thelindat@users.noreply.github.com>
Date: Fri, 6 Dec 2024 17:25:34 +1100
Subject: [PATCH] feat(web): wrap app in errorboundary

Prevents the app from failing on render errors as mentioned
in #675. More to come..
---
 web/src/main.tsx                    | 16 ++++++++++------
 web/src/providers/errorBoundary.tsx | 23 +++++++++++++++++++++++
 2 files changed, 33 insertions(+), 6 deletions(-)
 create mode 100644 web/src/providers/errorBoundary.tsx

diff --git a/web/src/main.tsx b/web/src/main.tsx
index 4a4587ded..184b5859d 100644
--- a/web/src/main.tsx
+++ b/web/src/main.tsx
@@ -1,5 +1,5 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
 import './index.css';
 import App from './App';
 import { fas } from '@fortawesome/free-solid-svg-icons';
@@ -9,6 +9,7 @@ import { library } from '@fortawesome/fontawesome-svg-core';
 import { isEnvBrowser } from './utils/misc';
 import LocaleProvider from './providers/LocaleProvider';
 import ConfigProvider from './providers/ConfigProvider';
+import ErrorBoundary from './providers/errorBoundary';
 
 library.add(fas, far, fab);
 
@@ -23,12 +24,15 @@ if (isEnvBrowser()) {
 }
 
 const root = document.getElementById('root');
-ReactDOM.createRoot(root!).render(
-  <React.StrictMode>
+
+createRoot(root!).render(
+  <StrictMode>
     <LocaleProvider>
       <ConfigProvider>
-        <App />
+        <ErrorBoundary>
+          <App />
+        </ErrorBoundary>
       </ConfigProvider>
     </LocaleProvider>
-  </React.StrictMode>
+  </StrictMode>
 );
diff --git a/web/src/providers/errorBoundary.tsx b/web/src/providers/errorBoundary.tsx
new file mode 100644
index 000000000..a27e30648
--- /dev/null
+++ b/web/src/providers/errorBoundary.tsx
@@ -0,0 +1,23 @@
+import { Component, ReactNode, ErrorInfo } from 'react';
+
+class ErrorBoundary extends Component<{ children: ReactNode }, { hasError: boolean }> {
+  constructor(props: { children: ReactNode }) {
+    super(props);
+    this.state = { hasError: false };
+  }
+
+  static getDerivedStateFromError(err: Error) {
+    return { hasError: true };
+  }
+
+  componentDidCatch(error: Error, info: ErrorInfo) {
+    console.error(error, info)
+    this.setState({ hasError: false });
+  }
+
+  render() {
+    return this.state.hasError ? null : this.props.children;
+  }
+}
+
+export default ErrorBoundary;