Collect user data and integrate error page with Intercom (#1111)

* Collect user data and integrate error page with Intercom

This commit puts an ErrorBoundary around each Route's parent component.
This way each ErrorBoundary is under the IntlProvider and has Intercom in scope so we integrate and prefill support request messages when crashes happen.
ErrorBoundary component now gets a `component` prop to specify which component it is wrapping and this will be sent with the errbit report.
It is also collecting user name, dbid and email to send with the report, to help gain more insight/context on the crashes.

Note I: The @airbrake-js/browser calls to the Errbit server seem to ignore the extra data added as context, params and session, unless the error is a string or we cast a new instance from the raised error object. To be investigated. See github issue: airbrake/airbrake-js#1193

Note II: MainErrorBoundary has been renamed to ErrorBoundary

Fixes: CHECK-1744

* Remove console log with intentional error 😅

Also to mention that change in helpers.js is to guard agains `null` value for `str`.

Fixes CHECK-1747

* Add missing files 🤦

localization/react-intl/src/app/components/error/ErrorBoundary.json

@@ -0,0 +1,12 @@
+[
+  {
+    "id": "errorBoundary.message",
+    "description": "Prefilled support request message when Check UI crashes",
+    "defaultMessage": "Hello, I'm having trouble with Check. The web interface has just crashed and is blocking me from doing work!"
+  },
+  {
+    "id": "mainErrorBoundary.cardTitle",
+    "description": "Title for error state card displayed in error page",
+    "defaultMessage": "An unexpected error happened"
+  }
+]

src/app/components/Root.js

@@ -11,7 +11,7 @@ import NotFound from './NotFound';
 import UserConfirmPage from './UserConfirmPage';
 import UserPasswordChange from './UserPasswordChange';
 import UserPasswordReset from './UserPasswordReset';
-import MainErrorBoundary from './error/MainErrorBoundary';
+import ErrorBoundary from './error/ErrorBoundary';
 import User from './source/User';
 import Me from './source/Me';
 import Team from './team/Team';
@@ -55,10 +55,10 @@ class Root extends Component {
     window.Check = { store };
 
     return (
-      <MainErrorBoundary>
-        <React.Fragment>
-          <RootLocale locale={locale} />
-          <IntlProvider locale={locale} messages={translations}>
+      <React.Fragment>
+        <RootLocale locale={locale} />
+        <IntlProvider locale={locale} messages={translations}>
+          <ErrorBoundary component="Root">
             <Provider store={store}>
               <Router history={browserHistory} onUpdate={Root.logPageView}>
                 <Route path="/" component={Home}>
@@ -106,9 +106,9 @@ class Root extends Component {
                 </Route>
               </Router>
             </Provider>
-          </IntlProvider>
-        </React.Fragment>
-      </MainErrorBoundary>
+          </ErrorBoundary>
+        </IntlProvider>
+      </React.Fragment>
     );
   }
 }

src/app/components/UserConfirmPage.js

@@ -10,6 +10,7 @@ import Box from '@material-ui/core/Box';
 import PageTitle from './PageTitle';
 import { FormattedGlobalMessage } from './MappedMessage';
 import CheckAgreeTerms from './CheckAgreeTerms';
+import ErrorBoundary from './error/ErrorBoundary';
 import globalStrings from '../globalStrings';
 import { stringHelper } from '../customHelpers';
 import {
@@ -46,83 +47,85 @@ function UserConfirmPage({ params }) {
   const classes = useStyles();
 
   return (
-    <Typography component="div" variant="body2" gutterBottom>
-      <PageTitle>
-        <Box m={2} align="center">
-          <FormattedHTMLMessage {...globalStrings.bestViewed} />
-        </Box>
-        <ContentColumn center className="user-confirm-page__component">
-          <StyledCard>
-            <FormattedGlobalMessage messageKey="appNameHuman">
-              {appNameHuman => (
-                <img
-                  className={classes.logo}
-                  alt={appNameHuman}
-                  width="120"
-                  src={stringHelper('LOGO_URL')}
-                />
-              )}
-            </FormattedGlobalMessage>
-            <StyledSubHeader className="confirm__heading">
-              { params.confirmType === 'confirmed' ?
-                (<FormattedMessage
-                  id="UserConfirmPage.confirmed"
-                  defaultMessage="Account Confirmed"
-                  description="Message for confirmed accounts"
-                />) : null
-              }
-              { params.confirmType === 'already-confirmed' ?
-                (<FormattedMessage
-                  id="UserConfirmPage.alreadyConfirmed"
-                  defaultMessage="Account Already Confirmed"
-                  description="Message for accounts already confirmed"
-                />) : null
-              }
-            </StyledSubHeader>
-            <Typography component="div" align="center" paragraph className="confirm_content">
-              { params.confirmType === 'confirmed' ?
-                (<FormattedMessage
-                  id="userConfirmed.confrimMessage"
-                  defaultMessage="Thanks for confirming your email address! Now you can sign in."
-                  description="Message for confirmed user"
-                />) : null
-              }
-              { params.confirmType === 'already-confirmed' ?
-                (<FormattedMessage
-                  id="userConfirmed.alreadyConfrimMessage"
-                  defaultMessage="Oops! Your account is already confirmed. Please sign in to get started."
-                  description="Message for user who already confirmed before"
-                />) : null
-              }
-              { params.confirmType === 'unconfirmed' ?
-                (<FormattedMessage
-                  id="userConfirmed.unConfrimMessage"
-                  defaultMessage="Sorry, an error occurred while confirming your account. Please try again and contact {supportEmail} if the condition persists."
-                  values={{
-                    supportEmail: stringHelper('SUPPORT_EMAIL'),
-                  }}
-                  description="Message for unconfirmed users"
-                />) : null
-              }
-            </Typography>
-            <Typography component="div" align="center">
-              <Link to="/">
-                <Button variant="contained" color="primary">
-                  <FormattedMessage
-                    id="userConfirmPage.signIn"
-                    defaultMessage="Sign In"
-                    description="Sign in button"
-                  />
-                </Button>
-              </Link>
-            </Typography>
-          </StyledCard>
-          <Box my={4}>
-            <CheckAgreeTerms />
+    <ErrorBoundary component="UserConfirmPage">
+      <Typography component="div" variant="body2" gutterBottom>
+        <PageTitle>
+          <Box m={2} align="center">
+            <FormattedHTMLMessage {...globalStrings.bestViewed} />
           </Box>
-        </ContentColumn>
-      </PageTitle>
-    </Typography>
+          <ContentColumn center className="user-confirm-page__component">
+            <StyledCard>
+              <FormattedGlobalMessage messageKey="appNameHuman">
+                {appNameHuman => (
+                  <img
+                    className={classes.logo}
+                    alt={appNameHuman}
+                    width="120"
+                    src={stringHelper('LOGO_URL')}
+                  />
+                )}
+              </FormattedGlobalMessage>
+              <StyledSubHeader className="confirm__heading">
+                { params.confirmType === 'confirmed' ?
+                  (<FormattedMessage
+                    id="UserConfirmPage.confirmed"
+                    defaultMessage="Account Confirmed"
+                    description="Message for confirmed accounts"
+                  />) : null
+                }
+                { params.confirmType === 'already-confirmed' ?
+                  (<FormattedMessage
+                    id="UserConfirmPage.alreadyConfirmed"
+                    defaultMessage="Account Already Confirmed"
+                    description="Message for accounts already confirmed"
+                  />) : null
+                }
+              </StyledSubHeader>
+              <Typography component="div" align="center" paragraph className="confirm_content">
+                { params.confirmType === 'confirmed' ?
+                  (<FormattedMessage
+                    id="userConfirmed.confrimMessage"
+                    defaultMessage="Thanks for confirming your email address! Now you can sign in."
+                    description="Message for confirmed user"
+                  />) : null
+                }
+                { params.confirmType === 'already-confirmed' ?
+                  (<FormattedMessage
+                    id="userConfirmed.alreadyConfrimMessage"
+                    defaultMessage="Oops! Your account is already confirmed. Please sign in to get started."
+                    description="Message for user who already confirmed before"
+                  />) : null
+                }
+                { params.confirmType === 'unconfirmed' ?
+                  (<FormattedMessage
+                    id="userConfirmed.unConfrimMessage"
+                    defaultMessage="Sorry, an error occurred while confirming your account. Please try again and contact {supportEmail} if the condition persists."
+                    values={{
+                      supportEmail: stringHelper('SUPPORT_EMAIL'),
+                    }}
+                    description="Message for unconfirmed users"
+                  />) : null
+                }
+              </Typography>
+              <Typography component="div" align="center">
+                <Link to="/">
+                  <Button variant="contained" color="primary">
+                    <FormattedMessage
+                      id="userConfirmPage.signIn"
+                      defaultMessage="Sign In"
+                      description="Sign in button"
+                    />
+                  </Button>
+                </Link>
+              </Typography>
+            </StyledCard>
+            <Box my={4}>
+              <CheckAgreeTerms />
+            </Box>
+          </ContentColumn>
+        </PageTitle>
+      </Typography>
+    </ErrorBoundary>
   );
 }
 

src/app/components/UserPasswordChange.js

@@ -10,6 +10,7 @@ import PageTitle from './PageTitle';
 import ChangePasswordComponent from './ChangePasswordComponent';
 import { FormattedGlobalMessage } from './MappedMessage';
 import CheckAgreeTerms from './CheckAgreeTerms';
+import ErrorBoundary from './error/ErrorBoundary';
 import globalStrings from '../globalStrings';
 import { stringHelper } from '../customHelpers';
 import {
@@ -46,60 +47,62 @@ function UserPasswordChange() {
   const classes = useStyles();
 
   return (
-    <PageTitle>
-      <Box m={2} align="center">
-        <FormattedHTMLMessage {...globalStrings.bestViewed} />
-      </Box>
-      <ContentColumn center className="user-password-reset__component">
-        <StyledCard>
-          <FormattedGlobalMessage messageKey="appNameHuman">
-            {appNameHuman => (
-              <img
-                className={classes.logo}
-                alt={appNameHuman}
-                width="120"
-                src={stringHelper('LOGO_URL')}
-              />
-            )}
-          </FormattedGlobalMessage>
-          <StyledSubHeader className="reset-password__heading">
+    <ErrorBoundary component="UserPasswordChange">
+      <PageTitle>
+        <Box m={2} align="center">
+          <FormattedHTMLMessage {...globalStrings.bestViewed} />
+        </Box>
+        <ContentColumn center className="user-password-reset__component">
+          <StyledCard>
+            <FormattedGlobalMessage messageKey="appNameHuman">
+              {appNameHuman => (
+                <img
+                  className={classes.logo}
+                  alt={appNameHuman}
+                  width="120"
+                  src={stringHelper('LOGO_URL')}
+                />
+              )}
+            </FormattedGlobalMessage>
+            <StyledSubHeader className="reset-password__heading">
+              { showConfirmDialog ?
+                <FormattedMessage id="passwordChange.successTitle" defaultMessage="Password updated" />
+                : <FormattedMessage id="passwordChange.title" defaultMessage="Change password" />
+              }
+            </StyledSubHeader>
+
             { showConfirmDialog ?
-              <FormattedMessage id="passwordChange.successTitle" defaultMessage="Password updated" />
-              : <FormattedMessage id="passwordChange.title" defaultMessage="Change password" />
+              <React.Fragment>
+                <CardContent>
+                  <FormattedMessage
+                    id="passwordChange.successMsg"
+                    defaultMessage="You're all set. Now you can log in with your new password."
+                  />
+                </CardContent>
+                <CardActions className="user-password-change__actions">
+                  <Button color="primary" onClick={handleSignIn}>
+                    <FormattedMessage id="passwordChange.signIn" defaultMessage="Got it" />
+                  </Button>
+                </CardActions>
+              </React.Fragment> :
+              <div className="user-password-change__card">
+                <CardContent>
+                  <ChangePasswordComponent
+                    type="reset-password"
+                    showCurrentPassword={false}
+                    token={token}
+                    showConfirm={showConfirm}
+                  />
+                </CardContent>
+              </div>
             }
-          </StyledSubHeader>
-
-          { showConfirmDialog ?
-            <React.Fragment>
-              <CardContent>
-                <FormattedMessage
-                  id="passwordChange.successMsg"
-                  defaultMessage="You're all set. Now you can log in with your new password."
-                />
-              </CardContent>
-              <CardActions className="user-password-change__actions">
-                <Button color="primary" onClick={handleSignIn}>
-                  <FormattedMessage id="passwordChange.signIn" defaultMessage="Got it" />
-                </Button>
-              </CardActions>
-            </React.Fragment> :
-            <div className="user-password-change__card">
-              <CardContent>
-                <ChangePasswordComponent
-                  type="reset-password"
-                  showCurrentPassword={false}
-                  token={token}
-                  showConfirm={showConfirm}
-                />
-              </CardContent>
-            </div>
-          }
-        </StyledCard>
-        <Box my={4}>
-          <CheckAgreeTerms />
-        </Box>
-      </ContentColumn>
-    </PageTitle>
+          </StyledCard>
+          <Box my={4}>
+            <CheckAgreeTerms />
+          </Box>
+        </ContentColumn>
+      </PageTitle>
+    </ErrorBoundary>
   );
 }