From 6630572d3ee8253989461e6daa008dc7c0749a83 Mon Sep 17 00:00:00 2001
From: Ester Marti <ester.martivilaseca@elastic.co>
Date: Tue, 5 Oct 2021 17:53:02 +0200
Subject: [PATCH] Add error handling to refresh callback

---
 .../pages/cluster/overview_page.tsx           |  2 -
 .../application/pages/page_template.tsx       |  4 +-
 .../public/lib/ajax_error_handler.tsx         | 45 ++++++++++++++-----
 3 files changed, 36 insertions(+), 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
index 9bf0bf6d14795..3167cd76195c9 100644
--- 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
index 7c6a6c56a1322..15813edffb982 100644
--- 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
index 33bf10d59fb42..2933a19a7e293 100644
--- 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);