// Your host loads a remote — it crashes. The ENTIRE app goes blank. const ProductList = React . lazy (() => import ( " Products/ProductList " ));

// Fix: Add .catch() to prevent cascading failures const ProductList = React . lazy (() => import ( " Products/ProductList " ). catch (( err ) => ({ default : () => < div > Products module unavailable < /div> , })) );

This is one of the patterns most teams miss when setting up Module Federation. The host app and remote apps have very different responsibilities, and getting the architecture wrong leads to cascading failures, permission gaps, and production deploy issues.

Article 13 in my Micro Frontend series covers:

Host app architecture — Layout shell, routing, Redux Provider, and bootstrap pattern

Remote app structure — Standalone development on isolated ports (4001-4011)

Error handling — Two layers: .catch() for load failures + ErrorBoundary for render failures

Permission-based routing — Check Redux store permissions before loading…