Erweiterte Micro Frontend Patterns: Performance, Debugging und Production-Erfahrungen

// @company/shared-state - Erweiterte State-Verwaltung für Micro Frontends
interface StateEvent {
  id: string;
  type: string;
  payload: any;
  timestamp: number;
  version: number;
  microfrontend: string;
}

interface StateSnapshot {
  version: number;
  data: any;
  timestamp: number;
}

class DistributedStateManager {
  private eventStore: StateEvent[] = [];
  private snapshots: Map<string, StateSnapshot> = new Map();
  private subscribers: Map<string, Set<(state: any) => void>> = new Map();
  private maxEventHistory = 1000;
  private snapshotInterval = 100; // Erstelle alle 100 Events einen Snapshot

  constructor(private persistenceAdapter?: PersistenceAdapter) {
    // Lade initialen State vom Persistence Layer
    this.loadInitialState();
  }

  // Nur-Anhängen Event Store
  dispatch(event: Omit<StateEvent, 'id' | 'timestamp' | 'version'>) {
    const stateEvent: StateEvent = {
      ...event,
      id: generateId(),
      timestamp: Date.now(),
      version: this.eventStore.length + 1,
    };

    this.eventStore.push(stateEvent);

    // Erstelle periodische Snapshots für Performance
    if (stateEvent.version % this.snapshotInterval === 0) {
      this.createSnapshot(event.type.split(':')[0]); // Namespace vom Event-Typ
    }

    // Persistiere in externem Storage
    this.persistenceAdapter?.persistEvent(stateEvent);

    // Benachrichtige Subscriber
    this.notifySubscribers(event.type, this.getState(event.type.split(':')[0]));

    // Halte Event-Verlauf Größe bei
    if (this.eventStore.length > this.maxEventHistory) {
      this.eventStore = this.eventStore.slice(-this.maxEventHistory);
    }
  }

  getState(namespace: string): any {
    // Versuche zuerst den neuesten Snapshot zu verwenden
    const snapshot = this.snapshots.get(namespace);
    const eventsAfterSnapshot = snapshot
      ? this.eventStore.filter(e => e.version > snapshot.version && e.type.startsWith(namespace))
      : this.eventStore.filter(e => e.type.startsWith(namespace));

    let state = snapshot?.data || {};

    // Wende Events nach Snapshot an
    eventsAfterSnapshot.forEach(event => {
      state = this.applyEvent(state, event);
    });

    return state;
  }

  subscribe(eventType: string, callback: (state: any) => void): () => void {
    if (!this.subscribers.has(eventType)) {
      this.subscribers.set(eventType, new Set());
    }

    this.subscribers.get(eventType)!.add(callback);

    // Rufe sofort mit aktuellem State auf
    const namespace = eventType.split(':')[0];
    callback(this.getState(namespace));

    // Gib Unsubscribe-Funktion zurück
    return () => {
      this.subscribers.get(eventType)?.delete(callback);
    };
  }

  private applyEvent(state: any, event: StateEvent): any {
    switch (event.type) {
      case 'user:login':
        return { ...state, user: event.payload, isAuthenticated: true };

      case 'user:logout':
        return { ...state, user: null, isAuthenticated: false };

      case 'cart:add-item':
        const items = state.items || [];
        return {
          ...state,
          items: [...items, event.payload],
          total: calculateTotal([...items, event.payload])
        };

      case 'cart:remove-item':
        const filteredItems = (state.items || []).filter(
          (item: any) => item.id !== event.payload.id
        );
        return {
          ...state,
          items: filteredItems,
          total: calculateTotal(filteredItems)
        };

      default:
        return state;
    }
  }

  private createSnapshot(namespace: string) {
    const state = this.getState(namespace);
    const snapshot: StateSnapshot = {
      version: this.eventStore.length,
      data: state,
      timestamp: Date.now(),
    };

    this.snapshots.set(namespace, snapshot);
    this.persistenceAdapter?.persistSnapshot(namespace, snapshot);
  }

  private notifySubscribers(eventType: string, state: any) {
    const callbacks = this.subscribers.get(eventType);
    if (callbacks) {
      callbacks.forEach(callback => {
        try {
          callback(state);
        } catch (error) {
          console.error(`Fehler in State-Subscriber für ${eventType}:`, error);
        }
      });
    }
  }

  private async loadInitialState() {
    if (this.persistenceAdapter) {
      try {
        const { events, snapshots } = await this.persistenceAdapter.loadInitialState();
        this.eventStore = events;
        snapshots.forEach((snapshot, namespace) => {
          this.snapshots.set(namespace, snapshot);
        });
      } catch (error) {
        console.error('Fehler beim Laden des initialen States:', error);
      }
    }
  }

  // Debug-Hilfsmittel
  getEventHistory(namespace?: string): StateEvent[] {
    if (namespace) {
      return this.eventStore.filter(e => e.type.startsWith(namespace));
    }
    return [...this.eventStore];
  }

  replayEventsFrom(version: number): void {
    const eventsToReplay = this.eventStore.filter(e => e.version >= version);
    console.log(`Wiederhole ${eventsToReplay.length} Events ab Version ${version}`);

    eventsToReplay.forEach(event => {
      console.log(`Wiederhole: ${event.type}`, event.payload);
    });
  }
}

// Persistence Adapter Interface
interface PersistenceAdapter {
  persistEvent(event: StateEvent): Promise<void>;
  persistSnapshot(namespace: string, snapshot: StateSnapshot): Promise<void>;
  loadInitialState(): Promise<{
    events: StateEvent[];
    snapshots: Map<string, StateSnapshot>;
  }>;
}

// React Hooks für einfachere Nutzung
export const useDistributedState = <T>(namespace: string): [T, (event: any) => void] => {
  const [state, setState] = useState<T>({} as T);
  const stateManager = useContext(StateManagerContext);

  useEffect(() => {
    const unsubscribe = stateManager.subscribe(`${namespace}:*`, setState);
    return unsubscribe;
  }, [namespace, stateManager]);

  const dispatch = useCallback((event: any) => {
    stateManager.dispatch({
      type: `${namespace}:${event.type}`,
      payload: event.payload,
      microfrontend: event.source || 'unknown',
    });
  }, [namespace, stateManager]);

  return [state, dispatch];
};

// Erweiterte optimistische Update-Pattern für Micro Frontends
interface OptimisticUpdate {
  id: string;
  type: string;
  payload: any;
  timestamp: number;
  microfrontend: string;
  status: 'pending' | 'confirmed' | 'failed';
}

class OptimisticStateManager {
  private pendingUpdates: Map<string, OptimisticUpdate> = new Map();
  private baseState: any = {};
  private stateManager: DistributedStateManager;

  constructor(stateManager: DistributedStateManager) {
    this.stateManager = stateManager;
  }

  optimisticDispatch(event: any): string {
    const updateId = generateId();
    const optimisticUpdate: OptimisticUpdate = {
      id: updateId,
      type: event.type,
      payload: event.payload,
      timestamp: Date.now(),
      microfrontend: event.source,
      status: 'pending',
    };

    this.pendingUpdates.set(updateId, optimisticUpdate);

    // Wende optimistisches Update sofort an
    this.applyOptimisticUpdate(optimisticUpdate);

    // Sende an Server
    this.sendToServer(event)
      .then(() => {
        // Bestätige das Update
        const update = this.pendingUpdates.get(updateId);
        if (update) {
          update.status = 'confirmed';
          // Wende bestätigten State an
          this.stateManager.dispatch(event);
        }
      })
      .catch((error) => {
        // Mache optimistisches Update rückgängig
        const update = this.pendingUpdates.get(updateId);
        if (update) {
          update.status = 'failed';
          this.revertOptimisticUpdate(updateId);

          // Zeige Fehler dem Benutzer
          this.showConflictResolution(error, event);
        }
      })
      .finally(() => {
        this.pendingUpdates.delete(updateId);
      });

    return updateId;
  }

  private applyOptimisticUpdate(update: OptimisticUpdate) {
    // Wende das Update optimistisch auf die UI an
    const event = {
      type: update.type,
      payload: { ...update.payload, _optimistic: true },
      microfrontend: update.microfrontend,
    };

    this.stateManager.dispatch(event);
  }

  private revertOptimisticUpdate(updateId: string) {
    const update = this.pendingUpdates.get(updateId);
    if (!update) return;

    // Sende Rückgängig-Event
    this.stateManager.dispatch({
      type: `${update.type}:revert`,
      payload: { originalPayload: update.payload },
      microfrontend: update.microfrontend,
    });
  }

  private async sendToServer(event: any): Promise<any> {
    const response = await fetch('/api/state/update', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(event),
    });

    if (!response.ok) {
      throw new Error(`Server lehnte Update ab: ${response.statusText}`);
    }

    return response.json();
  }

  private showConflictResolution(error: Error, originalEvent: any) {
    // Zeige UI für Konfliktlösung
    this.stateManager.dispatch({
      type: 'ui:show-conflict-resolution',
      payload: {
        error: error.message,
        originalEvent,
        timestamp: Date.now(),
      },
      microfrontend: 'system',
    });
  }
}

// webpack-bundle-analyzer-reporter.js
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

class MicroFrontendBundleReporter {
  constructor(options = {}) {
    this.options = {
      reportDir: './bundle-reports',
      threshold: 50000, // 50KB
      ...options,
    };
  }

  apply(compiler) {
    compiler.hooks.emit.tapAsync('MicroFrontendBundleReporter', (compilation, callback) => {
      const stats = compilation.getStats().toJson();
      const analysis = this.analyzeBundle(stats);

      // Generiere Report
      this.generateReport(analysis);

      // Warne vor großen Bundles
      this.checkBundleSize(analysis);

      callback();
    });
  }

  analyzeBundle(stats) {
    const analysis = {
      totalSize: 0,
      sharedDependencies: {},
      duplicatedDependencies: [],
      largeDependencies: [],
      unusedExports: [],
    };

    stats.chunks.forEach(chunk => {
      chunk.modules.forEach(module => {
        const size = module.size || 0;
        analysis.totalSize += size;

        // Identifiziere geteilte Abhängigkeiten
        if (module.name && module.name.includes('node_modules')) {
          const dep = this.extractDependencyName(module.name);
          if (!analysis.sharedDependencies[dep]) {
            analysis.sharedDependencies[dep] = { size: 0, count: 0 };
          }
          analysis.sharedDependencies[dep].size += size;
          analysis.sharedDependencies[dep].count++;
        }

        // Markiere große Abhängigkeiten
        if (size > this.options.threshold) {
          analysis.largeDependencies.push({
            name: module.name,
            size,
            reasons: module.reasons || [],
          });
        }
      });
    });

    // Finde doppelte Abhängigkeiten
    Object.entries(analysis.sharedDependencies).forEach(([dep, info]) => {
      if (info.count > 1) {
        analysis.duplicatedDependencies.push({ name: dep, ...info });
      }
    });

    return analysis;
  }

  generateReport(analysis) {
    const report = {
      timestamp: new Date().toISOString(),
      microfrontend: process.env.MICRO_FRONTEND_NAME || 'unknown',
      ...analysis,
    };

    const fs = require('fs');
    const path = require('path');

    if (!fs.existsSync(this.options.reportDir)) {
      fs.mkdirSync(this.options.reportDir, { recursive: true });
    }

    const reportPath = path.join(
      this.options.reportDir,
      `bundle-report-${Date.now()}.json`
    );

    fs.writeFileSync(reportPath, JSON.stringify(report, null, 2));
    console.log(`Bundle-Report generiert: ${reportPath}`);
  }

  checkBundleSize(analysis) {
    const maxSize = 500000; // 500KB Warnschwelle

    if (analysis.totalSize > maxSize) {
      console.warn(`⚠️  Bundle-Größe (${analysis.totalSize} Bytes) überschreitet empfohlene Schwelle (${maxSize} Bytes)`);
    }

    if (analysis.duplicatedDependencies.length > 0) {
      console.warn('⚠️  Doppelte Abhängigkeiten gefunden:');
      analysis.duplicatedDependencies.forEach(dep => {
        console.warn(`  - ${dep.name}: ${dep.size} Bytes (${dep.count} Kopien)`);
      });
    }
  }

  extractDependencyName(moduleName) {
    const match = moduleName.match(/node_modules[\/\\](@[^\/\\]+[\/\\][^\/\\]+|[^\/\\]+)/);
    return match ? match[1] : moduleName;
  }
}

module.exports = MicroFrontendBundleReporter;

// @company/performance-monitor
interface PerformanceMetrics {
  microfrontend: string;
  loadTime: number;
  renderTime: number;
  bundleSize: number;
  memoryUsage: number;
  errorCount: number;
}

class MicroFrontendPerformanceMonitor {
  private metrics: Map<string, PerformanceMetrics> = new Map();
  private observers: PerformanceObserver[] = [];

  constructor(private reportingEndpoint?: string) {
    this.setupPerformanceObservers();
  }

  startMeasurement(microfrontendName: string) {
    const startTime = performance.now();

    return {
      recordLoadComplete: () => {
        const loadTime = performance.now() - startTime;
        this.updateMetrics(microfrontendName, { loadTime });
      },

      recordRenderComplete: () => {
        const renderTime = performance.now() - startTime;
        this.updateMetrics(microfrontendName, { renderTime });
      },

      recordError: () => {
        const current = this.metrics.get(microfrontendName);
        this.updateMetrics(microfrontendName, {
          errorCount: (current?.errorCount || 0) + 1
        });
      }
    };
  }

  private setupPerformanceObservers() {
    // Überwache Ressourcen-Laden
    const resourceObserver = new PerformanceObserver((list) => {
      list.getEntries().forEach((entry) => {
        if (entry.name.includes('remoteEntry.js')) {
          const microfrontendName = this.extractMicrofrontendName(entry.name);
          this.updateMetrics(microfrontendName, {
            bundleSize: entry.transferSize || 0,
          });
        }
      });
    });
    resourceObserver.observe({ entryTypes: ['resource'] });
    this.observers.push(resourceObserver);

    // Überwache lange Tasks
    const longTaskObserver = new PerformanceObserver((list) => {
      list.getEntries().forEach((entry) => {
        if (entry.duration > 50) { // Tasks länger als 50ms
          console.warn(`Lange Task erkannt: ${entry.duration}ms`);
          this.reportLongTask(entry);
        }
      });
    });
    longTaskObserver.observe({ entryTypes: ['longtask'] });
    this.observers.push(longTaskObserver);

    // Überwache Speichernutzung
    this.startMemoryMonitoring();
  }

  private startMemoryMonitoring() {
    setInterval(() => {
      if ('memory' in performance) {
        const memInfo = (performance as any).memory;
        this.metrics.forEach((_, microfrontendName) => {
          this.updateMetrics(microfrontendName, {
            memoryUsage: memInfo.usedJSHeapSize,
          });
        });
      }
    }, 10000); // Alle 10 Sekunden
  }

  private updateMetrics(microfrontendName: string, updates: Partial<PerformanceMetrics>) {
    const current = this.metrics.get(microfrontendName) || {
      microfrontend: microfrontendName,
      loadTime: 0,
      renderTime: 0,
      bundleSize: 0,
      memoryUsage: 0,
      errorCount: 0,
    };

    const updated = { ...current, ...updates };
    this.metrics.set(microfrontendName, updated);

    // Berichte an Monitoring-Service
    this.reportMetrics(updated);
  }

  private reportMetrics(metrics: PerformanceMetrics) {
    if (this.reportingEndpoint) {
      fetch(this.reportingEndpoint, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(metrics),
      }).catch(error => {
        console.error('Fehler beim Berichten der Metriken:', error);
      });
    }

    // Logge auch in der Konsole in der Entwicklung
    if (process.env.NODE_ENV === 'development') {
      console.log(`[Performance] ${metrics.microfrontend}:`, metrics);
    }
  }

  private reportLongTask(entry: PerformanceEntry) {
    if (this.reportingEndpoint) {
      fetch(`${this.reportingEndpoint}/long-tasks`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          duration: entry.duration,
          startTime: entry.startTime,
          timestamp: Date.now(),
        }),
      }).catch(error => {
        console.error('Fehler beim Berichten der langen Task:', error);
      });
    }
  }

  getMetrics(microfrontendName?: string): PerformanceMetrics | Map<string, PerformanceMetrics> {
    if (microfrontendName) {
      return this.metrics.get(microfrontendName)!;
    }
    return new Map(this.metrics);
  }

  cleanup() {
    this.observers.forEach(observer => observer.disconnect());
  }

  private extractMicrofrontendName(url: string): string {
    const match = url.match(/\/\/([^.]+)\./);
    return match ? match[1] : 'unknown';
  }
}

// React Hook für Performance-Monitoring
export const usePerformanceMonitor = (microfrontendName: string) => {
  const monitor = useContext(PerformanceMonitorContext);

  useEffect(() => {
    const measurement = monitor.startMeasurement(microfrontendName);

    // Erfasse wenn Component mounted wird (Render abgeschlossen)
    measurement.recordRenderComplete();

    return () => {
      // Aufräumen falls nötig
    };
  }, [microfrontendName, monitor]);

  const recordError = useCallback(() => {
    const measurement = monitor.startMeasurement(microfrontendName);
    measurement.recordError();
  }, [microfrontendName, monitor]);

  return { recordError };
};

// Der problematische Code, der Speicherlecks verursachte
const ProductList: React.FC = () => {
  const eventBus = useContext(EventBusContext);

  useEffect(() => {
    // Dies erzeugte eine Closure, die Referenzen zur gesamten Komponente hielt
    const handler = (event: any) => {
      // Der Handler-Closure erfasste den gesamten Component-Scope
      setProducts(prevProducts => {
        // Komplexe State-Updates, die alten State hielten
        return updateProductsWithComplexLogic(prevProducts, event);
      });
    };

    eventBus.subscribe('cart:updated', handler);

    // Das Unsubscribe wurde nie aufgerufen wegen früher Rückgaben in einigen Code-Pfaden
    return () => eventBus.unsubscribe('cart:updated', handler);
  }, []); // Fehlende Abhängigkeiten verursachten stale Closures

// Korrigierte Version mit ordnungsgemäßer Speicherverwaltung
const ProductList: React.FC = () => {
  const eventBus = useContext(EventBusContext);
  const [products, setProducts] = useState<Product[]>([]);

  // Verwende useCallback um unnötige Neukreationen zu verhindern
  const handleCartUpdate = useCallback((event: CartUpdateEvent) => {
    setProducts(prevProducts => {
      // Verwende unveränderliche Updates um Referenzzyklen zu verhindern
      return prevProducts.map(product =>
        product.id === event.productId
          ? { ...product, inCart: event.inCart }
          : product
      );
    });
  }, []); // Keine Abhängigkeiten nötig da wir funktionale Updates verwenden

  useEffect(() => {
    const unsubscribe = eventBus.subscribe('cart:updated', handleCartUpdate);

    // Stelle immer sicher, dass Aufräumen passiert
    return () => {
      unsubscribe();
    };
  }, [eventBus, handleCartUpdate]);

  // Füge Speichernutzungs-Monitoring in der Entwicklung hinzu
  useEffect(() => {
    if (process.env.NODE_ENV === 'development') {
      const interval = setInterval(() => {
        if ('memory' in performance) {
          const memInfo = (performance as any).memory;
          console.log(`ProductList Speichernutzung: ${memInfo.usedJSHeapSize / 1024 / 1024} MB`);
        }
      }, 5000);

      return () => clearInterval(interval);
    }
  }, []);

  return (
    <div className="product-list">
      {products.map(product => (
        <ProductCard key={product.id} product={product} />
      ))}
    </div>
  );
};

// Speicherleck-Erkennungs-Utility
class MemoryLeakDetector {
  private snapshots: any[] = [];
  private interval: NodeJS.Timeout;

  constructor(private intervalMs: number = 30000) {
    this.interval = setInterval(() => {
      this.takeSnapshot();
    }, intervalMs);
  }

  private takeSnapshot() {
    if ('memory' in performance) {
      const memInfo = (performance as any).memory;
      const snapshot = {
        timestamp: Date.now(),
        usedJSHeapSize: memInfo.usedJSHeapSize,
        totalJSHeapSize: memInfo.totalJSHeapSize,
        jsHeapSizeLimit: memInfo.jsHeapSizeLimit,
      };

      this.snapshots.push(snapshot);

      // Behalte nur die letzten 20 Snapshots
      if (this.snapshots.length > 20) {
        this.snapshots.shift();
      }

      this.analyzeMemoryTrend();
    }
  }

  private analyzeMemoryTrend() {
    if (this.snapshots.length &lt;5) return;

    const recent = this.snapshots.slice(-5);
    const isIncreasing = recent.every((snapshot, index) => {
      if (index === 0) return true;
      return snapshot.usedJSHeapSize > recent[index - 1].usedJSHeapSize;
    });

    if (isIncreasing) {
      const growth = recent[recent.length - 1].usedJSHeapSize - recent[0].usedJSHeapSize;
      const growthMB = growth / 1024 / 1024;

      if (growthMB > 10) { // Mehr als 10MB Wachstum
        console.warn(`Potentielles Speicherleck erkannt. Wachstum: ${growthMB.toFixed(2)} MB`);
        this.reportMemoryLeak(recent);
      }
    }
  }

  private reportMemoryLeak(snapshots: any[]) {
    // Berichte an Monitoring-Service
    if (typeof window !== 'undefined' && (window as any).analytics) {
      (window as any).analytics.track('Memory Leak Detected', {
        snapshots,
        userAgent: navigator.userAgent,
        timestamp: Date.now(),
      });
    }
  }

  cleanup() {
    if (this.interval) {
      clearInterval(this.interval);
    }
  }
}

// Die Lösung: Robuste Cross-Origin-Kommunikation
class CrossOriginMessenger {
  private trustedOrigins: Set<string> = new Set();
  private messageQueue: Array<{ data: any; targetOrigin: string; retry: number }> = [];
  private maxRetries = 3;

  constructor(trustedOrigins: string[]) {
    trustedOrigins.forEach(origin => this.trustedOrigins.add(origin));
    this.setupMessageListener();
    this.startRetryProcessor();
  }

  private setupMessageListener() {
    window.addEventListener('message', (event) => {
      // Strenge Origin-Prüfung
      if (!this.trustedOrigins.has(event.origin)) {
        console.warn(`Nachricht von nicht vertrauenswürdigem Origin abgelehnt: ${event.origin}`);
        return;
      }

      try {
        const message = JSON.parse(event.data);
        this.handleMessage(message, event.origin);
      } catch (error) {
        console.error('Fehler beim Parsen der Cross-Origin-Nachricht:', error);
      }
    });
  }

  sendMessage(data: any, targetOrigin: string, retries: number = 0): boolean {
    if (!this.trustedOrigins.has(targetOrigin)) {
      console.error(`Versuch Nachricht an nicht vertrauenswürdigen Origin zu senden: ${targetOrigin}`);
      return false;
    }

    try {
      const serializedData = JSON.stringify({
        ...data,
        timestamp: Date.now(),
        sender: window.location.origin,
        messageId: generateId(),
      });

      // Versuche das Ziel-Window zu finden
      const targetWindow = this.findTargetWindow(targetOrigin);

      if (targetWindow) {
        targetWindow.postMessage(serializedData, targetOrigin);
        return true;
      } else {
        // Füge zur Warteschlange für späteren Wiederholungsversuch hinzu
        this.messageQueue.push({ data, targetOrigin, retry: retries });
        return false;
      }
    } catch (error) {
      console.error('Fehler beim Senden der Cross-Origin-Nachricht:', error);
      return false;
    }
  }

  private findTargetWindow(targetOrigin: string): Window | null {
    // Prüfe alle iframes
    const iframes = document.querySelectorAll('iframe');
    for (const iframe of iframes) {
      try {
        if (iframe.src.startsWith(targetOrigin)) {
          return iframe.contentWindow;
        }
      } catch (error) {
        // Zugriff verweigert - wahrscheinlich Cross-Origin
        continue;
      }
    }

    // Prüfe ob es das Parent-Window ist
    if (window.parent !== window) {
      try {
        if (document.referrer.startsWith(targetOrigin)) {
          return window.parent;
        }
      } catch (error) {
        // Zugriff verweigert
      }
    }

    return null;
  }

  private startRetryProcessor() {
    setInterval(() => {
      const toRetry = this.messageQueue.splice(0); // Nimm alle wartenden Nachrichten

      toRetry.forEach(({ data, targetOrigin, retry }) => {
        if (retry < this.maxRetries) {
          const success = this.sendMessage(data, targetOrigin, retry + 1);
          if (!success) {
            // Reihe wieder ein mit erhöhter Wiederholungsanzahl
            this.messageQueue.push({ data, targetOrigin, retry: retry + 1 });
          }
        } else {
          console.error(`Fehler beim Übertragen der Nachricht nach ${this.maxRetries} Versuchen:`, data);
        }
      });
    }, 1000); // Wiederhole jede Sekunde
  }

  private handleMessage(message: any, origin: string) {
    // Behandle verschiedene Nachrichtentypen
    switch (message.type) {
      case 'state-update':
        this.handleStateUpdate(message.payload);
        break;
      case 'navigation':
        this.handleNavigation(message.payload);
        break;
      case 'error':
        this.handleError(message.payload);
        break;
      default:
        console.warn(`Unbekannter Nachrichtentyp: ${message.type}`);
    }
  }

  private handleStateUpdate(payload: any) {
    // Update geteilten State
    if (typeof window !== 'undefined' && (window as any).stateManager) {
      (window as any).stateManager.dispatch({
        type: payload.type,
        payload: payload.data,
        source: 'cross-origin',
      });
    }
  }

  private handleNavigation(payload: any) {
    // Behandle Navigations-Anfragen
    if (payload.path && typeof window !== 'undefined') {
      window.history.pushState({}, '', payload.path);
    }
  }

  private handleError(payload: any) {
    console.error('Cross-Origin-Fehler erhalten:', payload);
    // Berichte an Monitoring-Service
  }
}

// CSP-Header-Generator für Micro Frontend-Anwendungen
class MicroFrontendCSPGenerator {
  constructor(
    private allowedOrigins: string[],
    private isDevelopment: boolean = false
  ) {}

  generateCSP(): string {
    const directives = [];

    // Script-Quellen - erlaube eigenen Origin und Micro Frontend Origins
    const scriptSrc = [
      "'self'",
      ...this.allowedOrigins,
    ];

    if (this.isDevelopment) {
      scriptSrc.push("'unsafe-eval'"); // Für Entwicklungstools
    }

    directives.push(`script-src ${scriptSrc.join(' ')}`);

    // Connect-Quellen für API-Aufrufe
    const connectSrc = [
      "'self'",
      ...this.allowedOrigins,
      // Füge API-Endpunkte hinzu
      'https://api.company.com',
    ];

    directives.push(`connect-src ${connectSrc.join(' ')}`);

    // Frame-Quellen für iframe-basierte Micro Frontends
    const frameSrc = [
      "'self'",
      ...this.allowedOrigins,
    ];

    directives.push(`frame-src ${frameSrc.join(' ')}`);

    // Bild-Quellen
    directives.push(`img-src 'self' data: https:`);

    // Style-Quellen
    const styleSrc = [
      "'self'",
      "'unsafe-inline'", // Erforderlich für dynamische Styles
      ...this.allowedOrigins,
    ];

    directives.push(`style-src ${styleSrc.join(' ')}`);

    return directives.join('; ');
  }

  // Middleware für Express.js
  middleware() {
    return (req: any, res: any, next: any) => {
      res.setHeader('Content-Security-Policy', this.generateCSP());
      next();
    };
  }
}

// Verwendung
const cspGenerator = new MicroFrontendCSPGenerator([
  'https://products.company.com',
  'https://cart.company.com',
  'https://user.company.com',
], process.env.NODE_ENV === 'development');

app.use(cspGenerator.middleware());

// Sicherer Kommunikationskanal
class SecureMicroFrontendCommunication {
  private secretKey: string;
  private trustedOrigins: Set<string>;

  constructor(secretKey: string, trustedOrigins: string[]) {
    this.secretKey = secretKey;
    this.trustedOrigins = new Set(trustedOrigins);
  }

  async sendSecureMessage(data: any, targetOrigin: string): Promise<boolean> {
    if (!this.trustedOrigins.has(targetOrigin)) {
      throw new Error(`Nicht vertrauenswürdigen Origin: ${targetOrigin}`);
    }

    try {
      // Erstelle Nachricht mit Zeitstempel und Nonce
      const message = {
        data,
        timestamp: Date.now(),
        nonce: this.generateNonce(),
      };

      // Signiere die Nachricht
      const signature = await this.signMessage(message);
      const secureMessage = { ...message, signature };

      // Sende via postMessage
      const targetWindow = this.findTargetWindow(targetOrigin);
      if (targetWindow) {
        targetWindow.postMessage(JSON.stringify(secureMessage), targetOrigin);
        return true;
      }

      return false;
    } catch (error) {
      console.error('Fehler beim Senden der sicheren Nachricht:', error);
      return false;
    }
  }

  async verifyAndHandleMessage(event: MessageEvent): Promise<boolean> {
    if (!this.trustedOrigins.has(event.origin)) {
      console.warn(`Nachricht von nicht vertrauenswürdigem Origin: ${event.origin}`);
      return false;
    }

    try {
      const message = JSON.parse(event.data);

      // Verifiziere Zeitstempel (verhindere Replay-Angriffe)
      const age = Date.now() - message.timestamp;
      if (age > 60000) { // Maximales Alter 1 Minute
        console.warn('Nachricht zu alt, potentieller Replay-Angriff');
        return false;
      }

      // Verifiziere Signatur
      const isValid = await this.verifySignature(message);
      if (!isValid) {
        console.warn('Ungültige Nachrichten-Signatur');
        return false;
      }

      // Verarbeite die Nachricht
      this.handleVerifiedMessage(message.data);
      return true;
    } catch (error) {
      console.error('Fehler beim Verifizieren der Nachricht:', error);
      return false;
    }
  }

  private async signMessage(message: any): Promise<string> {
    const encoder = new TextEncoder();
    const data = encoder.encode(JSON.stringify(message));
    const keyData = encoder.encode(this.secretKey);

    const cryptoKey = await crypto.subtle.importKey(
      'raw',
      keyData,
      { name: 'HMAC', hash: 'SHA-256' },
      false,
      ['sign']
    );

    const signature = await crypto.subtle.sign('HMAC', cryptoKey, data);
    return Array.from(new Uint8Array(signature))
      .map(b => b.toString(16).padStart(2, '0'))
      .join('');
  }

  private async verifySignature(message: any): Promise<boolean> {
    const { signature, ...messageWithoutSignature } = message;
    const expectedSignature = await this.signMessage(messageWithoutSignature);
    return signature === expectedSignature;
  }

  private generateNonce(): string {
    const array = new Uint8Array(16);
    crypto.getRandomValues(array);
    return Array.from(array, byte => byte.toString(16).padStart(2, '0')).join('');
  }

  private findTargetWindow(targetOrigin: string): Window | null {
    // Implementierung ähnlich dem vorherigen Beispiel
    return null; // Vereinfacht zur Kürze
  }

  private handleVerifiedMessage(data: any) {
    // Behandle die verifizierte Nachricht
    console.log('Verifizierte Nachricht erhalten:', data);
  }
}

// Schrittweise Migration vom Monolithen zu Micro Frontends
class StranglerFigMigration {
  private routes: Map<string, 'monolith' | 'microfrontend'> = new Map();
  private featureFlags: Map<string, boolean> = new Map();

  constructor(private config: MigrationConfig) {
    this.initializeRoutes();
  }

  private initializeRoutes() {
    // Starte mit allen Routen zum Monolithen
    this.config.allRoutes.forEach(route => {
      this.routes.set(route, 'monolith');
    });

    // Aktiviere schrittweise Micro Frontend-Routen basierend auf Feature Flags
    this.config.microfrontendRoutes.forEach(route => {
      const flagName = `enable_mf_${route.replace(/[^a-zA-Z0-9]/g, '_')}`;
      if (this.featureFlags.get(flagName)) {
        this.routes.set(route, 'microfrontend');
      }
    });
  }

  routeRequest(path: string): 'monolith' | 'microfrontend' {
    // Prüfe zuerst auf exakte Übereinstimmung
    if (this.routes.has(path)) {
      return this.routes.get(path)!;
    }

    // Prüfe auf Pattern-Übereinstimmungen
    for (const [route, target] of this.routes.entries()) {
      if (this.matchesPattern(path, route)) {
        return target;
      }
    }

    // Standard zu Monolith für unbekannte Routen
    return 'monolith';
  }

  migrateRoute(route: string) {
    console.log(`Migriere Route ${route} zu Micro Frontend`);
    this.routes.set(route, 'microfrontend');

    // Logge Migrations-Event für Monitoring
    this.logMigrationEvent(route);
  }

  rollbackRoute(route: string) {
    console.log(`Rollback Route ${route} zu Monolith`);
    this.routes.set(route, 'monolith');

    // Logge Rollback-Event
    this.logRollbackEvent(route);
  }

  private matchesPattern(path: string, pattern: string): boolean {
    // Einfache Wildcard-Matching
    const regex = new RegExp(
      '^' + pattern.replace(/\*/g, '.*').replace(/\?/g, '.') + '
    );
    return regex.test(path);
  }

  private logMigrationEvent(route: string) {
    if (typeof window !== 'undefined' && (window as any).analytics) {
      (window as any).analytics.track('Route Migrated', {
        route,
        timestamp: Date.now(),
      });
    }
  }

  private logRollbackEvent(route: string) {
    if (typeof window !== 'undefined' && (window as any).analytics) {
      (window as any).analytics.track('Route Rolled Back', {
        route,
        timestamp: Date.now(),
      });
    }
  }
}

interface MigrationConfig {
  allRoutes: string[];
  microfrontendRoutes: string[];
}