wu-framework 1.0.0

package/src/core/wu-error-boundary.js

@@ -0,0 +1,380 @@
+/**
+ * 🛡️ WU-ERROR-BOUNDARY: ADVANCED ERROR HANDLING
+ *
+ * Sistema de error boundaries con:
+ * - Chain of Responsibility pattern
+ * - Recovery strategies
+ * - Error classification
+ * - Fallback rendering
+ */
+
+export class WuErrorBoundary {
+  constructor(core) {
+    this.core = core;
+    this.handlers = [];
+    this.errorLog = [];
+    this.maxErrorLog = 100;
+
+    this.config = {
+      maxRetries: 3,
+      retryDelay: 1000,
+      showErrorUI: true
+    };
+
+    this.registerDefaultHandlers();
+
+    console.log('[WuErrorBoundary] 🛡️ Error boundary initialized');
+  }
+
+  /**
+   * 📋 REGISTER DEFAULT HANDLERS: Chain of responsibility
+   */
+  registerDefaultHandlers() {
+    // 1. Network Error Handler
+    this.register({
+      name: 'network',
+      canHandle: (error) => {
+        return error.name === 'TypeError' &&
+               (error.message.includes('fetch') || error.message.includes('network'));
+      },
+      handle: async (error, context) => {
+        console.log('[ErrorHandler:Network] Handling network error');
+
+        // Retry con backoff
+        if (context.retryCount < this.config.maxRetries) {
+          const delay = this.config.retryDelay * Math.pow(2, context.retryCount);
+          console.log(`[ErrorHandler:Network] Retrying in ${delay}ms...`);
+
+        await new Promise(resolve => setTimeout(resolve, delay));
+
+          return {
+            recovered: true,
+            action: 'retry',
+            retryCount: context.retryCount + 1
+          };
+        }
+
+        return {
+          recovered: false,
+          action: 'fallback',
+          message: 'Network error: Please check your connection'
+        };
+      }
+    });
+
+    // 2. Script Load Error Handler
+    this.register({
+      name: 'script-load',
+      canHandle: (error) => {
+        return error.name === 'Error' &&
+               (error.message.includes('Loading') ||
+                error.message.includes('Failed to fetch'));
+      },
+      handle: async (error, context) => {
+        console.log('[ErrorHandler:ScriptLoad] Handling script load error');
+
+        // Intentar URL alternativa si existe
+        if (context.fallbackUrl) {
+          console.log('[ErrorHandler:ScriptLoad] Trying fallback URL');
+          return {
+            recovered: true,
+            action: 'use-fallback-url',
+            url: context.fallbackUrl
+          };
+        }
+
+        return {
+          recovered: false,
+          action: 'fallback',
+          message: 'Failed to load microfrontend'
+        };
+      }
+    });
+
+    // 3. Mount Error Handler
+    this.register({
+      name: 'mount',
+      canHandle: (error) => {
+        return error.message && error.message.includes('mount');
+      },
+      handle: async (error, context) => {
+        console.log('[ErrorHandler:Mount] Handling mount error');
+
+        // Limpiar y reintentar
+        if (context.retryCount < 2) {
+          console.log('[ErrorHandler:Mount] Cleaning up and retrying...');
+
+          // Cleanup
+          try {
+            await this.core.unmount(context.appName);
+          } catch (cleanupError) {
+            console.warn('[ErrorHandler:Mount] Cleanup failed:', cleanupError);
+          }
+
+          await new Promise(resolve => setTimeout(resolve, 500));
+
+          return {
+            recovered: true,
+            action: 'retry',
+            retryCount: context.retryCount + 1
+          };
+        }
+
+        return {
+          recovered: false,
+          action: 'fallback',
+          message: 'Failed to mount application'
+        };
+      }
+    });
+
+    // 4. Timeout Error Handler
+    this.register({
+      name: 'timeout',
+      canHandle: (error) => {
+        return error.name === 'TimeoutError' ||
+               error.message.includes('timeout');
+      },
+      handle: async (error, context) => {
+        console.log('[ErrorHandler:Timeout] Handling timeout error');
+
+        // Aumentar timeout y reintentar
+        if (context.retryCount < 2) {
+          return {
+            recovered: true,
+            action: 'retry-with-longer-timeout',
+            timeout: (context.timeout || 5000) * 2,
+            retryCount: context.retryCount + 1
+          };
+        }
+
+        return {
+          recovered: false,
+          action: 'fallback',
+          message: 'Operation timed out'
+        };
+      }
+    });
+
+    // 5. Generic Error Handler (fallback)
+    this.register({
+      name: 'generic',
+      canHandle: () => true, // Maneja todo
+      handle: async (error, context) => {
+        console.log('[ErrorHandler:Generic] Handling generic error');
+
+        return {
+          recovered: false,
+          action: 'fallback',
+          message: error.message || 'An unexpected error occurred'
+        };
+      }
+    });
+  }
+
+  /**
+   * 📦 REGISTER: Registrar error handler
+   * @param {Object} handler - Error handler { name, canHandle, handle }
+   */
+  register(handler) {
+    if (!handler.name || !handler.canHandle || !handler.handle) {
+      throw new Error('[WuErrorBoundary] Handler must have name, canHandle, and handle');
+    }
+
+    this.handlers.push(handler);
+    console.log(`[WuErrorBoundary] Handler "${handler.name}" registered`);
+  }
+
+  /**
+   * 🎯 HANDLE: Manejar error con chain of responsibility
+   * @param {Error} error - Error a manejar
+   * @param {Object} context - Contexto del error
+   * @returns {Promise<Object>} Recovery result
+   */
+  async handle(error, context = {}) {
+    // Agregar valores por defecto
+    context = {
+      retryCount: 0,
+      timestamp: Date.now(),
+      ...context
+    };
+
+    // Log error
+    this.logError(error, context);
+
+    // Buscar handler que pueda manejar este error
+    for (const handler of this.handlers) {
+      try {
+        if (handler.canHandle(error, context)) {
+          console.log(`[WuErrorBoundary] Using handler: ${handler.name}`);
+
+          const result = await handler.handle(error, context);
+
+          if (result.recovered) {
+            console.log(`[WuErrorBoundary] ✅ Error recovered by ${handler.name}`);
+            return result;
+          }
+
+          // Si no se recuperó, renderizar fallback
+          if (result.action === 'fallback' && this.config.showErrorUI) {
+            this.renderFallback(context, result);
+          }
+
+          return result;
+        }
+      } catch (handlerError) {
+        console.error(`[WuErrorBoundary] Handler "${handler.name}" failed:`, handlerError);
+      }
+    }
+
+    // No handler pudo manejar el error
+    console.error('[WuErrorBoundary] ❌ No handler could handle the error');
+
+    return {
+      recovered: false,
+      action: 'unhandled',
+      message: 'Unhandled error'
+    };
+  }
+
+  /**
+   * 🎨 RENDER FALLBACK: Renderizar UI de error
+   * @param {Object} context - Contexto del error
+   * @param {Object} result - Resultado del handler
+   */
+  renderFallback(context, result) {
+    if (!context.container) {
+      console.warn('[WuErrorBoundary] No container to render fallback');
+      return;
+    }
+
+    const container = typeof context.container === 'string'
+      ? document.querySelector(context.container)
+      : context.container;
+
+    if (!container) return;
+
+    // Limpiar container
+    container.innerHTML = '';
+
+    // Crear UI de error
+    const errorUI = document.createElement('div');
+    errorUI.className = 'wu-error-boundary';
+
+    Object.assign(errorUI.style, {
+      padding: '2rem',
+      borderRadius: '8px',
+      background: '#fff3cd',
+      border: '1px solid #ffc107',
+      color: '#856404',
+      fontFamily: 'system-ui, -apple-system, sans-serif',
+      textAlign: 'center'
+    });
+
+    const icon = document.createElement('div');
+    icon.textContent = '⚠️';
+    icon.style.fontSize = '3rem';
+    icon.style.marginBottom = '1rem';
+
+    const title = document.createElement('h3');
+    title.textContent = 'Application Error';
+    title.style.margin = '0 0 0.5rem 0';
+
+    const message = document.createElement('p');
+    message.textContent = result.message || 'An error occurred';
+    message.style.margin = '0 0 1rem 0';
+
+    const button = document.createElement('button');
+    button.textContent = '🔄 Reload';
+    Object.assign(button.style, {
+      padding: '0.5rem 1rem',
+      background: '#ffc107',
+      border: 'none',
+      borderRadius: '4px',
+      cursor: 'pointer',
+      fontWeight: 'bold',
+      color: '#000'
+    });
+
+    button.addEventListener('click', () => window.location.reload());
+
+    errorUI.appendChild(icon);
+    errorUI.appendChild(title);
+    errorUI.appendChild(message);
+    errorUI.appendChild(button);
+
+    container.appendChild(errorUI);
+  }
+
+  /**
+   * 📝 LOG ERROR: Registrar error
+   * @param {Error} error - Error
+   * @param {Object} context - Contexto
+   */
+  logError(error, context) {
+    const errorEntry = {
+      error: {
+        name: error.name,
+        message: error.message,
+        stack: error.stack
+      },
+      context,
+      timestamp: Date.now()
+    };
+
+    this.errorLog.push(errorEntry);
+
+    // Mantener límite de log
+    if (this.errorLog.length > this.maxErrorLog) {
+      this.errorLog.shift();
+    }
+  }
+
+  /**
+   * 📋 GET ERROR LOG: Obtener log de errores
+   * @param {number} limit - Límite de errores a retornar
+   * @returns {Array}
+   */
+  getErrorLog(limit = 10) {
+    return this.errorLog.slice(-limit);
+  }
+
+  /**
+   * 📊 GET STATS: Estadísticas de errores
+   * @returns {Object}
+   */
+  getStats() {
+    const errorsByType = {};
+
+    this.errorLog.forEach(entry => {
+      const type = entry.error.name || 'Unknown';
+      errorsByType[type] = (errorsByType[type] || 0) + 1;
+    });
+
+    return {
+      totalErrors: this.errorLog.length,
+      handlers: this.handlers.length,
+      errorsByType,
+      recentErrors: this.getErrorLog(5)
+    };
+  }
+
+  /**
+   * ⚙️ CONFIGURE: Configurar error boundary
+   * @param {Object} config - Nueva configuración
+   */
+  configure(config) {
+    this.config = {
+      ...this.config,
+      ...config
+    };
+  }
+
+  /**
+   * 🧹 CLEANUP: Limpiar error boundary
+   */
+  cleanup() {
+    this.errorLog = [];
+    console.log('[WuErrorBoundary] 🧹 Error boundary cleaned up');
+  }
+}

package/src/core/wu-event-bus.js

@@ -0,0 +1,257 @@
+/**
+ * 📡 WU-EVENT-BUS: ADVANCED PUB/SUB SYSTEM
+ *
+ * Sistema de eventos para comunicación entre microfrontends
+ * - Pub/Sub pattern
+ * - Event namespaces
+ * - Wildcards
+ * - Event replay
+ * - Performance optimizado
+ */
+
+export class WuEventBus {
+  constructor() {
+    this.listeners = new Map(); // eventName -> Set<callback>
+    this.history = []; // Event history para replay
+    this.config = {
+      maxHistory: 100,
+      enableReplay: true,
+      enableWildcards: true,
+      logEvents: false
+    };
+
+    this.stats = {
+      emitted: 0,
+      subscriptions: 0
+    };
+
+    console.log('[WuEventBus] 📡 Advanced event bus initialized');
+  }
+
+  /**
+   * 📢 EMIT: Emitir evento
+   * @param {string} eventName - Nombre del evento
+   * @param {*} data - Datos del evento
+   * @param {Object} options - Opciones { appName, timestamp, meta }
+   */
+  emit(eventName, data, options = {}) {
+    const event = {
+      name: eventName,
+      data,
+      timestamp: options.timestamp || Date.now(),
+      appName: options.appName || 'unknown',
+      meta: options.meta || {}
+    };
+
+    // Agregar a historial
+    if (this.config.enableReplay) {
+      this.addToHistory(event);
+    }
+
+    // Log si está habilitado
+    if (this.config.logEvents) {
+      console.log(`[WuEventBus] 📢 ${eventName}`, data);
+    }
+
+    // Notificar listeners exactos
+    const exactListeners = this.listeners.get(eventName);
+    if (exactListeners) {
+      exactListeners.forEach(callback => {
+        try {
+          callback(event);
+        } catch (error) {
+          console.error(`[WuEventBus] ❌ Error in listener for ${eventName}:`, error);
+        }
+      });
+    }
+
+    // Notificar listeners con wildcards
+    if (this.config.enableWildcards) {
+      this.notifyWildcardListeners(eventName, event);
+    }
+
+    this.stats.emitted++;
+  }
+
+  /**
+   * 👂 ON: Suscribirse a evento
+   * @param {string} eventName - Nombre del evento (puede usar wildcards: 'app.*', '*.update')
+   * @param {Function} callback - Callback a ejecutar
+   * @returns {Function} Función para desuscribirse
+   */
+  on(eventName, callback) {
+    if (!this.listeners.has(eventName)) {
+      this.listeners.set(eventName, new Set());
+    }
+
+    this.listeners.get(eventName).add(callback);
+    this.stats.subscriptions++;
+
+    // Retornar función de desuscripción
+    return () => this.off(eventName, callback);
+  }
+
+  /**
+   * 🔇 OFF: Desuscribirse de evento
+   * @param {string} eventName - Nombre del evento
+   * @param {Function} callback - Callback a remover
+   */
+  off(eventName, callback) {
+    const listeners = this.listeners.get(eventName);
+    if (listeners) {
+      listeners.delete(callback);
+
+      // Limpiar si no quedan listeners
+      if (listeners.size === 0) {
+        this.listeners.delete(eventName);
+      }
+
+      this.stats.subscriptions--;
+    }
+  }
+
+  /**
+   * 🎯 ONCE: Suscribirse una sola vez
+   * @param {string} eventName - Nombre del evento
+   * @param {Function} callback - Callback a ejecutar
+   * @returns {Function} Función para desuscribirse
+   */
+  once(eventName, callback) {
+    const wrappedCallback = (event) => {
+      callback(event);
+      this.off(eventName, wrappedCallback);
+    };
+
+    return this.on(eventName, wrappedCallback);
+  }
+
+  /**
+   * 🌟 WILDCARD LISTENERS: Notificar listeners con wildcards
+   * @param {string} eventName - Nombre del evento emitido
+   * @param {Object} event - Objeto del evento
+   */
+  notifyWildcardListeners(eventName, event) {
+    for (const [pattern, listeners] of this.listeners) {
+      if (this.matchesWildcard(eventName, pattern)) {
+        listeners.forEach(callback => {
+          try {
+            callback(event);
+          } catch (error) {
+            console.error(`[WuEventBus] ❌ Error in wildcard listener for ${pattern}:`, error);
+          }
+        });
+      }
+    }
+  }
+
+  /**
+   * 🎯 MATCHES WILDCARD: Verificar si evento coincide con patrón wildcard
+   * @param {string} eventName - Nombre del evento
+   * @param {string} pattern - Patrón con wildcards
+   * @returns {boolean}
+   */
+  matchesWildcard(eventName, pattern) {
+    // Si no hay wildcard, ya se procesó en listeners exactos
+    if (!pattern.includes('*')) return false;
+
+    // Convertir pattern a regex
+    const regexPattern = pattern
+      .replace(/\./g, '\\.')
+      .replace(/\*/g, '.*');
+
+    const regex = new RegExp(`^${regexPattern}$`);
+    return regex.test(eventName);
+  }
+
+  /**
+   * 📝 ADD TO HISTORY: Agregar evento al historial
+   * @param {Object} event - Evento
+   */
+  addToHistory(event) {
+    this.history.push(event);
+
+    // Mantener tamaño máximo
+    if (this.history.length > this.config.maxHistory) {
+      this.history.shift();
+    }
+  }
+
+  /**
+   * 🔄 REPLAY: Reproducir eventos del historial
+   * @param {string} eventNameOrPattern - Nombre o patrón de eventos a reproducir
+   * @param {Function} callback - Callback para cada evento
+   */
+  replay(eventNameOrPattern, callback) {
+    const events = this.history.filter(event => {
+      if (eventNameOrPattern.includes('*')) {
+        return this.matchesWildcard(event.name, eventNameOrPattern);
+      }
+      return event.name === eventNameOrPattern;
+    });
+
+    console.log(`[WuEventBus] 🔄 Replaying ${events.length} events for ${eventNameOrPattern}`);
+
+    events.forEach(event => {
+      try {
+        callback(event);
+      } catch (error) {
+        console.error(`[WuEventBus] ❌ Error replaying event:`, error);
+      }
+    });
+  }
+
+  /**
+   * 🧹 CLEAR HISTORY: Limpiar historial de eventos
+   * @param {string} eventNameOrPattern - Patrón de eventos a limpiar (opcional)
+   */
+  clearHistory(eventNameOrPattern) {
+    if (!eventNameOrPattern) {
+      this.history = [];
+      console.log('[WuEventBus] 🧹 Event history cleared');
+      return;
+    }
+
+    this.history = this.history.filter(event => {
+      if (eventNameOrPattern.includes('*')) {
+        return !this.matchesWildcard(event.name, eventNameOrPattern);
+      }
+      return event.name !== eventNameOrPattern;
+    });
+  }
+
+  /**
+   * 📊 GET STATS: Obtener estadísticas
+   * @returns {Object}
+   */
+  getStats() {
+    return {
+      ...this.stats,
+      activeListeners: this.listeners.size,
+      historySize: this.history.length,
+      listenersByEvent: Array.from(this.listeners.entries()).map(([event, listeners]) => ({
+        event,
+        listeners: listeners.size
+      }))
+    };
+  }
+
+  /**
+   * ⚙️ CONFIGURE: Configurar event bus
+   * @param {Object} config - Nueva configuración
+   */
+  configure(config) {
+    this.config = {
+      ...this.config,
+      ...config
+    };
+  }
+
+  /**
+   * 🗑️ REMOVE ALL: Remover todos los listeners
+   */
+  removeAll() {
+    this.listeners.clear();
+    this.stats.subscriptions = 0;
+    console.log('[WuEventBus] 🗑️ All listeners removed');
+  }
+}