正在处理主机应用程序中的模块联合失败

Question

当使用模块联合动态加载的应用程序关闭时，我们如何处理主机反应应用程序中的故障？我正在测试一个场景，在这个场景中，我购买了模块联合应用程序，并测试主机应用程序，结果出现以下错误：加载脚本失败错误：localhost/remotentry.js.

这是一个真实的场景，可能被导入的应用程序可能会宕机或出现问题。

Answer 1

模块联盟没有内置机制来处理异步负载故障。你必须自己用同样在微前端之外使用的懒惰获取内容的通常机制来做到这一点。例如，在react中，您可以将React.lazy(docs，example(与React.Suspense(docs(一起使用，以提供适当的回退。

Answer 2

您可以使用ErrorBoundary组件来包装您暴露的模块，因此在您托管的应用程序上，您可以拥有：

const MFWrapper = ({ children }) => {
return (
<Suspense fallback="Loading...">
<ErrorBoundary>{children}</ErrorBoundary>
</Suspense>
)
}

const renderMF = (Component) => (
<MFWrapper>
<Component />
</MFWrapper>
)

然后在路由器上：

const ExposedComponent = lazy(() => import('ExposedComponent/ExposedComponent'))
const Routes = () => {
return (
<Switch>
<Route path="*" render={() => renderMF(ExposedComponent)} />
</Switch>
)
}
export default Routes

这样一来，来自ExposedComponent的任何错误都不会影响主机应用程序。