diff --git a/packages/concordia-app/src/ErrorBoundary.jsx b/packages/concordia-app/src/ErrorBoundary.jsx new file mode 100644 index 0000000..86c97ef --- /dev/null +++ b/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

Something went wrong.

; // TODO: Make a better "Something went wrong" screen + } + return children; + } +} + +export default ErrorBoundary; diff --git a/packages/concordia-app/src/index.jsx b/packages/concordia-app/src/index.jsx index a29f530..1f4b575 100644 --- a/packages/concordia-app/src/index.jsx +++ b/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( - }> - - , + + }> + + + , document.getElementById('root'), );