[SideNav] Wrap SideNav in ErrorBoundary with retry (#239945)

## Summary

Sidenav is an important but complex component. It is also part of the
core React tree. An error there might break the whole app.

Here is an example of such a sneaky bug
#238460

To fix this, I suggest we wrap the component in an error boundary.
Instead of showing an error, we will reset the component's state and
start over. when maxRetry hits, we show the error.

Author: Dosant

src/core/packages/chrome/browser-internal/src/ui/project/sidenav/navigation/navigation.tsx

@@ -22,6 +22,7 @@ import type { IBasePath as BasePath } from '@kbn/core-http-browser';
 import type { ApplicationStart } from '@kbn/core-application-browser';
 import type { NavigationTourManager } from '@kbn/core-chrome-navigation-tour';
 import { NavigationTour } from '@kbn/core-chrome-navigation-tour';
+import { KibanaSectionErrorBoundary } from '@kbn/shared-ux-error-boundary';
 import useObservable from 'react-use/lib/useObservable';
 import type { NavigationItems } from './to_navigation_items';
 import { toNavigationItems } from './to_navigation_items';
@@ -67,7 +68,7 @@ export const Navigation = (props: ChromeNavigationProps) => {
   const { navItems, logoItem, activeItemId, solutionId } = state;
 
   return (
-    <>
+    <KibanaSectionErrorBoundary sectionName={'Navigation'} maxRetries={3}>
       <NavigationTour
         tourManager={props.navigationTourManager}
         key={
@@ -89,7 +90,7 @@ export const Navigation = (props: ChromeNavigationProps) => {
         activeItemId={activeItemId}
         data-test-subj={classnames(dataTestSubj, 'projectSideNav', 'projectSideNavV2')}
       />
-    </>
+    </KibanaSectionErrorBoundary>
   );
 };
 

src/core/packages/chrome/browser-internal/tsconfig.json

@@ -69,6 +69,7 @@
     "@kbn/core-feature-flags-browser-mocks",
     "@kbn/shared-ux-feedback-snippet",
     "@kbn/core-chrome-navigation-tour",
+    "@kbn/shared-ux-error-boundary",
   ],
   "exclude": [
     "target/**/*",

src/platform/packages/shared/react/kibana_context/root/root_provider.tsx

@@ -14,6 +14,7 @@ import type { AnalyticsServiceStart } from '@kbn/core-analytics-browser';
 import type { I18nStart } from '@kbn/core-i18n-browser';
 import type { ExecutionContextStart } from '@kbn/core-execution-context-browser';
 import { SharedUXRouterContext } from '@kbn/shared-ux-router';
+import { KibanaErrorBoundaryProvider } from '@kbn/shared-ux-error-boundary';
 
 // @ts-expect-error EUI exports this component internally, but Kibana isn't picking it up its types
 import { useIsNestedEuiProvider } from '@elastic/eui/lib/components/provider/nested';
@@ -54,9 +55,11 @@ export const KibanaRootContextProvider: FC<PropsWithChildren<KibanaRootContextPr
 }) => {
   const hasEuiProvider = useIsNestedEuiProvider();
   const rootContextProvider = (
-    <SharedUXRouterContext.Provider value={{ services: { executionContext } }}>
-      <i18n.Context>{children}</i18n.Context>
-    </SharedUXRouterContext.Provider>
+    <KibanaErrorBoundaryProvider analytics={props.analytics}>
+      <SharedUXRouterContext.Provider value={{ services: { executionContext } }}>
+        <i18n.Context>{children}</i18n.Context>
+      </SharedUXRouterContext.Provider>
+    </KibanaErrorBoundaryProvider>
   );
 
   if (hasEuiProvider) {

src/platform/packages/shared/react/kibana_context/root/tsconfig.json

@@ -26,6 +26,7 @@
     "@kbn/core-execution-context-browser",
     "@kbn/core-execution-context-browser-mocks",
     "@kbn/shared-ux-router",
-    "@kbn/core-chrome-layout-constants"
+    "@kbn/core-chrome-layout-constants",
+    "@kbn/shared-ux-error-boundary"
   ]
 }

src/platform/packages/shared/shared-ux/error_boundary/README.mdx

@@ -9,15 +9,61 @@ date: 2023-10-03
 
 ## Description
 
-This package exports `KibanaErrorBoundary` and `KibanaSectionErrorBoundary` components.
+This package exports error boundary components to handle rendering errors gracefully:
 
-- `KibanaErrorBoundary` is designed to capture rendering errors by blocking the main part of the UI.
-- `KibanaSectionErrorBoundary` is designed to capture errors at a more granular level.
+- `KibanaErrorBoundary` - Captures rendering errors at the page level and blocks the main UI
+- `KibanaSectionErrorBoundary` - Captures errors at a granular section level with optional automatic retry capability
 
 In general, it's best to use `KibanaErrorBoundary` and block the whole page. If it is acceptable to assume the risk of allowing users to interact with a UI that has an error state, then using `KibanaSectionErrorBoundary` may be an acceptable alternative, but this must be judged on a case-by-case basis.
 
 ## API
 
+### KibanaErrorBoundary
+
+Page-level error boundary that captures rendering errors and blocks the main UI until refresh.
+
+```tsx
+<KibanaErrorBoundary>
+  <YourApp />
+</KibanaErrorBoundary>
+```
+
+**Props:**
+
+- `children` (ReactNode, required) - Child components to render and protect
+
+### KibanaSectionErrorBoundary
+
+Section-level error boundary that captures errors without blocking the entire page. Supports optional automatic retry with fresh component state.
+
+```tsx
+// Without retries (default)
+<KibanaSectionErrorBoundary sectionName="Dashboard Panel">
+  <YourComponent />
+</KibanaSectionErrorBoundary>
+
+// With automatic retry attempts
+<KibanaSectionErrorBoundary sectionName="Dashboard Panel" maxRetries={3}>
+  <YourComponent />
+</KibanaSectionErrorBoundary>
+```
+
+**Props:**
+
+- `sectionName` (string, required) - Name of the section for error messaging
+- `maxRetries` (number, optional, default: 0) - Number of times to automatically remount children when an error occurs. When > 0, the section will attempt to recover by remounting with fresh state before showing the error prompt.
+- `children` (ReactNode, required) - Child components to render and protect
+
+**Retry Behavior:**
+When `maxRetries > 0`, if an error is caught, the component will:
+
+1. Automatically remount children with a fresh Fragment key (forcing fresh component state)
+2. Increment retry counter
+3. If another error occurs and retries are exhausted, show the error prompt
+4. If no error occurs during retry, render normally
+
+This is useful for components that may have transient errors that resolve with fresh state, or where component state corruption could be recovered by remounting.
+
 ## EUI Promotion Status
 
 This component is specialized for error messages internal to Kibana and is not intended for promotion to EUI.

src/platform/packages/shared/shared-ux/error_boundary/src/ui/error_boundary.recoverable.stories.tsx

@@ -64,6 +64,11 @@ export const SectionErrorInCallout: StoryFn = () => {
             <ChunkLoadErrorComponent />
           </KibanaSectionErrorBoundary>
         </EuiFormFieldset>
+        <EuiFormFieldset legend={{ children: 'Section C with 3 retries' }}>
+          <KibanaSectionErrorBoundary sectionName="sectionC" maxRetries={3}>
+            <ChunkLoadErrorComponent />
+          </KibanaSectionErrorBoundary>
+        </EuiFormFieldset>
       </KibanaErrorBoundaryDepsProvider>
     </Template>
   );

src/platform/packages/shared/shared-ux/error_boundary/src/ui/section_error_boundary.test.tsx

@@ -45,10 +45,13 @@ describe('<KibanaSectionErrorBoundary>', () => {
     jest.useRealTimers();
   });
 
-  const Template: FC<PropsWithChildren<unknown>> = ({ children }) => {
+  const Template: FC<PropsWithChildren<{ maxRetries?: number }>> = ({
+    children,
+    maxRetries = 0,
+  }) => {
     return (
       <KibanaErrorBoundaryDepsProvider {...services}>
-        <KibanaSectionErrorBoundary sectionName="test section name">
+        <KibanaSectionErrorBoundary sectionName="test section name" maxRetries={maxRetries}>
           {children}
         </KibanaSectionErrorBoundary>
       </KibanaErrorBoundaryDepsProvider>
@@ -217,4 +220,39 @@ describe('<KibanaSectionErrorBoundary>', () => {
     expect(payload.component_name).toBe('BadComponent');
     expect(payload.error_message).toBe('Error: This is an error to show the test user!');
   });
+
+  describe('maxRetries behavior', () => {
+    it('defaults to maxRetries=0 and shows error immediately', async () => {
+      const { getByTestId, getByText } = render(
+        <Template>
+          <BadComponent />
+        </Template>
+      );
+      await user.click(getByTestId('clickForErrorBtn'));
+
+      // Error prompt should be visible immediately with no retries
+      expect(getByText(strings.section.callout.fatal.title('test section name'))).toBeVisible();
+    });
+
+    it('shows error prompt after maxRetries exhausted', async () => {
+      const { getByTestId, getByText, queryByText } = render(
+        <Template maxRetries={1}>
+          <BadComponent />
+        </Template>
+      );
+
+      // Trigger first error (will retry)
+      await user.click(getByTestId('clickForErrorBtn'));
+
+      // Error prompt should NOT be visible yet (it's retrying)
+      expect(queryByText(strings.section.callout.fatal.title('test section name'))).toBeNull();
+
+      // Trigger error again (second error, exceeds maxRetries)
+      // Since we're in a retried state, clicking the button again triggers another error
+      await user.click(getByTestId('clickForErrorBtn'));
+
+      // Now error prompt should be visible (retries exhausted)
+      expect(getByText(strings.section.callout.fatal.title('test section name'))).toBeVisible();
+    });
+  });
 });

src/platform/packages/shared/shared-ux/error_boundary/src/ui/section_error_boundary.tsx

@@ -7,7 +7,7 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import React from 'react';
+import React, { Fragment } from 'react';
 import { apm } from '@elastic/apm-rum';
 
 import { getErrorBoundaryLabels } from '../../lib';
@@ -21,6 +21,13 @@ import {
 
 interface SectionErrorBoundaryProps {
   sectionName: string;
+  /** How many times to retry remounting before showing error (default: 0, no retries) */
+  maxRetries?: number;
+}
+
+interface SectionErrorBoundaryState extends BaseErrorBoundaryState {
+  /** How many times we've retried */
+  retryCount?: number;
 }
 
 /**
@@ -34,6 +41,13 @@ interface SectionErrorBoundaryProps {
  * If it is acceptable to assume the risk of allowing users to interact with a UI that
  * has an error state, then using `KibanaSectionErrorBoundary` may be an acceptable alternative,
  * but this must be judged on a case-by-case basis.
+ *
+ * @example
+ * ```tsx
+ * <KibanaSectionErrorBoundary sectionName="Dashboard" maxRetries={3}>
+ *   <MySection />
+ * </KibanaSectionErrorBoundary>
+ * ```
  */
 export const KibanaSectionErrorBoundary = (
   props: React.PropsWithChildren<SectionErrorBoundaryProps>
@@ -44,7 +58,7 @@ export const KibanaSectionErrorBoundary = (
 
 class SectionErrorBoundaryInternal extends BaseErrorBoundary<
   React.PropsWithChildren<SectionErrorBoundaryProps> & BaseErrorBoundaryProps,
-  BaseErrorBoundaryState
+  SectionErrorBoundaryState
 > {
   constructor(props: SectionErrorBoundaryProps & BaseErrorBoundaryProps) {
     super(props);
@@ -54,6 +68,7 @@ class SectionErrorBoundaryInternal extends BaseErrorBoundary<
       errorInfo: null,
       componentName: null,
       isFatal: null,
+      retryCount: 0,
     };
   }
 
@@ -68,21 +83,36 @@ class SectionErrorBoundaryInternal extends BaseErrorBoundary<
     const enqueuedError = this.props.services.errorService.enqueueError(error, errorInfo);
     const { id: errorId, isFatal, name } = enqueuedError;
 
-    this.setState({
-      error,
-      errorInfo,
-      componentName: name,
-      isFatal,
-      errorId,
+    this.setState((prevState) => {
+      const nextRetryCount = (prevState.retryCount ?? 0) + 1;
+
+      return {
+        error,
+        errorInfo,
+        componentName: name,
+        isFatal,
+        errorId,
+        retryCount: nextRetryCount,
+      };
     });
   }
 
   render() {
-    if (!this.state.error) {
+    const { error, retryCount = 0 } = this.state;
+    const { maxRetries = 0 } = this.props;
+    const hasRetriesRemaining = retryCount <= maxRetries && error !== null;
+
+    // If there are retries remaining, remount children with fresh state
+    if (hasRetriesRemaining) {
+      return <Fragment key={retryCount}>{this.props.children}</Fragment>;
+    }
+
+    // Once retries are exhausted or no error, show normal children or error prompt
+    if (!error) {
       return this.props.children;
     }
 
-    const { error, errorInfo, componentName, isFatal } = this.state;
+    const { errorInfo, componentName, isFatal } = this.state;
 
     if (isFatal) {
       return (