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.