Use ErrorBoundary to catch both render-time and mount-time errors

client/Components/ErrorBoundary.tsx

@@ -0,0 +1,45 @@
+import * as React from "react";
+
+interface ErrorBoundaryProps {
+  children: React.ReactNode;
+  renderError: (error: Error, errorInfo: React.ErrorInfo) => React.ReactNode;
+}
+
+interface ErrorBoundaryState {
+  hasError: boolean;
+  error: Error | null;
+  errorInfo: React.ErrorInfo | null;
+}
+
+class ErrorBoundary extends React.Component<
+  ErrorBoundaryProps,
+  ErrorBoundaryState
+> {
+  state: ErrorBoundaryState = {
+    hasError: false,
+    error: null,
+    errorInfo: null
+  };
+
+  constructor(props: ErrorBoundaryProps) {
+    super(props);
+  }
+
+  componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
+    this.setState({
+      hasError: true,
+      error: error,
+      errorInfo: errorInfo
+    });
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return this.props.renderError(this.state.error, this.state.errorInfo);
+    }
+
+    return this.props.children;
+  }
+}
+
+export default ErrorBoundary;