การจัดการความล้มเหลวในการโหลดแอประยะไกล

In federation, a remote is fetched over the network at run time. That fetch can fail: the server is down, the URL is wrong, or a deploy is mid-flight. Your app must handle it.

Common remote-loading failures include:

• Network timeout fetching remoteEntry.js
• 404 after a remote was redeployed
• Incompatible shared dependency versions
• JavaScript errors during remote bootstrap

Because remotes load via import(), you can catch failures with a standard promise catch.

When a remote fails, render a graceful fallback for just that region — the rest of the page keeps working.

Transient failures often succeed on retry. Attempt the import again a few times with increasing delay before giving up.

For React, pair the import catch with an error boundary so failures during render (not just loading) also show the fallback instead of crashing the page.

404s after deploys often come from overwriting remoteEntry.js in place. Using versioned or content-hashed entry URLs lets old hosts keep loading the version they expect.

A remote that hangs is as bad as one that fails. Race the import against a timeout so users are not stuck waiting indefinitely.

Decide per region how critical it is. A missing recommendations widget can simply disappear, while a missing checkout MFE may warrant a prominent error and support link.

Report which remote failed, the URL, and the error to your monitoring system so the owning team is alerted even if users see only a small fallback.

Encapsulate retry, timeout, fallback, and logging in one reusable loadRemote helper used everywhere remotes are mounted.

You learned to handle remote loading failures:

• Catch failures around dynamic import()
• Show a region-scoped fallback UI
• Add retry with backoff and timeouts
• Use versioned remoteEntry URLs to survive deploys
• Log failures and degrade gracefully

Resilient remote loading keeps the whole app standing when one part fails.