在Module Federation+React中使用Hooks时如何捕获脚本加载错误

针对远程应用不可用时ScriptExternalLoadError导致UI崩溃的问题，核心思路是通过异步加载+错误捕获处理远程Hook，同时提供降级逻辑，避免直接同步导入引发的崩溃。以下是具体实现方案：

1. 异步封装远程Hook加载逻辑 #

不要直接同步导入远程Hook，改用动态import并包裹try/catch，捕获加载失败的情况：

// 封装远程Hook的加载函数
const loadRemoteUseSwitchLanguage = async () => {
  try {
    // 动态导入远程Hook
    const module = await import('bonos/hooks/useSwitchLanguage');
    return module.default;
  } catch (error) {
    console.error('远程Hook加载失败:', error);
    return null; // 返回null标记加载失败
  }
};

2. 在组件中处理加载状态与降级逻辑 #

使用React状态管理加载状态、错误状态和Hook实例，同时提供本地降级Hook：

import { useState, useEffect } from 'react';

const MyComponent = () => {
  const [remoteHook, setRemoteHook] = useState(null);
  const [isLoading, setIsLoading] = useState(true);
  const [loadFailed, setLoadFailed] = useState(false);

  // 加载远程Hook
  useEffect(() => {
    const init = async () => {
      const hook = await loadRemoteUseSwitchLanguage();
      if (hook) {
        setRemoteHook(hook);
      } else {
        setLoadFailed(true);
      }
      setIsLoading(false);
    };
    init();
  }, []);

  // 降级Hook：远程不可用时使用本地默认逻辑
  const fallbackUseSwitchLanguage = () => {
    return {
      switchLanguage: (lang) => console.log(`远程服务不可用，默认切换到${lang}`),
      currentLanguage: 'es'
    };
  };

  // 选择可用的Hook
  const activeHook = remoteHook || fallbackUseSwitchLanguage;
  const { switchLanguage, currentLanguage } = activeHook();

  // 加载中/错误状态展示
  if (isLoading) return <div>加载中...</div>;
  if (loadFailed) return <div>服务暂时不可用，请稍后重试</div>;

  // 正常业务逻辑
  return (
    <div>
      <p>当前语言：{currentLanguage}</p>
      <button onClick={() => switchLanguage('en')}>切换英文</button>
    </div>
  );
};

export default MyComponent;

3. 可选：预检测远程服务可用性 #

在应用初始化时，提前检测远程remoteEntry.js是否可访问，避免无效的加载尝试：

// 预检测远程服务状态
const checkRemoteAvailability = async () => {
  try {
    const response = await fetch('http://localhost:3000/remoteEntry.js');
    return response.ok;
  } catch (error) {
    return false;
  }
};

// 在组件初始化时调用
useEffect(() => {
  const init = async () => {
    const isAvailable = await checkRemoteAvailability();
    if (isAvailable) {
      const hook = await loadRemoteUseSwitchLanguage();
      setRemoteHook(hook);
    } else {
      setLoadFailed(true);
    }
    setIsLoading(false);
  };
  init();
}, []);

4. 进阶：动态Remote配置（Webpack 5+） #

如果使用Webpack 5+，可以将Remote配置改为动态函数，在加载失败时直接返回降级模块：

// 宿主应用ModuleFederationPlugin的remotes配置
remotes: {
  bonos: async () => {
    try {
      const remoteEntry = await fetch('http://localhost:3000/remoteEntry.js');
      if (!remoteEntry.ok) throw new Error('Remote不可用');
      const module = await import('http://localhost:3000/remoteEntry.js');
      return module.lf_sgf_mf_bonos;
    } catch (error) {
      // 返回包含降级Hook的模块
      return {
        get: () => Promise.resolve({
          './hooks/useSwitchLanguage': () => Promise.resolve({
            default: () => ({
              switchLanguage: () => console.log('远程服务不可用，使用默认逻辑'),
              currentLanguage: 'es'
            })
          })
        })
      };
    }
  }
}

这种方式下，后续导入远程Hook时会自动使用降级逻辑，无需在组件中额外处理错误。

内容的提问来源于stack exchange，提问作者Axel León