Add an error boundary around the top level as well

packages/api-explorer/__tests__/index.test.jsx

@@ -2,7 +2,9 @@ const React = require('react');
 const { shallow, mount } = require('enzyme');
 const Cookie = require('js-cookie');
 const extensions = require('@readme/oas-extensions');
-const ApiExplorer = require('../src');
+const WrappedApiExplorer = require('../src');
+
+const { ApiExplorer } = WrappedApiExplorer;
 
 const oas = require('./fixtures/petstore/oas');
 
@@ -28,6 +30,14 @@ test('ApiExplorer renders a doc for each', () => {
   expect(explorer.find('Doc').length).toBe(docs.length);
 });
 
+test('Should display an error message if it fails to render (wrapped in ErrorBoundary)', () => {
+  // Prompting an error with an array of nulls instead of Docs
+  // This is to simulate some unknown error state during initial render
+  const explorer = shallow(<WrappedApiExplorer {...props} docs={[null, null]} />);
+
+  expect(explorer.find('ErrorBoundary').length).toBe(1);
+});
+
 describe('selected language', () => {
   test('should default to curl', () => {
     const explorer = shallow(

packages/api-explorer/src/EndpointErrorBoundary.jsx

@@ -20,7 +20,8 @@ class EndpointErrorBoundary extends React.Component {
         <div className="hub-reference-section">
           <div className="hub-reference-left" style={{ paddingLeft: '2%' }}>
             <h3>
-              There was an error rendering this endpoint. Please contact{' '}
+              There was an error rendering this endpoint. If you are the owner of this project
+              please contact{' '}
               <a href="mailto:support@readme.io?subject=API Explorer Error">
                 support@readme.io
               </a>{' '}

packages/api-explorer/src/ErrorBoundary.jsx

@@ -0,0 +1,42 @@
+const React = require('react');
+const PropTypes = require('prop-types');
+
+class ErrorBoundary extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { error: false };
+  }
+
+  componentDidCatch(error, info) {
+    this.setState({ error, info });
+    // TODO add bugsnag here?
+    // You can also log the error to an error reporting service
+    // logErrorToMyService(error, info);
+  }
+
+  render() {
+    if (this.state.error) {
+      return (
+        <div style={{ paddingLeft: '2%' }}>
+          <h3>
+            There was an error rendering the API Explorer. If you are the owner of this project
+            please contact{' '}
+            <a href="mailto:support@readme.io?subject=API Explorer Error">support@readme.io</a> with
+            the following error:
+          </h3>
+          <pre>
+            {this.state.error && this.state.error.toString()}
+            {this.state.info.componentStack}
+          </pre>
+        </div>
+      );
+    }
+    return this.props.children;
+  }
+}
+
+ErrorBoundary.propTypes = {
+  children: PropTypes.node.isRequired,
+};
+
+module.exports = ErrorBoundary;

packages/api-explorer/src/index.jsx

@@ -3,6 +3,7 @@ const Cookie = require('js-cookie');
 const PropTypes = require('prop-types');
 const extensions = require('@readme/oas-extensions');
 
+const ErrorBoundary = require('./ErrorBoundary');
 const Doc = require('./Doc');
 
 class ApiExplorer extends React.Component {
@@ -99,4 +100,9 @@ ApiExplorer.defaultProps = {
   tryItMetrics: () => {},
 };
 
-module.exports = ApiExplorer;
+module.exports = props => (
+  <ErrorBoundary>
+    <ApiExplorer {...props} />
+  </ErrorBoundary>
+);
+module.exports.ApiExplorer = ApiExplorer;