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) {
-  var ravenOptions = {};
+const ravenOptions = {};
 
-  export const ravenLogger = new RavenLogger({
+const ravenLogger = new RavenLogger({
   publicDSN: Meteor.settings.public.sentryPublicDSN, // will be used on the client
   privateDSN: Meteor.settings.sentryPrivateDSN, // will be used on the server
   shouldCatchConsoleError: true, // default
-    trackUser: false, // default
-  }, ravenOptions);
-}
+  trackUser: false // default
+}, 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,6 +54,7 @@ import './App.scss';
 const App = props => (
   /* https://react.i18next.com/components/i18nextprovider.html */
   <I18nextProvider i18n={i18n}>
+    <ErrorBoundary>
       <Router history={history}>
         { !props.loading ?
           <div className="App">
@@ -63,6 +65,7 @@ const App = props => (
             </Helmet>
             <Navigation {...props} />
             <ReSendEmail {...props} />
+
             <Grid>
               <Switch>
                 <Route exact name="index" path="/" component={Index} />
@@ -93,6 +96,7 @@ const App = props => (
                 <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>
@@ -103,6 +107,7 @@ const App = props => (
             }
           </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",