Обработка сбоя федерации модулей в хост-приложении

Question

Как мы обрабатываем сбои в приложении реакции хоста, когда приложение, которое динамически загружается с использованием федерации модулей, не работает? Я тестирую сценарий, в котором я купил приложение федерации модулей, и тестирование хост-приложения дает эту ошибку: Ошибка загрузки сценария: localhost/remoteentry.js.

Это реальный сценарий, когда приложение, которое, вероятно, будет импортировано, может не работать или иметь проблему.

Answer 1

Вы можете использовать компонент 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не повлияет на хост-приложение.

Answer 2

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