add ui error boundary

Author: ShMcK

web-app/src/App.tsx

@@ -1,13 +1,16 @@
 import * as React from 'react'
 import { ApolloProvider } from '@apollo/react-hooks'
 
+import ErrorBoundary from './components/ErrorBoundary'
 import client from './services/apollo'
 import Routes from './Routes'
 
 const App = () => (
-	<ApolloProvider client={client}>
-		<Routes />
-	</ApolloProvider>
+  <ErrorBoundary>
+    <ApolloProvider client={client}>
+      <Routes />
+    </ApolloProvider>
+  </ErrorBoundary>
 )
 
 export default App

web-app/src/components/ErrorBoundary/index.tsx

@@ -0,0 +1,23 @@
+import * as React from 'react'
+
+class ErrorBoundary extends React.Component {
+  public state = { hasError: false }
+
+  public componentDidCatch(error: Error, info: any) {
+    // Display fallback UI
+    this.setState({ hasError: true })
+    // You can also log the error to an error reporting service
+    console.error(error)
+    console.log(info)
+  }
+
+  public render() {
+    if (this.state.hasError) {
+      // You can render any custom fallback UI
+      return <h1>Something went wrong.</h1>
+    }
+    return this.props.children
+  }
+}
+
+export default ErrorBoundary