Introduce error boundaries around all screens

1 files changed, 40 insertions, 0 deletions

diff --git a/src/view/com/util/ErrorBoundary.tsx b/src/view/com/util/ErrorBoundary.tsx
new file mode 100644
index 000000000..017265f48
--- /dev/null
+++ b/src/view/com/util/ErrorBoundary.tsx
@@ -0,0 +1,40 @@
+import React, {Component, ErrorInfo, ReactNode} from 'react'
+import {ErrorScreen} from './error/ErrorScreen'
+
+interface Props {
+  children?: ReactNode
+}
+
+interface State {
+  hasError: boolean
+  error: any
+}
+
+export class ErrorBoundary extends Component<Props, State> {
+  public state: State = {
+    hasError: false,
+    error: undefined,
+  }
+
+  public static getDerivedStateFromError(error: Error): State {
+    return {hasError: true, error}
+  }
+
+  public componentDidCatch(error: Error, errorInfo: ErrorInfo) {
+    console.error('Uncaught error:', error, errorInfo)
+  }
+
+  public render() {
+    if (this.state.hasError) {
+      return (
+        <ErrorScreen
+          title="Oh no!"
+          message="There was an unexpected issue in the application. Please let us know if this happened to you!"
+          details={this.state.error.toString()}
+        />
+      )
+    }
+
+    return this.props.children
+  }
+}