Add error handling

src/core_plugins/status_page/public/components/status_app.js

@@ -41,25 +41,24 @@ class StatusApp extends Component {
     super();
     this.state = {
       loading: true,
+      fetchError: false,
       data: null
     };
   }
 
   componentDidMount = async function () {
-    try {
-      this.setState({
-        data: await loadStatus(),
-        loading: false
-      });
-    } catch (e) {
-      console.error(e);
+    const data = await loadStatus();
+
+    if (data) {
+      this.setState({ loading: false, data: data });
+    } else {
       this.setState({ fetchError: true, loading: false });
     }
   }
 
   render() {
     const { buildNum, buildSha } = this.props;
-    const { loading, data } = this.state;
+    const { loading, fetchError, data } = this.state;
 
     // If we're still loading, return early with a spinner
     if (loading) {
@@ -68,6 +67,12 @@ class StatusApp extends Component {
       );
     }
 
+    if (fetchError) {
+      return (
+        <EuiText color="danger">An error occurred loading the status</EuiText>
+      );
+    }
+
     // Extract the items needed to render each component
     const { metrics, statuses, serverState, name } = data;
 

src/core_plugins/status_page/public/lib/load_status.js

@@ -20,6 +20,10 @@
 import _ from 'lodash';
 
 import chrome from 'ui/chrome';
+import { notify } from 'ui/notify';
+
+// Module-level error returned by notify.error
+let errorNotif;
 
 /*
 Returns an object of any keys that should be included for metrics.
@@ -62,12 +66,26 @@ function formatMetrics(data) {
 }
 
 async function loadStatus() {
-  const response = await fetch(chrome.addBasePath('/api/status'), {
-    method: 'get'
-  });
+  // Clear any existing error banner.
+  if (errorNotif) {
+    errorNotif.clear();
+    errorNotif = null;
+  }
+
+  let response;
+
+  try {
+    response = await fetch(chrome.addBasePath('/api/status'), { method: 'get' });
+  } catch (e) {
+    // If the fetch failed to connect, display an error and bail.
+    errorNotif = notify.error('Failed to request server status. Perhaps your server is down?');
+    return;
+  }
 
   if (response.status >= 400) {
-    throw new Error(`Request failed with status code: ${response.status}`);
+    // If the server does not respond with a successful status, display an error and bail.
+    errorNotif = notify.error(`Failed to request server status with status code ${response.status}`);
+    return;
   }
 
   const data = await response.json();