feat: added error boundary for each page so errors don't crash the whole app (#84)

src/components/ErrorBoundary.tsx

@@ -0,0 +1,35 @@
+import { Component, ErrorInfo, ReactElement } from 'react'
+
+interface Props {
+  children: ReactElement
+}
+
+interface State {
+  error: Error | null
+}
+
+export default class ErrorBoundary extends Component<Props, State> {
+  constructor(props: Props) {
+    super(props)
+    this.state = { error: null }
+  }
+
+  static getDerivedStateFromError(error: Error): { error: Error } {
+    // Update state so the next render will show the fallback UI.
+    return { error }
+  }
+
+  componentDidCatch(error: Error, errorInfo: ErrorInfo): void {
+    // You can also log the error to an error reporting service
+    console.error({ error, errorInfo }) // eslint-disable-line
+  }
+
+  render(): ReactElement {
+    if (this.state.error) {
+      // You can render any custom fallback UI
+      return <h1>Something went wrong. Error: {this.state.error.message}</h1>
+    }
+
+    return this.props.children
+  }
+}

src/layout/Dashboard.tsx

@@ -1,4 +1,5 @@
-import React, { useState, useEffect, ReactElement } from 'react'
+import { useState, useEffect, ReactElement } from 'react'
+import ErrorBoundary from '../components/ErrorBoundary'
 
 import { createStyles, Theme, makeStyles } from '@material-ui/core/styles'
 
@@ -71,7 +72,9 @@ const Dashboard = (props: Props): ReactElement => {
     <div>
       <SideBar {...props} themeMode={themeMode} health={health} nodeHealth={nodeHealth} />
       <NavBar themeMode={themeMode} />
-      <main className={classes.content}>{props.children}</main>
+      <ErrorBoundary>
+        <main className={classes.content}>{props.children}</main>
+      </ErrorBoundary>
     </div>
   )
 }