fix: handle chunk loading failures with retry logic and error boundary

Signed-off-by: Nancy <9d.24.nancy.sangani@gmail.com>

Author: nancysangani

ui/src/app.tsx

@@ -6,6 +6,7 @@ import * as React from 'react';
 
 import 'argo-ui/src/styles/main.scss';
 
+import {ChunkLoadErrorBoundary} from './app/chunk-load-error-boundary';
 import {AppRouter} from './app-router';
 import {ContextApis, Provider} from './shared/context';
 
@@ -22,8 +23,10 @@ export function App({history}: {history: History}) {
     };
 
     return (
-        <Provider value={providerContext}>
-            <AppRouter history={history} notificationsManager={notificationsManager} popupManager={popupManager} />
-        </Provider>
+        <ChunkLoadErrorBoundary>
+            <Provider value={providerContext}>
+                <AppRouter history={history} notificationsManager={notificationsManager} popupManager={popupManager} />
+            </Provider>
+        </ChunkLoadErrorBoundary>
     );
 }

ui/src/app/chunk-load-error-boundary.test.tsx

@@ -0,0 +1,69 @@
+import {render, screen} from '@testing-library/react';
+import * as React from 'react';
+
+import {ChunkLoadErrorBoundary} from './chunk-load-error-boundary';
+
+// Suppress React's console.error for expected thrown errors in tests.
+beforeEach(() => jest.spyOn(console, 'error').mockImplementation(() => {}));
+afterEach(() => jest.restoreAllMocks());
+
+function Bomb({error}: {error: Error}) {
+    throw error;
+    return null; // unreachable; satisfies TS
+}
+
+describe('ChunkLoadErrorBoundary', () => {
+    const reloadSpy = jest.fn();
+
+    beforeEach(() => {
+        Object.defineProperty(window, 'location', {
+            writable: true,
+            value: {reload: reloadSpy}
+        });
+        reloadSpy.mockClear();
+    });
+
+    it('renders children when there is no error', () => {
+        render(
+            <ChunkLoadErrorBoundary>
+                <span>hello</span>
+            </ChunkLoadErrorBoundary>
+        );
+        expect(screen.getByText('hello')).toBeTruthy();
+    });
+
+    it('triggers window.location.reload on a ChunkLoadError', () => {
+        const chunkError = Object.assign(new Error('Loading chunk 775 failed.'), {name: 'ChunkLoadError'});
+        render(
+            <ChunkLoadErrorBoundary>
+                <Bomb error={chunkError} />
+            </ChunkLoadErrorBoundary>
+        );
+        expect(reloadSpy).toHaveBeenCalledTimes(1);
+        expect(screen.getByText(/Reloading/i)).toBeTruthy();
+    });
+
+    it('re-throws non-chunk errors for parent boundaries to handle', () => {
+        const genericError = new Error('Some other error');
+        expect(() =>
+            render(
+                <ChunkLoadErrorBoundary>
+                    <Bomb error={genericError} />
+                </ChunkLoadErrorBoundary>
+            )
+        ).toThrow('Some other error');
+        expect(reloadSpy).not.toHaveBeenCalled();
+    });
+});
+
+describe('ChunkLoadErrorBoundary.isChunkLoadError', () => {
+    it.each([
+        [Object.assign(new Error('Loading chunk 775 failed.'), {name: 'ChunkLoadError'}), true],
+        [new Error('Loading chunk 42 failed.'), true],
+        [new Error('Loading CSS chunk 3 failed.'), true],
+        [new Error('Something unrelated'), false],
+        [new Error('TypeError: Cannot read property'), false]
+    ])('correctly classifies %s as %s', (error, expected) => {
+        expect(ChunkLoadErrorBoundary.isChunkLoadError(error)).toBe(expected);
+    });
+});

ui/src/app/chunk-load-error-boundary.tsx

@@ -0,0 +1,57 @@
+import {ErrorInfo} from 'react';
+import * as React from 'react';
+
+interface State {
+    error?: Error & {response?: any};
+    errorInfo?: ErrorInfo;
+    isReloading: boolean;
+}
+
+/**
+ * Error boundary specifically for handling chunk loading failures.
+ * Automatically reloads the page when a chunk fails to load.
+ * Fixes: https://github.com/argoproj/argo-workflows/issues/15640
+ */
+export class ChunkLoadErrorBoundary extends React.Component<any, State> {
+    static isChunkLoadError(error: Error): boolean {
+        return (
+            error.message.includes('Loading chunk') ||
+            error.message.includes('Failed to fetch') ||
+            error.message.includes('Failed to import') ||
+            error.message.includes('NetworkError') ||
+            error.name === 'ChunkLoadError'
+        );
+    }
+
+    static getDerivedStateFromError(error: Error) {
+        // Only handle chunk load errors; re-throw others
+        if (ChunkLoadErrorBoundary.isChunkLoadError(error)) {
+            return {error, isReloading: true};
+        }
+        throw error;
+    }
+
+    constructor(props: any) {
+        super(props);
+        this.state = {isReloading: false};
+    }
+
+    componentDidCatch(error: Error, errorInfo: ErrorInfo) {
+        console.error('Chunk load error:', error, errorInfo);
+        // Auto-reload after a brief delay to allow state update
+        setTimeout(() => window.location.reload(), 100);
+    }
+
+    render() {
+        if (this.state.isReloading) {
+            return (
+                <div style={{padding: '20px', textAlign: 'center'}}>
+                    <h2>Reloading...</h2>
+                    <p>A required component failed to load. The page will reload automatically.</p>
+                </div>
+            );
+        }
+
+        return this.props.children;
+    }
+}

ui/src/shared/utils/lazy-import.test.ts

@@ -0,0 +1,48 @@
+import {lazyImport} from './lazy-import';
+
+// Mock React component for testing
+const MockComponent = () => null;
+
+// Helper to create a mock import function that fails `failCount` times then succeeds.
+function makeMockImport(failCount: number, result = {default: MockComponent}) {
+    let calls = 0;
+    return jest.fn(async () => {
+        calls++;
+        if (calls <= failCount) {
+            throw new Error(`ChunkLoadError: Loading chunk ${calls} failed.`);
+        }
+        return result;
+    });
+}
+
+// Speed up timers in tests
+jest.useFakeTimers();
+
+describe('lazyImport', () => {
+    afterEach(() => jest.clearAllMocks());
+
+    it('returns the module immediately when the import succeeds on first try', async () => {
+        const mockImport = makeMockImport(0);
+        const promise = lazyImport(mockImport, 2, 0);
+        jest.runAllTimers();
+        await expect(promise).resolves.toEqual({default: MockComponent});
+        expect(mockImport).toHaveBeenCalledTimes(1);
+    });
+
+    it('retries and succeeds when the import fails once', async () => {
+        const mockImport = makeMockImport(1);
+        const promise = lazyImport(mockImport, 2, 0);
+        jest.runAllTimers();
+        await expect(promise).resolves.toEqual({default: MockComponent});
+        expect(mockImport).toHaveBeenCalledTimes(2);
+    });
+
+    it('retries up to the configured limit and then throws', async () => {
+        const mockImport = makeMockImport(5); // always fails
+        const promise = lazyImport(mockImport, 2, 0);
+        jest.runAllTimers();
+        await expect(promise).rejects.toThrow('ChunkLoadError');
+        // 1 initial attempt + 2 retries = 3 total calls
+        expect(mockImport).toHaveBeenCalledTimes(3);
+    });
+});

ui/src/shared/utils/lazy-import.ts

@@ -0,0 +1,26 @@
+import {ComponentType} from 'react';
+
+/**
+ * Lazy import wrapper that retries loading chunks on failure.
+ * Fixes "Loading chunk X failed" errors by attempting to reload the chunk.
+ * See: https://github.com/argoproj/argo-workflows/issues/15640
+ */
+export function lazyImport<T extends ComponentType<any>>(
+    importFunc: () => Promise<{default: T}>,
+    retries: number = 3,
+    delayMs: number = 1000
+): Promise<{default: T}> {
+    let attemptCount = 0;
+
+    const attempt = (): Promise<{default: T}> => {
+        attemptCount++;
+        return importFunc().catch(error => {
+            if (attemptCount >= retries + 1) {
+                throw error;
+            }
+            return new Promise(resolve => setTimeout(() => resolve(attempt()), delayMs * attemptCount));
+        });
+    };
+
+    return attempt();
+}