web: add ErrorBoundary

This change adds an ErrorBoundary container for the page content to
display an error message instead of a blank page when a rendering
error occurs.

Change-Id: Ifb41e3c67fc89be7f9264bfa4a23b3ba734c9cec

web/src/App.jsx

@@ -30,6 +30,7 @@ import {
 } from 'patternfly-react'
 import * as moment from 'moment'
 
+import ErrorBoundary from './containers/ErrorBoundary'
 import logo from './images/logo.png'
 import { routes } from './routes'
 import { fetchConfigErrorsAction } from './actions/configErrors'
@@ -278,7 +279,9 @@ class App extends React.Component {
         </Masthead>
         {errors.length > 0 && this.renderErrors(errors)}
         <div className='container-fluid container-cards-pf'>
-          {this.renderContent()}
+          <ErrorBoundary>
+            {this.renderContent()}
+          </ErrorBoundary>
         </div>
       </React.Fragment>
     )

web/src/containers/ErrorBoundary.jsx

@@ -0,0 +1,43 @@
+// Copyright 2019 Red Hat, Inc
+//
+// Licensed under the Apache License, Version 2.0 (the "License"); you may
+// not use this file except in compliance with the License. You may obtain
+// a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+// WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+// License for the specific language governing permissions and limitations
+// under the License.
+
+import React from 'react'
+import PropTypes from 'prop-types'
+
+
+class ErrorBoundary extends React.Component {
+  static propTypes = {
+    children: PropTypes.object,
+  }
+
+  state = {
+    hasError: false
+  }
+
+  componentDidCatch() {
+    this.setState({
+      hasError: true
+    })
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return <h1>Something went wrong.</h1>
+    }
+
+    return this.props.children
+  }
+}
+
+export default ErrorBoundary