From a5d88e9639e2d927ee46fc69854eb927387a89d2 Mon Sep 17 00:00:00 2001
From: Maryam Saeidi <maryam.saeidi@elastic.co>
Date: Wed, 8 Mar 2023 12:51:03 +0100
Subject: [PATCH] [AO] Add eui error boundary to observability pages (#152786)

Closes #152785

## Summary

Inspired by https://github.com/elastic/kibana/pull/65456

|Before|After|
|---|---|

|![image](https://user-images.githubusercontent.com/12370520/223378684-3d7927cf-b1f3-4ebf-a4b8-9deab9bcc23b.png)|![image](https://user-images.githubusercontent.com/12370520/223378731-4c4861f7-afaf-42f8-bc47-9c4a0d7454ec.png)|
---
 .../public/application/index.tsx              | 73 ++++++++++---------
 .../shared/page_template/page_template.tsx    | 18 +++--
 2 files changed, 48 insertions(+), 43 deletions(-)

diff --git a/x-pack/plugins/observability/public/application/index.tsx b/x-pack/plugins/observability/public/application/index.tsx
index 8a36ffe16671..bce6ad791863 100644
--- a/x-pack/plugins/observability/public/application/index.tsx
+++ b/x-pack/plugins/observability/public/application/index.tsx
@@ -5,6 +5,7 @@
  * 2.0.
  */
 
+import { EuiErrorBoundary } from '@elastic/eui';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { Router, Switch } from 'react-router-dom';
@@ -87,43 +88,45 @@ export const renderApp = ({
   const ApplicationUsageTrackingProvider =
     usageCollection?.components.ApplicationUsageTrackingProvider ?? React.Fragment;
   ReactDOM.render(
-    <ApplicationUsageTrackingProvider>
-      <KibanaThemeProvider theme$={theme$}>
-        <KibanaContextProvider
-          services={{
-            ...core,
-            ...plugins,
-            storage: new Storage(localStorage),
-            isDev,
-            kibanaVersion,
-          }}
-        >
-          <PluginContext.Provider
-            value={{
-              config,
-              appMountParameters,
-              observabilityRuleTypeRegistry,
-              ObservabilityPageTemplate,
+    <EuiErrorBoundary>
+      <ApplicationUsageTrackingProvider>
+        <KibanaThemeProvider theme$={theme$}>
+          <KibanaContextProvider
+            services={{
+              ...core,
+              ...plugins,
+              storage: new Storage(localStorage),
+              isDev,
+              kibanaVersion,
             }}
           >
-            <Router history={history}>
-              <EuiThemeProvider darkMode={isDarkMode}>
-                <i18nCore.Context>
-                  <RedirectAppLinks application={core.application} className={APP_WRAPPER_CLASS}>
-                    <QueryClientProvider client={queryClient}>
-                      <HasDataContextProvider>
-                        <App />
-                      </HasDataContextProvider>
-                      <ReactQueryDevtools />
-                    </QueryClientProvider>
-                  </RedirectAppLinks>
-                </i18nCore.Context>
-              </EuiThemeProvider>
-            </Router>
-          </PluginContext.Provider>
-        </KibanaContextProvider>
-      </KibanaThemeProvider>
-    </ApplicationUsageTrackingProvider>,
+            <PluginContext.Provider
+              value={{
+                config,
+                appMountParameters,
+                observabilityRuleTypeRegistry,
+                ObservabilityPageTemplate,
+              }}
+            >
+              <Router history={history}>
+                <EuiThemeProvider darkMode={isDarkMode}>
+                  <i18nCore.Context>
+                    <RedirectAppLinks application={core.application} className={APP_WRAPPER_CLASS}>
+                      <QueryClientProvider client={queryClient}>
+                        <HasDataContextProvider>
+                          <App />
+                        </HasDataContextProvider>
+                        <ReactQueryDevtools />
+                      </QueryClientProvider>
+                    </RedirectAppLinks>
+                  </i18nCore.Context>
+                </EuiThemeProvider>
+              </Router>
+            </PluginContext.Provider>
+          </KibanaContextProvider>
+        </KibanaThemeProvider>
+      </ApplicationUsageTrackingProvider>
+    </EuiErrorBoundary>,
     element
   );
   return () => {
diff --git a/x-pack/plugins/observability/public/components/shared/page_template/page_template.tsx b/x-pack/plugins/observability/public/components/shared/page_template/page_template.tsx
index cafe693b8832..aa6f99d862a4 100644
--- a/x-pack/plugins/observability/public/components/shared/page_template/page_template.tsx
+++ b/x-pack/plugins/observability/public/components/shared/page_template/page_template.tsx
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { EuiSideNavItemType, EuiPageSectionProps } from '@elastic/eui';
+import { EuiSideNavItemType, EuiPageSectionProps, EuiErrorBoundary } from '@elastic/eui';
 import { _EuiPageBottomBarProps } from '@elastic/eui/src/components/page_template/bottom_bar/page_bottom_bar';
 import { i18n } from '@kbn/i18n';
 import React, { useMemo } from 'react';
@@ -178,13 +178,15 @@ export function ObservabilityPageTemplate({
                   : undefined
               }
             >
-              <KibanaPageTemplate.Section
-                component="div"
-                alignment={pageTemplateProps.isEmptyState ? 'center' : 'top'}
-                {...pageSectionProps}
-              >
-                {children}
-              </KibanaPageTemplate.Section>
+              <EuiErrorBoundary>
+                <KibanaPageTemplate.Section
+                  component="div"
+                  alignment={pageTemplateProps.isEmptyState ? 'center' : 'top'}
+                  {...pageSectionProps}
+                >
+                  {children}
+                </KibanaPageTemplate.Section>
+              </EuiErrorBoundary>
               {bottomBar && (
                 <KibanaPageTemplate.BottomBar {...bottomBarProps}>
                   {bottomBar}