Error boundary for general errors

imports/startup/client/ravenLogger.js

@@ -1,13 +1,13 @@
 import RavenLogger from 'meteor/flowkey:raven';
 import { Meteor } from 'meteor/meteor';
 
-if (Meteor.isProduction) {
+const ravenOptions = {};
-  var ravenOptions = {};
 
-  export const ravenLogger = new RavenLogger({
+const ravenLogger = new RavenLogger({
-    publicDSN: Meteor.settings.public.sentryPublicDSN, // will be used on the client
+  publicDSN: Meteor.settings.public.sentryPublicDSN, // will be used on the client
-    privateDSN: Meteor.settings.sentryPrivateDSN, // will be used on the server
+  privateDSN: Meteor.settings.sentryPrivateDSN, // will be used on the server
-    shouldCatchConsoleError: true, // default
+  shouldCatchConsoleError: true, // default
-    trackUser: false, // default
+  trackUser: false // default
-  }, ravenOptions);
+}, ravenOptions);
-}
+
+export default ravenLogger;

imports/ui/components/ErrorBoundary/ErrorBoundary.js

@@ -0,0 +1,59 @@
+/* eslint-disable react/jsx-indent-props */
+/* eslint-disable import/no-absolute-path */
+/* eslint-disable import/no-absolute-path */
+
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { translate } from 'react-i18next';
+import { Row, Col } from 'react-bootstrap';
+import { withTracker } from 'meteor/react-meteor-data';
+import ravenLogger from '/imports/startup/client/ravenLogger';
+import './ErrorBoundary.scss';
+
+// https://reactjs.org/blog/2017/07/26/error-handling-in-react-16.html
+class ErrorBoundary extends Component {
+  constructor(props) {
+    super(props);
+    this.t = props.t;
+    this.state = { hasError: false };
+  }
+
+  componentDidCatch(error, info) {
+    // Display fallback UI
+    this.setState({ hasError: true });
+    // You can also log the error to an error reporting service
+    ravenLogger.log(error);
+    ravenLogger.log(info);
+  }
+
+  render() {
+    if (this.state.hasError) {
+      // You can render any custom fallback UI
+      return (
+        <div className="error-boundary">
+          <Row className="align-items-center justify-content-center">
+            <Col xs={12} sm={6} md={5} lg={4}>
+              <h1 className="page-header">{this.t('AppNameFull')}</h1>
+              <h4 className="page-header">{this.t('general-error-title')}</h4>
+              <Row>
+                {this.t('general-error-description')}
+              </Row>
+            </Col>
+          </Row>
+        </div>
+      );
+    }
+    return this.props.children;
+  }
+}
+
+ErrorBoundary.propTypes = {
+  t: PropTypes.func.isRequired
+};
+
+ErrorBoundary.defaultProps = {
+};
+
+export default translate([], { wait: true })(withTracker(props => ({
+  // props.something
+}))(ErrorBoundary));

imports/ui/components/ErrorBoundary/ErrorBoundary.scss

@@ -0,0 +1,10 @@
+.error-boundary {
+  background-image: url('/error-background.png');
+  height: 100%;
+  min-height: 55vh;
+  margin-top: 40px;
+}
+
+.error-boundary > div > div > h4 {
+  line-height: 1.5em;
+}

imports/ui/layouts/App/App.js

@@ -43,6 +43,7 @@ import Privacy from '../../pages/Privacy/Privacy';
 import License from '../../pages/License/License';
 import Credits from '../../pages/Credits/Credits';
 import ReSendEmail from '../../components/ReSendEmail/ReSendEmail';
+import ErrorBoundary from '../../components/ErrorBoundary/ErrorBoundary';
 import history from '../../components/History/History';
 import '../../components/NotificationsObserver/NotificationsObserver';
 import FiresMap from '../../pages/FiresMap/FiresMap';
@@ -53,56 +54,60 @@ import './App.scss';
 const App = props => (
   /* https://react.i18next.com/components/i18nextprovider.html */
   <I18nextProvider i18n={i18n}>
-    <Router history={history}>
+    <ErrorBoundary>
-      { !props.loading ?
+      <Router history={history}>
-        <div className="App">
+        { !props.loading ?
-          <Helmet>
+          <div className="App">
-            <meta charSet="utf-8" />
+            <Helmet>
-            <title>{i18n.t('AppName')}</title>
+              <meta charSet="utf-8" />
-            <meta name="description" content={`${i18n.t('AppDescrip')}: ${i18n.t('AppDescripLong')}`} />
+              <title>{i18n.t('AppName')}</title>
-          </Helmet>
+              <meta name="description" content={`${i18n.t('AppDescrip')}: ${i18n.t('AppDescripLong')}`} />
-          <Navigation {...props} />
+            </Helmet>
-          <ReSendEmail {...props} />
+            <Navigation {...props} />
-          <Grid>
+            <ReSendEmail {...props} />
-            <Switch>
-              <Route exact name="index" path="/" component={Index} />
-              {/* <Authenticated exact path="/documents" component={Documents} {...props} />
-              <Authenticated exact path="/documents/new" component={NewDocument} {...props} />
-              <Authenticated exact path="/documents/:_id" component={ViewDocument} {...props} />
-              <Authenticated exact path="/documents/:_id/edit" component={EditDocument} {...props} />
-              */}
-              <Authenticated exact path="/subscriptions" component={Subscriptions} {...props} />
-              <Authenticated exact path="/subscriptions/new" component={NewSubscription} {...props} />
-              <Authenticated exact path="/subscriptions/:_id" component={ViewSubscription} {...props} />
-              <Authenticated exact path="/subscriptions/:_id/edit" component={EditSubscription} {...props} />
-              <Authenticated exact path="/profile" component={Profile} {...props} />
-              <Authenticated exact path="/status" component={Status} {...props} />
-              <Route path="/fires" component={FiresMap} {...props} />
-              <Route path="/fire/:id" component={Fires} {...props} />
-              <Public path="/auth/:token" component={Auth} {...props} />
-              <Public path="/signup" component={Signup} {...props} />
-              <Public path="/login" component={Login} {...props} />
-              <Route path="/logout" component={Logout} {...props} />
-              <Route path="/sandbox" component={Sandbox} {...props} />
-              {/* <Route path="/subscriptions" render={props => <FireSubscription focusInput {...props} />} /> */}
 
-              <Route name="verify-email" path="/verify-email/:token" component={VerifyEmail} />
+            <Grid>
-              <Route name="recover-password" path="/recover-password" component={RecoverPassword} />
+              <Switch>
-              <Route name="reset-password" path="/reset-password/:token" component={ResetPassword} />
+                <Route exact name="index" path="/" component={Index} />
-              <Route name="terms" path="/terms" component={Terms} />
+                {/* <Authenticated exact path="/documents" component={Documents} {...props} />
-              <Route name="privacy" path="/privacy" component={Privacy} />
+                <Authenticated exact path="/documents/new" component={NewDocument} {...props} />
-              <Route name="license" path="/license" component={License} />
+                <Authenticated exact path="/documents/:_id" component={ViewDocument} {...props} />
-              <Route name="credits" path="/credits" component={Credits} />
+                <Authenticated exact path="/documents/:_id/edit" component={EditDocument} {...props} />
-              <Route component={NotFound} />
+                */}
-            </Switch>
+                <Authenticated exact path="/subscriptions" component={Subscriptions} {...props} />
-          </Grid>
+                <Authenticated exact path="/subscriptions/new" component={NewSubscription} {...props} />
-          <Footer />
+                <Authenticated exact path="/subscriptions/:_id" component={ViewSubscription} {...props} />
-          <Reconnect />
+                <Authenticated exact path="/subscriptions/:_id/edit" component={EditSubscription} {...props} />
-          {props.i18nReady.get() &&
+                <Authenticated exact path="/profile" component={Profile} {...props} />
-          <Blaze template="cookieConsent" />
+                <Authenticated exact path="/status" component={Status} {...props} />
-          }
+                <Route path="/fires" component={FiresMap} {...props} />
-        </div> : ''}
+                <Route path="/fire/:id" component={Fires} {...props} />
-    </Router>
+                <Public path="/auth/:token" component={Auth} {...props} />
+                <Public path="/signup" component={Signup} {...props} />
+                <Public path="/login" component={Login} {...props} />
+                <Route path="/logout" component={Logout} {...props} />
+                <Route path="/sandbox" component={Sandbox} {...props} />
+                {/* <Route path="/subscriptions" render={props => <FireSubscription focusInput {...props} />} /> */}
+
+                <Route name="verify-email" path="/verify-email/:token" component={VerifyEmail} />
+                <Route name="recover-password" path="/recover-password" component={RecoverPassword} />
+                <Route name="reset-password" path="/reset-password/:token" component={ResetPassword} />
+                <Route name="terms" path="/terms" component={Terms} />
+                <Route name="privacy" path="/privacy" component={Privacy} />
+                <Route name="license" path="/license" component={License} />
+                <Route name="credits" path="/credits" component={Credits} />
+
+                <Route component={NotFound} />
+              </Switch>
+            </Grid>
+            <Footer />
+            <Reconnect />
+            {props.i18nReady.get() &&
+            <Blaze template="cookieConsent" />
+            }
+          </div> : ''}
+      </Router>
+    </ErrorBoundary>
   </I18nextProvider>
 );
 

public/locales/es/common.json

@@ -222,6 +222,8 @@
   "Fuego notificado por uno de nuestros usuarios/as <1></1>": "Fuego notificado por uno de nuestros usuarios/as <1></1>",
   "No recibirás notificaciones de fuegos en este equipo, solo por correo": "No recibirás notificaciones de fuegos en este equipo, solo por correo",
   "not-found": "Upppps: Esta página no existe",
+  "general-error-title": "Upppps: Algo ha ido mal",
+  "general-error-description": "Estamos investigando el problema, vuelve a intentarlo en un rato",
   "Más información sobre este fuego": "Más información sobre este fuego",
   "Última actualización, {{when}}": "Última actualización, {{when}}",
   "termsAccept": "Acepto las <1>condiciones de servicio</1> de este sitio",