2

I have a 2 React micro-frontend applications, one host and one remote, I'm able to load the remote app into the host using Lazy loading and Module Federation, like this:

const RemoteApp = lazy(() => import("Remote/App"));

export const App = () => (
    <ErrorBoundary>
        <RemoteApp />
    </ErrorBoundary>
);

Notice that I have an ErrorBoundary class to handle errors, so when the remote is not found after a few secons, it displays my custom error message.

But I want to customize the behavior when the remote app is not running.

In the answers of this question I learned that I can use Suspense to display a fallback UI while the remote app is loading so I changed my code like this:

const RemoteApp = lazy(() => import("Remote/App"));

export const App = () => (
    <ErrorBoundary>
        <Suspense fallback={<div>Loading</div>} maxDuration={5000}>
            <RemoteApp />
        </Suspense>
    </ErrorBoundary>
);

But it doesn't have any effect, it still displays a blank page for a few secons and then it displays my custom error message from the ErrorBoundary, it is as if Suspense was not there at all. I also tried adding the ErrorBoundary inside Suspense but it doesn't have any effect either, it is the exact same result.

CIOC
  • 1,385
  • 3
  • 19
  • 48

0 Answers0