feat: add ErrorBoundary

packages/concordia-app/src/ErrorBoundary.jsx

@@ -0,0 +1,22 @@
+import React from 'react';
+
+class ErrorBoundary extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { hasError: false };
+  }
+
+  static getDerivedStateFromError() {
+    return { hasError: true };
+  }
+
+  render() {
+    const { props: { children }, state: { hasError } } = this;
+    if (hasError) {
+      return <h1>Something went wrong.</h1>; // TODO: Make a better "Something went wrong" screen
+    }
+    return children;
+  }
+}
+
+export default ErrorBoundary;

packages/concordia-app/src/index.jsx

@@ -3,15 +3,18 @@ import './utils/wdyr';
 import React, { Suspense } from 'react';
 import { render } from 'react-dom';
 import App from './App';
+import ErrorBoundary from './ErrorBoundary';
 import store from './redux/store';
 import * as serviceWorker from './utils/serviceWorker';
 import LoadingScreen from './components/LoadingScreen';
 import './assets/css/index.css';
 
 render(
-    <Suspense fallback={<LoadingScreen />}>
+    <ErrorBoundary>
-        <App store={store} />
+        <Suspense fallback={<LoadingScreen />}>
-    </Suspense>,
+            <App store={store} />
+        </Suspense>
+    </ErrorBoundary>,
     document.getElementById('root'),
 );