失败网络调用的Webpack5模块联合回退

Question

我最近制作了一个联合模块主机，用于联合站点的页眉和页脚。一切都像预期的那样工作，但是如果对联邦主机的请求失败，我会尝试构建一些后备机制。

new ModuleFederationPlugin({
      name: 'app',
      remotes: {
        app2: 'app2@https:/example.com/remoteEntry.js',
        
      },
      shared: { react: { singleton: true, eager: true }, 'react-dom': { singleton: true, eager: true } },
    }),

如果我阻止对https:/example.com/remoteEntry.js的请求，我会收到下面的webpack错误。理想情况下，我想加载一个基本的后备标头或只是没有标头比页面完全死亡

(error: https://example.com/remoteEntry.js1)
while loading "./Footer" from webpack/container/reference/app2

Answer 1

我找到了一个决定。

查看这篇文章https://habr.com/ru/post/554682/ -这篇文章是俄语的，但你可以使用翻译器。

注意钩子- useDynamicScript和处理程序onload和onerror

重点是独立地检查它是否可以从远程主机上获得remoteEntry.js。如果remoteEntry.js不可用，请不要下载远程组件，否则请尝试下载。在这种情况下，组件加载的概率非常高。

但是，如果在加载remoteEntry.js时出现错误，我们将对其进行处理，并且不会将错误抛出到控制台。