Fix ErrorBoundary retry mechanism with key-based remounting

wp-ict-platform/.gitignore

@@ -4,6 +4,7 @@
 
 # Build outputs
 /assets/js/dist
+/assets/js/css
 /assets/css/dist
 *.map
 

wp-ict-platform/src/components/common/ErrorBoundary.tsx

@@ -21,6 +21,7 @@ interface State {
   hasError: boolean;
   error: Error | null;
   errorInfo: ErrorInfo | null;
+  resetKey: number;
 }
 
 export class ErrorBoundary extends Component<Props, State> {
@@ -30,6 +31,7 @@ export class ErrorBoundary extends Component<Props, State> {
       hasError: false,
       error: null,
       errorInfo: null,
+      resetKey: 0,
     };
   }
 
@@ -45,7 +47,7 @@ export class ErrorBoundary extends Component<Props, State> {
       type: 'react_error',
       message: error.message,
       stack: error.stack,
-      componentStack: errorInfo.componentStack,
+      componentStack: errorInfo.componentStack ?? undefined,
       timestamp: new Date().toISOString(),
     });
 
@@ -54,15 +56,16 @@ export class ErrorBoundary extends Component<Props, State> {
   }
 
   handleRetry = (): void => {
-    this.setState({
+    this.setState((prevState) => ({
       hasError: false,
       error: null,
       errorInfo: null,
-    });
+      resetKey: prevState.resetKey + 1,
+    }));
   };
 
   render(): ReactNode {
-    const { hasError, error, errorInfo } = this.state;
+    const { hasError, error, errorInfo, resetKey } = this.state;
     const { children, fallback, showDetails } = this.props;
 
     if (hasError) {
@@ -148,7 +151,7 @@ export class ErrorBoundary extends Component<Props, State> {
       );
     }
 
-    return children;
+    return <React.Fragment key={resetKey}>{children}</React.Fragment>;
   }
 }
 

wp-ict-platform/src/components/common/__tests__/ErrorBoundary.test.tsx

@@ -6,7 +6,7 @@
  */
 
 import React from 'react';
-import { render, screen, fireEvent } from '@testing-library/react';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
 import { ErrorBoundary } from '../ErrorBoundary';
 
 // Mock the errorLogger
@@ -87,27 +87,42 @@ describe('ErrorBoundary', () => {
     expect(screen.getByText('Technical Details')).toBeInTheDocument();
   });
 
-  it('provides try again button that resets error state', () => {
+  it('provides try again button that resets error state', async () => {
+    const TestComponent: React.FC<{ throwError: boolean }> = ({ throwError }) => {
+      if (throwError) {
+        throw new Error('Test error');
+      }
+      return <div>No error</div>;
+    };
+
+    let throwError = true;
     const { rerender } = render(
       <ErrorBoundary>
-        <ThrowError />
+        <TestComponent throwError={throwError} />
       </ErrorBoundary>
     );
 
     // Error boundary should show error UI
     expect(screen.getByText('Something went wrong')).toBeInTheDocument();
 
-    // Click try again
-    fireEvent.click(screen.getByText('Try Again'));
-
-    // Re-render with a component that doesn't throw
+    // First, update the component to not throw
+    throwError = false;
     rerender(
       <ErrorBoundary>
-        <ThrowError shouldThrow={false} />
+        <TestComponent throwError={throwError} />
       </ErrorBoundary>
     );
 
-    expect(screen.getByText('No error')).toBeInTheDocument();
+    // The error UI should still be shown (error state persists)
+    expect(screen.getByText('Something went wrong')).toBeInTheDocument();
+
+    // Now click try again - this resets the error state and re-renders children
+    fireEvent.click(screen.getByText('Try Again'));
+
+    // Now the component should render without error
+    await waitFor(() => {
+      expect(screen.getByText('No error')).toBeInTheDocument();
+    });
   });
 
   it('is accessible with proper ARIA attributes', () => {