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

@@ -1,5 +1,5 @@
-import React from 'react';
+import { StrictMode } from 'react';
-import ReactDOM from 'react-dom/client';
+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>
 );

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;