added error boundary for chunk load errors (opendatahub-io#6310)

rsun19 · web-flow · commit b654a5fc425f · 2026-02-26T20:24:02.000Z
* added error boundary for chunk load errors

* addressed comments

* added code coverage
diff --git a/frontend/src/bootstrap.tsx b/frontend/src/bootstrap.tsx
@@ -8,6 +8,7 @@ import { ThemeProvider } from './app/ThemeContext';
 import SDKInitialize from './SDKInitialize';
 import { BrowserStorageContextProvider } from './components/browserStorage/BrowserStorageContext';
 import ErrorBoundary from './components/error/ErrorBoundary';
+import RouteErrorElement from './components/error/RouteErrorElement';
 import { ReduxContext } from './redux/context';
 
 // Creates a data router using createBrowserRouter
@@ -23,6 +24,7 @@ const router = createBrowserRouter([
         </BrowserStorageContextProvider>
       </SDKInitialize>
     ),
+    errorElement: <RouteErrorElement />,
   },
 ]);
 
diff --git a/frontend/src/components/error/ErrorBoundary.tsx b/frontend/src/components/error/ErrorBoundary.tsx
@@ -1,7 +1,6 @@
 import * as React from 'react';
-import { Button, Split, SplitItem, Title } from '@patternfly/react-core';
-import { TimesIcon } from '@patternfly/react-icons';
 import ErrorDetails from './ErrorDetails';
+import ErrorFallbackLayout from './ErrorFallbackLayout';
 import UpdateState from './UpdateState';
 
 type ErrorBoundaryProps = {
@@ -51,42 +50,14 @@ class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundarySta
       }
       return (
         <div className="pf-v6-u-p-lg" data-testid="error-boundary">
-          <Split>
-            <SplitItem isFilled>
-              <Title headingLevel="h1" className="pf-v6-u-mb-sm">
-                An error occurred
-              </Title>
-              <p className="pf-v6-u-mb-md">
-                Try{' '}
-                <Button
-                  data-testid="reload-link"
-                  variant="link"
-                  isInline
-                  onClick={() => window.location.reload()}
-                >
-                  reloading
-                </Button>{' '}
-                the page if there was a recent update.
-              </p>
-            </SplitItem>
-            <SplitItem>
-              <Button
-                icon={<TimesIcon />}
-                data-testid="close-error-button"
-                variant="plain"
-                aria-label="Close"
-                onClick={() => {
-                  this.setState({ hasError: false });
-                }}
-              />
-            </SplitItem>
-          </Split>
-          <ErrorDetails
-            title={error.name}
-            errorMessage={error.message}
-            componentStack={errorInfo.componentStack || ''}
-            stack={error.stack}
-          />
+          <ErrorFallbackLayout onClose={() => this.setState({ hasError: false })}>
+            <ErrorDetails
+              title={error.name}
+              errorMessage={error.message}
+              componentStack={errorInfo.componentStack || ''}
+              stack={error.stack}
+            />
+          </ErrorFallbackLayout>
         </div>
       );
     }
diff --git a/frontend/src/components/error/ErrorDetails.tsx b/frontend/src/components/error/ErrorDetails.tsx
@@ -12,7 +12,7 @@ import {
 type ErrorDetailsProps = {
   title: string;
   errorMessage?: string;
-  componentStack: string;
+  componentStack?: string;
   stack?: string;
 };
 
@@ -34,20 +34,22 @@ const ErrorDetails: React.FC<ErrorDetailsProps> = ({
         </DescriptionListGroup>
       ) : null}
 
-      <DescriptionListGroup>
-        <DescriptionListTerm>Component trace:</DescriptionListTerm>
-        <DescriptionListDescription>
-          <ClipboardCopy
-            isExpanded
-            isCode
-            hoverTip="Copy"
-            clickTip="Copied"
-            variant={ClipboardCopyVariant.expansion}
-          >
-            {componentStack.trim()}
-          </ClipboardCopy>
-        </DescriptionListDescription>
-      </DescriptionListGroup>
+      {componentStack ? (
+        <DescriptionListGroup>
+          <DescriptionListTerm>Component trace:</DescriptionListTerm>
+          <DescriptionListDescription>
+            <ClipboardCopy
+              isExpanded
+              isCode
+              hoverTip="Copy"
+              clickTip="Copied"
+              variant={ClipboardCopyVariant.expansion}
+            >
+              {componentStack.trim()}
+            </ClipboardCopy>
+          </DescriptionListDescription>
+        </DescriptionListGroup>
+      ) : null}
 
       {stack ? (
         <DescriptionListGroup>
diff --git a/frontend/src/components/error/ErrorFallbackLayout.tsx b/frontend/src/components/error/ErrorFallbackLayout.tsx
@@ -0,0 +1,53 @@
+import * as React from 'react';
+import { Button, Split, SplitItem, Title } from '@patternfly/react-core';
+import { TimesIcon } from '@patternfly/react-icons';
+
+type ErrorFallbackLayoutProps = {
+  onClose?: () => void;
+  reloadButtonTestId?: string;
+  closeButtonTestId?: string;
+  children?: React.ReactNode;
+};
+
+const ErrorFallbackLayout: React.FC<ErrorFallbackLayoutProps> = ({
+  onClose,
+  reloadButtonTestId = 'reload-link',
+  closeButtonTestId = 'close-error-button',
+  children,
+}) => (
+  <>
+    <Split>
+      <SplitItem isFilled>
+        <Title headingLevel="h1" className="pf-v6-u-mb-sm">
+          An error occurred
+        </Title>
+        <p className="pf-v6-u-mb-md">
+          Try{' '}
+          <Button
+            data-testid={reloadButtonTestId}
+            variant="link"
+            isInline
+            onClick={() => window.location.reload()}
+          >
+            reloading
+          </Button>{' '}
+          the page if there was a recent update.
+        </p>
+      </SplitItem>
+      {onClose ? (
+        <SplitItem>
+          <Button
+            icon={<TimesIcon />}
+            data-testid={closeButtonTestId}
+            variant="plain"
+            aria-label="Close"
+            onClick={onClose}
+          />
+        </SplitItem>
+      ) : null}
+    </Split>
+    {children}
+  </>
+);
+
+export default ErrorFallbackLayout;
diff --git a/frontend/src/components/error/RouteErrorElement.tsx b/frontend/src/components/error/RouteErrorElement.tsx
@@ -0,0 +1,35 @@
+import * as React from 'react';
+import { PageSection } from '@patternfly/react-core';
+import { useRouteError } from 'react-router-dom';
+import ErrorDetails from './ErrorDetails';
+import ErrorFallbackLayout from './ErrorFallbackLayout';
+import { getRouteErrorDetails, isChunkLoadError } from './routeErrorUtils';
+import UpdateState from './UpdateState';
+
+const RouteErrorElement: React.FC = () => {
+  const error = useRouteError();
+  const [showErrorDetails, setShowErrorDetails] = React.useState(false);
+  const { title, errorMessage, stack } = getRouteErrorDetails(error);
+
+  React.useEffect(() => {
+    setShowErrorDetails(false);
+  }, [error]);
+
+  if (isChunkLoadError(error) && !showErrorDetails) {
+    return <UpdateState onClose={() => setShowErrorDetails(true)} />;
+  }
+
+  return (
+    <PageSection
+      hasBodyWrapper={false}
+      className="pf-v6-u-p-lg"
+      data-testid="router-error-boundary"
+    >
+      <ErrorFallbackLayout reloadButtonTestId="router-reload-link">
+        <ErrorDetails title={title} errorMessage={errorMessage} stack={stack} />
+      </ErrorFallbackLayout>
+    </PageSection>
+  );
+};
+
+export default RouteErrorElement;
diff --git a/frontend/src/components/error/__tests__/ErrorDetails.spec.tsx b/frontend/src/components/error/__tests__/ErrorDetails.spec.tsx
@@ -0,0 +1,32 @@
+import * as React from 'react';
+import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/react';
+import ErrorDetails from '#~/components/error/ErrorDetails';
+
+describe('ErrorDetails', () => {
+  it('should render description, component trace, and stack trace', () => {
+    render(
+      <ErrorDetails
+        title="ChunkLoadError"
+        errorMessage="Loading chunk 145 failed"
+        componentStack={'\n at App\n at NavSidebar'}
+        stack={'ChunkLoadError: Loading chunk 145 failed\n at __webpack_require__'}
+      />,
+    );
+
+    expect(screen.getByText('ChunkLoadError')).toBeInTheDocument();
+    expect(screen.getByText('Description:')).toBeInTheDocument();
+    expect(screen.getByText('Loading chunk 145 failed')).toBeInTheDocument();
+    expect(screen.getByText('Component trace:')).toBeInTheDocument();
+    expect(screen.getByDisplayValue(/at App\s+at NavSidebar/)).toBeInTheDocument();
+    expect(screen.getByText('Stack trace:')).toBeInTheDocument();
+  });
+
+  it('should omit component trace when componentStack is not provided', () => {
+    render(<ErrorDetails title="Route error" errorMessage="Unknown route error" />);
+
+    expect(screen.getByText('Route error')).toBeInTheDocument();
+    expect(screen.getByText('Unknown route error')).toBeInTheDocument();
+    expect(screen.queryByText('Component trace:')).not.toBeInTheDocument();
+  });
+});
diff --git a/frontend/src/components/error/__tests__/ErrorFallbackLayout.spec.tsx b/frontend/src/components/error/__tests__/ErrorFallbackLayout.spec.tsx
@@ -0,0 +1,43 @@
+import * as React from 'react';
+import { act } from 'react';
+import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/react';
+import ErrorFallbackLayout from '#~/components/error/ErrorFallbackLayout';
+
+describe('ErrorFallbackLayout', () => {
+  it('should reload the page when reload link is clicked', () => {
+    Object.defineProperty(window, 'location', {
+      configurable: true,
+      value: { reload: jest.fn() },
+    });
+
+    render(<ErrorFallbackLayout />);
+
+    const reloadButton = screen.getByTestId('reload-link');
+    act(() => reloadButton.click());
+
+    expect(window.location.reload).toHaveBeenCalled();
+  });
+
+  it('should render and handle close button when onClose is provided', () => {
+    const onClose = jest.fn();
+
+    render(
+      <ErrorFallbackLayout onClose={onClose}>
+        <div>details</div>
+      </ErrorFallbackLayout>,
+    );
+
+    expect(screen.getByText('details')).toBeInTheDocument();
+    const closeButton = screen.getByTestId('close-error-button');
+    act(() => closeButton.click());
+
+    expect(onClose).toHaveBeenCalledTimes(1);
+  });
+
+  it('should not render close button when onClose is not provided', () => {
+    render(<ErrorFallbackLayout />);
+
+    expect(screen.queryByTestId('close-error-button')).not.toBeInTheDocument();
+  });
+});
diff --git a/frontend/src/components/error/__tests__/RouteErrorElement.spec.tsx b/frontend/src/components/error/__tests__/RouteErrorElement.spec.tsx
@@ -0,0 +1,76 @@
+import * as React from 'react';
+import { act } from 'react';
+import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/react';
+import { useRouteError } from 'react-router-dom';
+import RouteErrorElement from '#~/components/error/RouteErrorElement';
+
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useRouteError: jest.fn(),
+}));
+
+const useRouteErrorMock = jest.mocked(useRouteError);
+
+describe('RouteErrorElement', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    Object.defineProperty(window, 'location', {
+      configurable: true,
+      value: { reload: jest.fn() },
+    });
+  });
+
+  it('should render update state for ChunkLoadError and show details when requested', async () => {
+    const error = new Error('Loading chunk 145 failed');
+    error.name = 'ChunkLoadError';
+    useRouteErrorMock.mockReturnValue(error);
+
+    render(<RouteErrorElement />);
+
+    expect(screen.getByTestId('error-update-state')).toBeInTheDocument();
+    expect(screen.queryByTestId('router-error-boundary')).not.toBeInTheDocument();
+
+    const showErrorButton = screen.getByTestId('show-error-button');
+    act(() => showErrorButton.click());
+
+    expect(screen.queryByTestId('error-update-state')).not.toBeInTheDocument();
+    expect(screen.getByTestId('router-error-boundary')).toBeInTheDocument();
+    expect(screen.getByText('ChunkLoadError')).toBeInTheDocument();
+    expect(screen.getByText('Loading chunk 145 failed')).toBeInTheDocument();
+  });
+
+  it('should reset to update state when route error changes', () => {
+    let currentError: unknown = Object.assign(new Error('Loading chunk 145 failed'), {
+      name: 'ChunkLoadError',
+    });
+    useRouteErrorMock.mockImplementation(() => currentError);
+
+    const { rerender } = render(<RouteErrorElement />);
+    expect(screen.getByTestId('error-update-state')).toBeInTheDocument();
+
+    act(() => {
+      screen.getByTestId('show-error-button').click();
+    });
+    expect(screen.getByTestId('router-error-boundary')).toBeInTheDocument();
+
+    currentError = Object.assign(new Error('Loading chunk src_images_icons_Settings failed'), {
+      name: 'ChunkLoadError',
+    });
+    rerender(<RouteErrorElement />);
+
+    expect(screen.getByTestId('error-update-state')).toBeInTheDocument();
+    expect(screen.queryByTestId('router-error-boundary')).not.toBeInTheDocument();
+  });
+
+  it('should render route error fallback for non-chunk errors', () => {
+    useRouteErrorMock.mockReturnValue(new Error('regular route error'));
+
+    render(<RouteErrorElement />);
+
+    expect(screen.queryByTestId('error-update-state')).not.toBeInTheDocument();
+    expect(screen.getByTestId('router-error-boundary')).toBeInTheDocument();
+    expect(screen.getByText('Error')).toBeInTheDocument();
+    expect(screen.getByText('regular route error')).toBeInTheDocument();
+  });
+});
diff --git a/frontend/src/components/error/__tests__/routeErrorUtils.spec.ts b/frontend/src/components/error/__tests__/routeErrorUtils.spec.ts
diff --git a/frontend/src/components/error/routeErrorUtils.ts b/frontend/src/components/error/routeErrorUtils.ts
