Merge pull request #190 from mozilla/error_boundary

Better handle errors and fix some issues

src/components/errorBoundary.jsx

@@ -0,0 +1,22 @@
+import Raven from 'raven-js';
+import { Component } from 'react';
+import GenericErrorMessage from './genericErrorMessage';
+
+class ErrorBoundary extends Component {
+  state = { hasError: false }
+
+  componentDidCatch(error, info) {
+    this.setState({ info, error });
+    Raven.captureException(error);
+    Raven.captureMessage(info);
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return <GenericErrorMessage />;
+    }
+    return this.props.children;
+  }
+}
+
+export default ErrorBoundary;

src/components/genericErrorMessage.jsx

@@ -0,0 +1,10 @@
+import settings from '../settings';
+
+const GenericErrorMessage = () => (
+  <p style={{ textAlign: 'center', fontWeight: 'bold' }}>
+    <span>There has been a critical error. Please </span>
+    <a href={`${settings.REPO}/issues/new`} target="_blank">file an issue</a>.
+  </p>
+);
+
+export default GenericErrorMessage;

src/containers/summary.jsx

@@ -3,6 +3,7 @@ import ReactInterval from 'react-interval';
 
 import Summary from '../components/summary';
 import ChangesetFilter from '../components/changesetFilter';
+import GenericErrorMessage from '../components/genericErrorMessage';
 import settings from '../settings';
 import { arrayToMap, mapToArray } from '../utils/data';
 import { getCoverage } from '../utils/coverage';
@@ -117,7 +118,7 @@ export default class SummaryContainer extends Component {
 
     const viewableCsetsMap = {};
     changesets.forEach((cset) => {
-      if (coverageMap[cset.node].show &&
+      if (coverageMap[cset.node] && coverageMap[cset.node].show &&
           cset.desc.search(descriptionFilterValue) !== -1) {
         viewableCsetsMap[cset.node] = cset;
       }
@@ -148,10 +149,7 @@ export default class SummaryContainer extends Component {
           />
         }
         {(!pollingEnabled && Object.keys(viewableCsetsMap) === 0) &&
-          <p style={{ textAlign: 'center', fontWeight: 'bold' }}>
-            <span>There is currently no coverage data to show. Please </span>
-            <a href={`${settings.REPO}/issues/new`} target="_blank">file an issue</a>.
-          </p>
+          <GenericErrorMessage />
         }
         {Object.keys(changesets).length === 0 &&
           (<h3 className="loading">{LOADING}</h3>)

src/index.jsx

@@ -3,14 +3,19 @@ import { render } from 'react-dom';
 import { AppContainer } from 'react-hot-loader';
 import { HashRouter } from 'react-router-dom';
 import App from './components/app';
+import Boundary from './components/errorBoundary';
 
-Raven.config('https://60b05bc4ef794a6c9e30e86e6a316083@sentry.io/300397').install();
+if (process.env.NODE_ENV === 'production') {
+  Raven.config('https://60b05bc4ef794a6c9e30e86e6a316083@sentry.io/300397').install();
+}
 
 const root = document.getElementById('root');
 const load = () => render(
   <AppContainer>
     <HashRouter>
-      <App />
+      <Boundary>
+        <App />
+      </Boundary>
     </HashRouter>
   </AppContainer>,
   root,

src/settings.js

@@ -1,6 +1,5 @@
 const settings = {
   ACTIVE_DATA: 'https://activedata.allizom.org',
-  BACKEND: 'https://coverage.moz.tools',
   BZ_URL: 'https://bugzilla.mozilla.org',
   CACHE_CONFIG: {
     SECONDS_TO_EXPIRE: 1 * 60 * 60, // 1 hour

src/utils/coverage.js

@@ -4,12 +4,12 @@ import { jsonPost, jsonFetch, plainFetch } from './fetch';
 import { queryCacheWithFallback } from './localCache';
 
 const {
-  ACTIVE_DATA, BACKEND, CCOV_BACKEND, CODECOV_GECKO_DEV, GH_GECKO_DEV,
+  ACTIVE_DATA, CCOV_BACKEND, CODECOV_GECKO_DEV, GH_GECKO_DEV,
 } = settings;
 
 export const githubUrl = gitCommit => `${GH_GECKO_DEV}/commit/${gitCommit}`;
 export const codecovUrl = gitCommit => (`${CODECOV_GECKO_DEV}/commit/${gitCommit}`);
-export const ccovBackendUrl = node => (`${BACKEND}/coverage/changeset/${node}`);
+export const ccovBackendUrl = node => (`${CCOV_BACKEND}/coverage/changeset/${node}`);
 
 const queryChangesetCoverage = node =>
   plainFetch(`${CCOV_BACKEND}/coverage/changeset/${node}`);
@@ -145,7 +145,7 @@ export const getChangesetCoverage = async (node) => {
   if (!node) {
     throw Error(`No node for cset: ${node}`);
   }
-  let coverage = { show: false, node };
+  let coverage = { show: false };
   const res = await queryChangesetCoverage(node);
   if (res.status === 202) {
     // This is the only case when we poll again
@@ -158,6 +158,7 @@ export const getChangesetCoverage = async (node) => {
   } else {
     console.warning(`Unexpected HTTP code (${res.status}) for ${coverage}`);
   }
+  coverage.node = node;
   return coverage;
 };