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,43 @@
+import {render, screen} from '@testing-library/react';
+import * as React from 'react';
+
+import {ChunkLoadErrorBoundary} from './chunk-load-error-boundary';
+
+beforeEach(() => jest.spyOn(console, 'error').mockImplementation(() => {}));
+afterEach(() => jest.restoreAllMocks());
+
+function Bomb({error}: {error: Error}): null {
+    throw error;
+}
+
+describe('ChunkLoadErrorBoundary', () => {
+    it('renders children when there is no error', () => {
+        render(
+            <ChunkLoadErrorBoundary>
+                <span>hello</span>
+            </ChunkLoadErrorBoundary>
+        );
+        expect(screen.getByText('hello')).toBeTruthy();
+    });
+
+    it('catches chunk load errors and displays reload message', () => {
+        const chunkError = Object.assign(new Error('Loading chunk 775 failed.'), {name: 'ChunkLoadError'});
+        render(
+            <ChunkLoadErrorBoundary>
+                <Bomb error={chunkError} />
+            </ChunkLoadErrorBoundary>
+        );
+        expect(screen.getByText(/Reloading/i)).toBeTruthy();
+    });
+
+    it('re-throws non-chunk errors', () => {
+        const genericError = new Error('Some other error');
+        expect(() =>
+            render(
+                <ChunkLoadErrorBoundary>
+                    <Bomb error={genericError} />
+                </ChunkLoadErrorBoundary>
+            )
+        ).toThrow('Some other error');
+    });
+});

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,23 @@
+import * as React from 'react';
+
+import {lazyImport} from './lazy-import';
+
+// Mock React component for testing
+const MockComponent: React.FC = () => null;
+
+describe('lazyImport', () => {
+    it('successfully imports a module', async () => {
+        const mockImport = jest.fn().mockResolvedValue({default: MockComponent});
+        const promise = lazyImport(mockImport, 2, 100);
+        const result = await promise;
+        expect(result.default).toBe(MockComponent);
+        expect(mockImport).toHaveBeenCalled();
+    });
+
+    it('rejects on import failure', async () => {
+        const error = new Error('ChunkLoadError: Failed to load');
+        const mockImport = jest.fn().mockRejectedValue(error);
+        const promise = lazyImport(mockImport, 0, 0);
+        await expect(promise).rejects.toThrow('ChunkLoadError');
+    });
+});

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();
+}