Add error handling to refresh callback

elastic · Oct 5, 2021 · 6630572 · 6630572
1 parent 723370a
commit 6630572
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 15 deletions.
diff --git a/x-pack/plugins/monitoring/public/application/pages/cluster/overview_page.tsx b/x-pack/plugins/monitoring/public/application/pages/cluster/overview_page.tsx
@@ -78,8 +78,6 @@ export const ClusterOverview: React.FC<{}> = () => {
       });
 
       setClusters(formatClusters(response));
-    } catch (err) {
-      // TODO: handle errors
     } finally {
       setLoaded(true);
     }

diff --git a/x-pack/plugins/monitoring/public/application/pages/page_template.tsx b/x-pack/plugins/monitoring/public/application/pages/page_template.tsx
@@ -14,6 +14,7 @@ import { MonitoringTimeContainer } from '../hooks/use_monitoring_time';
 import { PageLoading } from '../../components';
 import { getSetupModeState, isSetupModeFeatureEnabled } from '../setup_mode/setup_mode';
 import { SetupModeFeature } from '../../../common/enums';
+import { ajaxErrorHandlersProvider } from '../../lib/ajax_error_handler';
 
 export interface TabMenuItem {
   id: string;
@@ -55,7 +56,8 @@ export const PageTemplate: React.FC<PageTemplateProps> = ({
 
   const onRefresh = () => {
     getPageData?.().catch((err) => {
-      // TODO: handle errors
+      const errorHandler = ajaxErrorHandlersProvider();
+      errorHandler(err);
     });
   };
 

diff --git a/x-pack/plugins/monitoring/public/lib/ajax_error_handler.tsx b/x-pack/plugins/monitoring/public/lib/ajax_error_handler.tsx
@@ -13,22 +13,43 @@ import { Legacy } from '../legacy_shims';
 import { formatMsg } from '../../../../../src/plugins/kibana_legacy/public';
 import { toMountPoint } from '../../../../../src/plugins/kibana_react/public';
 
+function formatAngularErrors(err: any) {
+  return (
+    <EuiText>
+      <p>{err.data.message}</p>
+      <EuiText size="xs">
+        <FormattedMessage
+          id="xpack.monitoring.ajaxErrorHandler.httpErrorMessage"
+          defaultMessage="HTTP {errStatus}"
+          values={{ errStatus: err.status }}
+        />
+      </EuiText>
+    </EuiText>
+  );
+}
+
+function formatReactErrors(err: any) {
+  return (
+    <EuiText>
+      <p>{err.body.message}</p>
+      <EuiText size="xs">
+        <FormattedMessage
+          id="xpack.monitoring.ajaxErrorHandler.httpErrorMessage"
+          defaultMessage="HTTP {errStatus}"
+          values={{ errStatus: err.body.statusCode }}
+        />
+      </EuiText>
+    </EuiText>
+  );
+}
+
 export function formatMonitoringError(err: any) {
   // TODO: We should stop using Boom for errors and instead write a custom handler to return richer error objects
   // then we can do better messages, such as highlighting the Cluster UUID instead of requiring it be part of the message
   if (err.status && err.status !== -1 && err.data) {
-    return (
-      <EuiText>
-        <p>{err.data.message}</p>
-        <EuiText size="xs">
-          <FormattedMessage
-            id="xpack.monitoring.ajaxErrorHandler.httpErrorMessage"
-            defaultMessage="HTTP {errStatus}"
-            values={{ errStatus: err.status }}
-          />
-        </EuiText>
-      </EuiText>
-    );
+    return formatAngularErrors(err);
+  } else if (err.body) {
+    return formatReactErrors(err);
   }
 
   return formatMsg(err);