TASK: Add errorboundary and reporting

src/components/atoms/ErrorBoundary.tsx

@@ -0,0 +1,38 @@
+import React from 'react'
+
+type Props = {
+  children: React.ReactNode
+}
+
+type State = {
+  hasError: boolean
+  error?: Error
+}
+
+class ErrorBoundary extends React.Component<Props, State> {
+  constructor(props: { children: React.ReactNode }) {
+    super(props)
+    this.state = {
+      hasError: false,
+      error: undefined,
+    }
+  }
+
+  static getDerivedStateFromError(error: Error) {
+    return { hasError: true, error }
+  }
+
+  // TODO
+  // * retrieve useful stacktrace (maybe read up here? https://www.loggly.com/blog/best-practices-for-client-side-logging-and-error-handling-in-react/)
+  // * add button to send error report to us
+  render() {
+    if (this.state.hasError) {
+      console.log({ error: this.state.error })
+      return <p>Error: {this.state.error?.message}</p>
+    }
+
+    return this.props.children
+  }
+}
+
+export default ErrorBoundary

src/components/organisms/Content/index.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 
 import CircularProgress from '@material-ui/core/CircularProgress'
 
+import ErrorBoundary from '../../atoms/ErrorBoundary'
 import HeaderPlaceholder from './HeaderPlaceholder'
 import Wrapper from './Wrapper'
 
@@ -14,7 +15,9 @@ type Props = {
 const Content = ({ isLoading }: Props) => (
   <Wrapper isLoading={isLoading}>
     <HeaderPlaceholder />
-    {isLoading ? <CircularProgress /> : <Routing />}
+    <ErrorBoundary>
+      {isLoading ? <CircularProgress /> : <Routing />}
+    </ErrorBoundary>
   </Wrapper>
 )
 

src/components/pages/TurnOrder/ModeSelection.tsx

@@ -32,8 +32,6 @@ const mapDispatchToProps = {
 
 type Props = ReturnType<typeof mapStateToProps> & typeof mapDispatchToProps & {}
 
-console.log(MODES)
-
 const ModeSelection = ({ mode, setMode }: Props) => (
   <Card>
     <CardContent>