worklenz/worklenz-frontend/src/components/ModuleErrorBoundary.tsx

import React, { Component, ErrorInfo, ReactNode } from 'react';
import { Button, Result } from '@/shared/antd-imports';
import CacheCleanup from '@/utils/cache-cleanup';

interface Props {
  children: ReactNode;
}

interface State {
  hasError: boolean;
  error?: Error;
}

class ModuleErrorBoundary extends Component<Props, State> {
  constructor(props: Props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error: Error): State {
    // Check if this is a module loading error
    const isModuleError =
      error.message.includes('Failed to fetch dynamically imported module') ||
      error.message.includes('Loading chunk') ||
      error.message.includes('Loading CSS chunk') ||
      error.name === 'ChunkLoadError';

    if (isModuleError) {
      return { hasError: true, error };
    }

    // For other errors, let them bubble up
    return { hasError: false };
  }

  componentDidCatch(error: Error, errorInfo: ErrorInfo) {
    console.error('Module Error Boundary caught an error:', error, errorInfo);

    // If this is a module loading error, clear caches and reload
    if (this.state.hasError) {
      this.handleModuleError();
    }
  }

  private async handleModuleError() {
    try {
      console.log('Handling module loading error - clearing caches...');

      // Clear all caches
      await CacheCleanup.clearAllCaches();

      // Force reload to login page
      CacheCleanup.forceReload('/auth/login');
    } catch (cacheError) {
      console.error('Failed to handle module error:', cacheError);
      // Fallback: just reload the page
      window.location.reload();
    }
  }

  private handleRetry = async () => {
    try {
      await CacheCleanup.clearAllCaches();
      CacheCleanup.forceReload('/auth/login');
    } catch (error) {
      console.error('Retry failed:', error);
      window.location.reload();
    }
  };

  render() {
    if (this.state.hasError) {
      return (
        <div
          style={{
            display: 'flex',
            justifyContent: 'center',
            alignItems: 'center',
            minHeight: '100vh',
            padding: '20px',
          }}
        >
          <Result
            status="error"
            title="Module Loading Error"
            subTitle="There was an issue loading the application. This usually happens after updates or during logout."
            extra={[
              <Button type="primary" key="retry" onClick={this.handleRetry} loading={false}>
                Retry
              </Button>,
              <Button key="reload" onClick={() => window.location.reload()}>
                Reload Page
              </Button>,
            ]}
          />
        </div>
      );
    }

    return this.props.children;
  }
}

export default ModuleErrorBoundary;