[Logs + Metrics UI] Prevent component errors from breaking the whole UI (#65456)

x-pack/plugins/infra/public/pages/logs/log_entry_categories/page.tsx

@@ -4,18 +4,20 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import { EuiErrorBoundary } from '@elastic/eui';
 import React from 'react';
-
 import { ColumnarPage } from '../../../components/page';
 import { LogEntryCategoriesPageContent } from './page_content';
 import { LogEntryCategoriesPageProviders } from './page_providers';
 
 export const LogEntryCategoriesPage = () => {
   return (
+    <EuiErrorBoundary>
       <LogEntryCategoriesPageProviders>
         <ColumnarPage data-test-subj="logsLogEntryCategoriesPage">
           <LogEntryCategoriesPageContent />
         </ColumnarPage>
       </LogEntryCategoriesPageProviders>
+    </EuiErrorBoundary>
   );
 };

x-pack/plugins/infra/public/pages/logs/log_entry_rate/page.tsx

@@ -4,18 +4,20 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import { EuiErrorBoundary } from '@elastic/eui';
 import React from 'react';
-
 import { ColumnarPage } from '../../../components/page';
 import { LogEntryRatePageContent } from './page_content';
 import { LogEntryRatePageProviders } from './page_providers';
 
 export const LogEntryRatePage = () => {
   return (
+    <EuiErrorBoundary>
       <LogEntryRatePageProviders>
         <ColumnarPage data-test-subj="logsLogEntryRatePage">
           <LogEntryRatePageContent />
         </ColumnarPage>
       </LogEntryRatePageProviders>
+    </EuiErrorBoundary>
   );
 };

x-pack/plugins/infra/public/pages/logs/page.tsx

@@ -4,16 +4,18 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import { EuiErrorBoundary } from '@elastic/eui';
 import React from 'react';
 import { RouteComponentProps } from 'react-router-dom';
-
 import { LogsPageContent } from './page_content';
 import { LogsPageProviders } from './page_providers';
 
-export const LogsPage: React.FunctionComponent<RouteComponentProps> = ({ match }) => {
+export const LogsPage: React.FunctionComponent<RouteComponentProps> = () => {
   return (
+    <EuiErrorBoundary>
       <LogsPageProviders>
         <LogsPageContent />
       </LogsPageProviders>
+    </EuiErrorBoundary>
   );
 };

x-pack/plugins/infra/public/pages/logs/settings/source_configuration_settings.tsx

@@ -7,6 +7,7 @@
 import {
   EuiButton,
   EuiCallOut,
+  EuiErrorBoundary,
   EuiFlexGroup,
   EuiFlexItem,
   EuiPanel,
@@ -74,7 +75,7 @@ export const LogsSettingsPage = () => {
   }
 
   return (
-    <>
+    <EuiErrorBoundary>
       <EuiPage>
         <EuiPageBody
           className="eui-displayBlock"
@@ -181,7 +182,7 @@ export const LogsSettingsPage = () => {
           </EuiFlexGroup>
         </EuiPageBody>
       </EuiPage>
-    </>
+    </EuiErrorBoundary>
   );
 };
 

x-pack/plugins/infra/public/pages/logs/stream/page.tsx

@@ -4,6 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import { EuiErrorBoundary } from '@elastic/eui';
 import React from 'react';
 import { useTrackPageview } from '../../../../../observability/public';
 import { ColumnarPage } from '../../../components/page';
@@ -15,11 +16,13 @@ export const StreamPage = () => {
   useTrackPageview({ app: 'infra_logs', path: 'stream' });
   useTrackPageview({ app: 'infra_logs', path: 'stream', delay: 15000 });
   return (
+    <EuiErrorBoundary>
       <LogsPageProviders>
         <ColumnarPage data-test-subj="infraLogsPage">
           <StreamPageHeader />
           <StreamPageContent />
         </ColumnarPage>
       </LogsPageProviders>
+    </EuiErrorBoundary>
   );
 };

x-pack/plugins/infra/public/pages/metrics/index.tsx

@@ -9,7 +9,7 @@ import { i18n } from '@kbn/i18n';
 import React from 'react';
 import { Route, RouteComponentProps, Switch } from 'react-router-dom';
 
-import { EuiFlexItem, EuiFlexGroup } from '@elastic/eui';
+import { EuiErrorBoundary, EuiFlexItem, EuiFlexGroup } from '@elastic/eui';
 import { DocumentTitle } from '../../components/document_title';
 import { HelpCenterContent } from '../../components/help_center_content';
 import { RoutedTabs } from '../../components/navigation/routed_tabs';
@@ -36,6 +36,7 @@ export const InfrastructurePage = ({ match }: RouteComponentProps) => {
   const uiCapabilities = useKibana().services.application?.capabilities;
 
   return (
+    <EuiErrorBoundary>
       <Source.Provider sourceId="default">
         <WaffleOptionsProvider>
           <WaffleTimeProvider>
@@ -134,5 +135,6 @@ export const InfrastructurePage = ({ match }: RouteComponentProps) => {
           </WaffleTimeProvider>
         </WaffleOptionsProvider>
       </Source.Provider>
+    </EuiErrorBoundary>
   );
 };

x-pack/plugins/infra/public/pages/metrics/inventory_view/index.tsx

@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { EuiButton, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import { EuiButton, EuiErrorBoundary, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import React, { useContext } from 'react';
 
@@ -41,6 +41,7 @@ export const SnapshotPage = () => {
   });
 
   return (
+    <EuiErrorBoundary>
       <ColumnarPage>
         <DocumentTitle
           title={(previousTitle: string) =>
@@ -78,9 +79,12 @@ export const SnapshotPage = () => {
                     fill
                     data-test-subj="infrastructureViewSetupInstructionsButton"
                   >
-                  {i18n.translate('xpack.infra.homePage.noMetricsIndicesInstructionsActionLabel', {
+                    {i18n.translate(
+                      'xpack.infra.homePage.noMetricsIndicesInstructionsActionLabel',
+                      {
                         defaultMessage: 'View setup instructions',
-                  })}
+                      }
+                    )}
                   </EuiButton>
                 </EuiFlexItem>
                 {uiCapabilities?.infrastructure?.configureSource ? (
@@ -101,5 +105,6 @@ export const SnapshotPage = () => {
           />
         )}
       </ColumnarPage>
+    </EuiErrorBoundary>
   );
 };

x-pack/plugins/infra/public/pages/metrics/metric_detail/page_providers.tsx

@@ -4,17 +4,19 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import { EuiErrorBoundary } from '@elastic/eui';
 import React from 'react';
-
 import { Source } from '../../../containers/source';
 import { MetricsTimeProvider } from './hooks/use_metrics_time';
 
 export const withMetricPageProviders = <T extends object>(Component: React.ComponentType<T>) => (
   props: T
 ) => (
+  <EuiErrorBoundary>
     <Source.Provider sourceId="default">
       <MetricsTimeProvider>
         <Component {...props} />
       </MetricsTimeProvider>
     </Source.Provider>
+  </EuiErrorBoundary>
 );

x-pack/plugins/infra/public/pages/metrics/metrics_explorer/index.tsx

@@ -4,17 +4,17 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import { EuiErrorBoundary } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
-
 import React from 'react';
 import { IIndexPattern } from 'src/plugins/data/public';
+import { useTrackPageview } from '../../../../../observability/public';
+import { SourceQuery } from '../../../../common/graphql/types';
 import { DocumentTitle } from '../../../components/document_title';
+import { NoData } from '../../../components/empty_states';
 import { MetricsExplorerCharts } from './components/charts';
 import { MetricsExplorerToolbar } from './components/toolbar';
-import { SourceQuery } from '../../../../common/graphql/types';
-import { NoData } from '../../../components/empty_states';
 import { useMetricsExplorerState } from './hooks/use_metric_explorer_state';
-import { useTrackPageview } from '../../../../../observability/public';
 
 interface MetricsExplorerPageProps {
   source: SourceQuery.Query['source']['configuration'];
@@ -45,7 +45,7 @@ export const MetricsExplorerPage = ({ source, derivedIndexPattern }: MetricsExpl
   useTrackPageview({ app: 'infra_metrics', path: 'metrics_explorer', delay: 15000 });
 
   return (
-    <React.Fragment>
+    <EuiErrorBoundary>
       <DocumentTitle
         title={(previousTitle: string) =>
           i18n.translate('xpack.infra.infrastructureMetricsExplorerPage.documentTitle', {
@@ -95,6 +95,6 @@ export const MetricsExplorerPage = ({ source, derivedIndexPattern }: MetricsExpl
           onTimeChange={handleTimeChange}
         />
       )}
-    </React.Fragment>
+    </EuiErrorBoundary>
   );
 };

x-pack/plugins/infra/public/pages/metrics/settings.tsx

@@ -4,16 +4,19 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import { EuiErrorBoundary } from '@elastic/eui';
 import React from 'react';
-import { SourceConfigurationSettings } from '../../components/source_configuration/source_configuration_settings';
 import { useKibana } from '../../../../../../src/plugins/kibana_react/public';
+import { SourceConfigurationSettings } from '../../components/source_configuration/source_configuration_settings';
 
 export const MetricsSettingsPage = () => {
   const uiCapabilities = useKibana().services.application?.capabilities;
   return (
+    <EuiErrorBoundary>
       <SourceConfigurationSettings
         shouldAllowEdit={uiCapabilities?.infrastructure?.configureSource as boolean}
         displaySettings="metrics"
       />
+    </EuiErrorBoundary>
   );
 };