Use the error boundary component to semi-gracefully catch errors.

src/App.tsx

@@ -17,6 +17,7 @@ import NavigationRefresh from 'material-ui/svg-icons/navigation/refresh';
 import './App.css';
 
 import withSpin from './widgets/withSpin';
+import ErrorBoundary from './components/ErrorBoundary';
 import SideMenu from './SideMenu';
 import LoginGate from './LoginGate';
 import { RouteResolver } from './routes';
@@ -192,7 +193,9 @@ class App extends React.PureComponent {
             <SideMenu etesync={credentials} onCloseDrawerRequest={this.closeDrawer} />
           </Drawer>
 
-          <LoginGate credentials={this.props.credentials} />
+          <ErrorBoundary>
+            <LoginGate credentials={this.props.credentials} />
+          </ErrorBoundary>
         </div>
         </BrowserRouter>
       </MuiThemeProvider>

src/SideMenu/index.tsx

@@ -13,6 +13,7 @@ const logo = require('../images/logo.svg');
 import { History } from 'history';
 
 import SideMenuJournals from './SideMenuJournals';
+import ErrorBoundary from '../components/ErrorBoundary';
 
 import { routeResolver, getPalette } from '../App';
 
@@ -61,11 +62,13 @@ class SideMenu extends React.PureComponent {
         <React.Fragment>
           <ListDivider />
           <ListSubheader>Journals</ListSubheader>
-          <SideMenuJournals
+          <ErrorBoundary>
-            etesync={this.props.etesync}
+            <SideMenuJournals
-            journals={this.props.journals.value}
+              etesync={this.props.etesync}
-            onItemClick={this.journalClicked}
+              journals={this.props.journals.value}
-          />
+              onItemClick={this.journalClicked}
+            />
+          </ErrorBoundary>
         </React.Fragment>
       );