Rework unexpected error modal to trigger for exceptions blocking rend…

…ering

app/frontend/components/app.tsx

@@ -9,9 +9,9 @@ import NavbarAuth from './common/navbar/navbarAuth'
 import NavbarUnauth from './common/navbar/navbarUnauth'
 import AutoLogout from './autoLogout'
 import {ADALITE_CONFIG} from '../config'
-import UnexpectedErrorModal from './common/unexpectedErrorModal'
 import Exchange from './pages/exchange/exchange'
 import NufiPreviewPage from './pages/nufiPreview/nufiPreviewPage'
+import ErrorBoundary from './errorBoundary'
 
 const {ADALITE_LOGOUT_AFTER} = ADALITE_CONFIG
 
@@ -39,14 +39,15 @@ const App = connect((state) => ({
   }
   return (
     <div className="wrap">
-      <LoadingOverlay />
-      <Navbar />
-      <TopLevelRouter />
-      <Footer />
-      {ADALITE_LOGOUT_AFTER > 0 && <AutoLogout />}
-      {displayWelcome && <Welcome />}
-      {shouldShowContactFormModal && <ContactForm />}
-      {shouldShowUnexpectedErrorModal && <UnexpectedErrorModal />}
+      <ErrorBoundary>
+        <LoadingOverlay />
+        <Navbar />
+        <TopLevelRouter />
+        <Footer />
+        {ADALITE_LOGOUT_AFTER > 0 && <AutoLogout />}
+        {displayWelcome && <Welcome />}
+        {shouldShowContactFormModal && <ContactForm />}
+      </ErrorBoundary>
     </div>
   )
 })

app/frontend/components/common/unexpectedErrorModal.tsx

@@ -5,13 +5,19 @@ import actions from '../../actions'
 import Modal from './modal'
 import Alert from './alert'
 import submitFeedbackToSentry from '../../helpers/submitFeedbackToSentry'
+import * as Sentry from '@sentry/browser'
 
 interface Props {
   sendSentry: any
   closeUnexpectedErrorModal: () => void
+  reloadPageOnClose: boolean
 }
 
-const UnexpectedErrorModal = ({sendSentry, closeUnexpectedErrorModal}: Props) => {
+const UnexpectedErrorModal = ({
+  sendSentry,
+  closeUnexpectedErrorModal,
+  reloadPageOnClose,
+}: Props) => {
   const [userEmail, setEmail] = useState('')
   const [userName, setName] = useState('')
   const [userComments, setComments] = useState('')
@@ -31,8 +37,14 @@ const UnexpectedErrorModal = ({sendSentry, closeUnexpectedErrorModal}: Props) =>
         sendSentry.resolve(false)
       }
       closeUnexpectedErrorModal()
+
+      if (reloadPageOnClose) {
+        // workaround to allow for sentry to queue up the error to be sent
+        // before the app is reloaded
+        setTimeout(() => Sentry.close(5000).then(() => window.location.reload()), 300)
+      }
     },
-    [userComments, userEmail, userName, sendSentry, closeUnexpectedErrorModal]
+    [userComments, userEmail, userName, sendSentry, closeUnexpectedErrorModal, reloadPageOnClose]
   )
   const cancelAndClose = useCallback(() => closeAndResolve(false), [closeAndResolve])
   const sendAndClose = useCallback(() => closeAndResolve(true), [closeAndResolve])

app/frontend/components/errorBoundary.tsx

@@ -0,0 +1,40 @@
+import {Component, h} from 'preact'
+import {captureException} from '@sentry/browser'
+import {connect} from '../helpers/connect'
+import actions from '../actions'
+import UnexpectedErrorModal from './common/unexpectedErrorModal'
+
+interface Props {
+  shouldShowUnexpectedErrorModal: boolean
+}
+class ErrorBoundary extends Component<Props, {}> {
+  state = {errorCaughtAtBoundary: null}
+
+  static getDerivedStateFromError(error) {
+    return {errorCaughtAtBoundary: error.message}
+  }
+
+  componentDidCatch(error) {
+    captureException(error)
+  }
+
+  render() {
+    const isUnhandledError = this.state.errorCaughtAtBoundary != null
+
+    return (
+      <span>
+        {!isUnhandledError && this.props.children}
+        {this.props.shouldShowUnexpectedErrorModal && (
+          <UnexpectedErrorModal reloadPageOnClose={isUnhandledError} />
+        )}
+      </span>
+    )
+  }
+}
+
+export default connect(
+  (state) => ({
+    shouldShowUnexpectedErrorModal: state.shouldShowUnexpectedErrorModal,
+  }),
+  actions
+)(ErrorBoundary)