Как обрабатывать частичный отказ при падении или недоступности одного из remote-микрофронтов?

В архитектуре микрофронтендов приложение состоит из независимых удалённых модулей, которые загружаются во время выполнения. Если один из таких модулей (например, каталог товаров или панель администратора) падает или становится недоступен, это не должно приводить к полному краху всего приложения. Необходимо реализовать стратегии частичной отказоустойчивости.

Основные стратегии обработки сбоев

• Fallback UI: Самый распространённый подход. При ошибке загрузки или выполнения модуля показывать пользователю резервный интерфейс — сообщение об ошибке, спиннер или упрощённую, но функциональную версию компонента.
• Кеширование: Хранить предыдущую успешно загруженную версию модуля (например, в localStorage или Service Worker) и использовать её при следующей неудачной попытке загрузки.
• Условное скрытие: Если функциональность не критична для основного потока, можно просто скрыть сломанную секцию интерфейса, оставив остальное приложение рабочим.
• Ретри с экспоненциальной задержкой: При временных сетевых сбоях можно предпринять несколько попыток перезагрузки модуля с увеличивающимися паузами между ними.

Практическая реализация

Рассмотрим пример с использованием Webpack Module Federation и React. Нужно обернуть загрузку удалённого модуля в компонент с обработкой ошибок.

import React, { Suspense, lazy, useState, useEffect } from 'react';

const RemoteWidget = () => {
  const [Component, setComponent] = useState(null);
  const [error, setError] = useState(false);

  useEffect(() => {
    // Динамический импорт удалённого модуля
    const loadComponent = async () => {
      try {
        // 'remoteApp' и 'Widget' — конфигурация Module Federation
        const comp = await import('remoteApp/Widget');
        setComponent(() => comp.default);
      } catch (err) {
        console.error('Failed to load remote module:', err);
        setError(true);
        // Здесь можно отправить ошибку в систему мониторинга
      }
    };
    loadComponent();
  }, []);

  if (error) {
    // Fallback UI при ошибке
    return (
      
        Этот раздел временно недоступен. Пожалуйста, попробуйте позже.
         window.location.reload()}>Обновить
      
    );
  }

  if (!Component) {
    // Состояние загрузки
    return Загрузка модуля...;
  }

  return (
    Загрузка...}>
      
    
  );
};

export default RemoteWidget;

На уровне контейнерного приложения также стоит настроить глобальный обработчик ошибок (например, с помощью window.addEventListener('error', ...)) для перехвата неудачных загрузок скриптов.

Где применяется

Данный подход критически важен в крупных распределённых веб-приложениях, где разные команды независимо разрабатывают и деплоят свои части. Он обеспечивает устойчивость и бесперебойность работы для конечного пользователя даже при сбоях в отдельных сервисах.

Вывод: Обработка частичных отказов — обязательная практика для production-приложений на микрофронтендах. Она позволяет изолировать сбои, сохраняя работоспособность основной функциональности, и улучшает пользовательский опыт. Используйте fallback-интерфейсы и мониторинг ошибок для ключевых удалённых модулей.