Micro-Frontends Architecture with Module Federation (2025)

Oct 26, 2025•

micro-frontendsmodule-federationfrontendarchitecture

•

Micro-frontends enable teams to ship independently at scale. This guide covers architecture choices and Module Federation patterns.

Executive summary

Compose at route/layout boundaries; keep shared state minimal
Version and isolate shared libs; use adapters for design systems
Monitor performance budgets per MFE; enforce contracts

Composition

Shell app + remotes; SSR where possible; fallbacks for failures

Shared state

Avoid global mutable state; event buses/contracts for communication

Single router vs shared events; deep-linking; accessibility and focus management across MFEs

Security

CSP, sandboxing, origin policies; limit cross-MFE privileges

Performance

Prefetch critical MFEs; split by usage; cache aggressively; measure INP/CLS per MFE

FAQ

Q: When to avoid micro-frontends?
A: If team count and domain complexity don't justify the overhead; prefer modular monoliths.

RSC Next.js: /blog/react-server-components-complete-guide-nextjs-14-15
Core Web Vitals: /blog/web-performance-optimization-core-web-vitals-2025
PWAs Offline‑First: /blog/progressive-web-apps-offline-first-architecture-2025
React Patterns: /blog/react-design-patterns-hooks-context-state-management
GraphQL Federation: /blog/graphql-federation-microservices-api-gateway-2025

Call to action

Designing a micro‑frontends platform? Request an architecture review.
Contact: /contact • Newsletter: /newsletter

Micro-Frontends Architecture: Module Federation and Beyond (2025)

A practical guide to designing, shipping, and operating micro-frontends (MFEs) at scale with Webpack Module Federation, Web Components, import maps, and edge/server composition.

1) Why Micro-Frontends

Independent deployability by teams
Tech autonomy with bounded contracts
Incremental modernization and migration
Risk isolation and faster experiments

2) Composition Patterns

- Client-Side Composition
  - Webpack Module Federation (host + remotes)
  - Import Maps + ES Modules
  - Web Components (custom elements)
  - iFrames (strong isolation, heavier)

- Server-Side/Edge Composition
  - SSR stream injection of MFE islands
  - Edge includes (HTML partials, fragments)
  - Proxy routing + HTML rewriting

3) Module Federation (Webpack 5) — Concepts

- Host: consumes exposed modules from remotes
- Remote: exposes modules via federation runtime
- Shared: libraries de-duplicated at runtime with version negotiation
- Eager vs lazy: load-time vs on-demand

4) Host/Remote Config (Sketch)

// webpack.config.js (host)
new ModuleFederationPlugin({
  name: 'shell',
  remotes: {
    account: 'account@https://cdn.example.com/account/remoteEntry.js',
    checkout: 'checkout@https://cdn.example.com/checkout/remoteEntry.js',
  },
  shared: {
    react: { singleton: true, requiredVersion: '^18.2.0' },
    'react-dom': { singleton: true, requiredVersion: '^18.2.0' },
  },
});

// webpack.config.js (remote)
new ModuleFederationPlugin({
  name: 'account',
  filename: 'remoteEntry.js',
  exposes: {
    './Routes': './src/routes',
    './ProfileWidget': './src/components/ProfileWidget',
  },
  shared: {
    react: { singleton: true, requiredVersion: '^18.2.0' },
    'react-dom': { singleton: true, requiredVersion: '^18.2.0' },
  },
});

5) Next.js + Module Federation

- Next.js 13/14/15 app router with RSC: limit shared client components
- SSR streaming: inject federated islands after shell renders
- Route-level federation: mount remotes on segment boundaries

- Single spa shell router (React Router/Next) maps paths → MFE mounts
- Preserve browser history; avoid nested routers unless isolated
- Cross-MFE links use shell link component to avoid full reload

7) Shared State and Contracts

- Avoid global mutable state; prefer events and small shared services
- Contracts: typed interfaces for props, events, and data shapes
- Use versioned design tokens and utilities; avoid deep runtime coupling

8) Design System and CSS Isolation

- Token-driven design system published as versioned package
- CSS isolation: CSS Modules, Shadow DOM (Web Components), BEM
- Theming via CSS variables; dark mode opt-in per MFE

9) Performance and Loading

- Preload remoteEntry; lazy-load pages and heavy widgets
- Shared vendor chunks (react, libs) as singletons; avoid duplicates
- HTTP/2 or HTTP/3 for better multiplexing; CDN cache remotes aggressively

10) Versioning and Compatibility

- Semantic versioning of exposed APIs; backwards-compatible additions
- Shared libs with strict ranges; hard fail on incompatible major
- Feature flags for runtime capability detection

11) Security

- CSP: script-src with nonces/hashes; connect-src for remote hosts
- SRI for remoteEntry and assets where feasible
- Sandbox: iframes for untrusted MFEs; message channels with validation
- Supply chain: signed bundles, SBOM, provenance (SLSA) for MFEs

12) Observability

- Correlation ID from shell → remotes (headers, context)
- Traces: user → shell → remote render; span attributes: mfe.name, version
- Metrics: TTI, LCP per route; widget load times; error rates per MFE
- Logs: structured with MFE name/version; PII redaction

13) Deployment and CI/CD

- Independent pipelines per MFE; contract checks; visual diffs
- Publish to CDN with immutable URLs (content hash) + stable alias
- Canary per remote via percent rollout; fast rollback to last-good
- Shell compatibility tests against latest N versions of remotes

14) SSR, Edge, and RSC

- Server includes: render critical HTML; hydrate islands lazily
- RSC boundaries: keep remotes as client components unless server-safe
- Edge composition: small HTML fragments injected at CDN/edge

15) SEO

- Pre-render critical content; ensure canonical URLs and meta
- Avoid client-only critical content; use SSR/SG for landing pages

16) Testing Strategy

- Unit: component props/contracts and utils
- Integration: shell + remote mounts with mocks
- Contract: consumer-driven tests for exposed modules (props, events)
- E2E: critical journeys across MFEs; visual regression per route

17) Resilience and Fallbacks

- Timeouts and placeholders; skeletons for deferred widgets
- Error boundaries isolate remote failures; degrade gracefully
- Lazy hydration on interaction to reduce initial cost

18) Governance and Ownership

- Each MFE has owner, on-call, SLOs (p95, error rate), and error budget
- Design system ownership; change RFCs; version adoption timelines

19) Monorepo vs Polyrepo

- Monorepo: unified tooling, easy refactors, strong contracts via types
- Polyrepo: autonomy per team; higher integration cost; requires registry
- Hybrid: platform monorepo + app polyrepos

20) Accessibility and i18n

- A11y: roles, focus order, keyboard traps avoided, color contrast
- i18n: ICU messages; right-to-left support; locale shared context

21) Examples (Sketch)

// Shell mounts a remote route
const AccountRoutes = React.lazy(() => import('account/Routes'));

// Remote exposes widget
export const ProfileWidget = ({ userId }: { userId: string }) => {
  // fetch data; render card; fire events
  return <div data-mfe="account-profile">...</div>;
};

22) Contracts (Types)

// packages/contracts/src/profile.ts
export interface ProfileWidgetProps { userId: string; onError?: (e: Error) => void }
export interface Profile { id: string; name: string; avatarUrl?: string }

23) Visual Regression and Design Tokens

- Chromatic/Playwright snapshots per MFE; token diffs; dark mode

24) Cache and CDN Strategy

- Immutable hash for remoteEntry and chunks; long TTL; purge aliases on rollback
- Preload critical chunks; HTTP/2 push (or 103 Early Hints)

25) Edge Composition (HTML Fragments)

- SSI-like includes with signed fragment requests; cache and invalidate

26) Security Reviews

- Threat modeling per MFE; boundary checks; CSP reports; dependency audits

27) RUM and Core Web Vitals

- Measure LCP/INP/CLS per route and per MFE; attribute regressions

28) Failure Modes

- RemoteEntry 404/cors; version mismatch; shared lib conflict; SSR mismatch
- Playbooks: fallback to prior alias; disable widget; rollback shell

29) Migration Patterns

- Strangler fig: route by route; legacy shell embeds new remotes
- Backend-for-frontend replaced by federated host gradually

30) SLOs and Alerts (Sketch)

- alert: MFEErrorRateHigh
  expr: sum(rate(frontend_errors_total{mfe!="shell"}[5m])) by (mfe) > 0.02
  for: 15m
- alert: MFE_LCP_Regression
  expr: increase(rum_lcp_ms_sum[1h]) / increase(rum_lcp_ms_count[1h]) > 2500
  for: 1h

31) Dashboards (Sketch JSON)

{
  "title": "Micro-Frontends Overview",
  "panels": [
    {"type":"table","title":"MFE Versions Live"},
    {"type":"graph","title":"Widget Load Times"},
    {"type":"table","title":"Top Errors by MFE"}
  ]
}

32) Mega FAQ (1–400)

Should I start with Module Federation?
Yes for client composition; consider server/edge for SEO paths.
Can I mix Web Components and Federation?
Yes—use components as contract boundary; load via federation.
How do I avoid shared lib conflicts?
Singletons + strict versions + CI contract checks.
What about Next.js RSC?
Keep MFEs as client components unless server-safe; SSR islands.
Are iframes dead?
Useful for untrusted content and hard isolation.

...

33) More Patterns (401–800)

- Host prefetch heuristics; variant tests per MFE; progressive hydration
- Error sampling by MFE; ownership annotations in logs and traces
- Dependency budgets per MFE; bundle size PR checks

34) Contracts Testing (Example)

// consumer test ensures remote exposes expected API shape
import type { ProfileWidgetProps } from '@contracts/profile';

35) Release Trains

- Weekly trains for shell; remotes canaries continuously
- Evidence bundles: perf, error rate, size deltas

36) CDN and Security Headers

- Strict-Transport-Security, COOP/COEP for isolation, CORP, CSP with nonces

37) Accessibility Deep Dive

- Focus management on route change; skip links; screen reader announcements

38) i18n Deep Dive

- Locale negotiation at shell; remotes consume via context; ICU pluralization

39) Analytics and Privacy

- Consistent event schema; avoid PII; consent gating; regional routing

40) Case Studies (Brief)

- Retail: account, search, cart, checkout as remotes; 40% faster releases
- SaaS: settings and billing decoupled; independent on-call

41) Templates and CLI

- Scaffold remote with contracts; preconfigured CI; CSP and headers baked in

42) Incident Playbooks

- Remote outage: disable via feature flag; serve skeleton; rollback alias
- Version conflict: block deploy; pin shared; redeploy shell

43) Closing Principles

- Small contracts, strong isolation, observable experiences, and quick rollbacks

JSON-LD

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "Micro-Frontends Architecture with Module Federation (2025)",
  "description": "Designing, deploying, and operating micro-frontends at scale with Module Federation, Web Components, and edge/server composition.",
  "datePublished": "2025-10-28",
  "dateModified": "2025-10-28",
  "author": {"@type":"Person","name":"Elysiate"}
}
</script>

CTA

Need a safe, scalable micro-frontends platform? We build module federation shells, contracts, CI, and observability with fast rollbacks.

Appendix AA — Runtime Integration Patterns

- Shell services: auth, analytics, feature flags, i18n
- Contracts: minimal stable APIs, versioned and typed
- Event bus: custom events with payload schemas and ownership
- Error boundaries per remote; telemetry hooks

Appendix AB — Version Negotiation

- Shared singletons with strict ranges; fail fast on major mismatches
- Capabilities API: remotes declare supported contracts
- Canary variants: serve subset of users; compare KPIs

Appendix AC — Asset Delivery and Caching

- Immutable hashed filenames; aliases for rollback
- CDN with long TTL; purge aliases not immutable assets
- Preload critical assets; defer non-critical widgets

Appendix AD — Performance Budgets

- Budget per MFE: JS KB, CSS KB, LCP target, INP threshold
- PR checks break on regressions; exceptions with expiry only

Appendix AE — Accessibility and UX

- Focus management on route change; landmarks
- Keyboard nav across MFEs; skip-to-content; ARIA live regions

Appendix AF — SEO and Indexing

- SSR main content; lazy islands
- Canonicals per route; JSON-LD in shell or remote with guardrails

Appendix AG — Security Hardening

- CSP with nonces; Trusted Types where supported
- SRI for remoteEntry if build allows; subresource isolation (COOP/COEP)
- Dependency provenance: SBOM, signed bundles, registry policies

Appendix AH — Observability Details

- Span attributes: mfe.name, mfe.version, route, user_tier
- Metrics: widget load, error rate, hydration time, long tasks
- Logs: structured, sampled, PII redacted

Appendix AI — SSR and Streaming

- Stream shell HTML; placeholders for islands; hydrate on idle or interaction
- Edge workers inject fragments; personalized data via cookies/headers

Appendix AJ — Design Tokens and Theming

- Versioned tokens; CSS variables; theming context shared via shell
- Testing: token diff snapshots; a11y color contrast checks

- Avoid global stores; pass props; event-driven updates
- For auth/profile: read-only hooks to a shell-owned cache

Appendix AL — Error Isolation

- Error boundaries per mount; user-friendly fallbacks
- Circuit breaker to hide unstable widgets; retry on idle

Appendix AM — Data Fetching

- Remotes fetch via shell adapters; standardized client; cache keys
- Edge caching for GETs; SSR prefetch for landing pages

Appendix AN — Feature Flags

- Flags in shell; remote reads; server-verified for security-sensitive
- PR checks require flag removal plan and expiry date

Appendix AO — Bundle Governance

- Disallow heavy deps per MFE; shared lib allowlist
- Track size per route and MFE; regressions blocked

Appendix AP — LCP/INP Improvement

- Prioritize hero content in shell; defer non-critical
- Reduce hydration cost; server-render skeletons

Appendix AQ — Resilience at Edge

- Edge fallback to cached prior remoteEntry
- Serve shell-only with CTAs when remotes fail

Appendix AR — Security Reviews

- Threat model MFEs and boundaries; verify postMessage channels
- Dependency audit gates; SAST/DAST on remotes

Appendix AS — Multi-Repo CI Templates

name: remote-ci
on: [pull_request]
jobs:
  build:
    steps:
      - uses: actions/checkout@v4
      - run: pnpm i && pnpm build && pnpm test
  sizecheck:
    steps:
      - run: pnpm size-limit

Appendix AT — Shell CI Templates

name: shell-ci
on: [pull_request]
jobs:
  contracts:
    steps:
      - run: pnpm contracts:check
  e2e:
    steps:
      - run: pnpm e2e:smoke

Appendix AU — Release and Rollback

- Publish immutable remotes; update alias after bake time
- Rollback by pointing alias to last-good; purge CDN alias

Appendix AV — SLOs and Error Budgets

- p95 page LCP < 2.5s; widget error rate < 1%
- Burn policies: freeze risky changes when budgets breach

Appendix AW — Visual QA

- Per-MFE visual snapshots; dark mode; RTL
- Gate changes with visual diffs; owners approve

Appendix AX — i18n and RTL

- ICU messages; bidi-safe components; locale-specific fonts

- Consent gating for analytics; regional data routing; minimization

Appendix AZ — Governance Dashboards

{
  "title": "MFE Governance",
  "panels": [
    {"type":"table","title":"MFE Owners & SLOs"},
    {"type":"graph","title":"Error Budget Burn"}
  ]
}

Appendix BA — Edge A/B and Cohorts

- Edge selects variants; flags drive remote selection; observe impact

Appendix BB — Security Headers

- HSTS, COOP/COEP, CORP, CSP; isolate risky remotes via iframes

Appendix BC — Cache Invalidation

- Invalidate alias; keep immutable cached; TTL policies per asset class

Appendix BD — Progressive Enhancement

- Shell delivers basic UX; remotes enhance; no blank pages on failures

Appendix BE — Edge Errors and Retries

- Retry remoteEntry fetch once with jitter; then fallback

Appendix BF — DX Tooling

- CLI: scaffold remote, link contracts, preview shell, bundle analyze

Appendix BG — Monorepo Tooling

- Nx/Turborepo cache; affected graph; incremental builds

Appendix BH — Import Maps

<script type="importmap">
{ "imports": { "react": "/shared/react-18.2.mjs" } }
</script>

Appendix BI — Web Components Integration

- Shadow DOM for style isolation; events for integration; SSR wrappers

Appendix BJ — Module Federation v2+ Notes

- Improved shared negotiation; async boundaries; partial SSR support

Appendix BK — Server Composition Frameworks

- Edge streams; HTML fragments; proxy-based composition

Appendix BL — Security: Supply Chain

- Verify signatures; lockfile policies; quarantine risky deps

Appendix BM — Analytics Schema

- event: { mfe, route, action, duration, error } minimal and consistent

Appendix BN — Error Catalog

- remote_load_fail, shared_conflict, hydration_mismatch, route_timeout

Appendix BO — Playbooks (Expanded)

- Hydration mismatch: align SSR markup; disable streaming for route; test
- Shared conflict: pin versions; rebuild remotes; redeploy shell
- Remote 404: rollback alias; serve shell-only fallback

Appendix BP — Dashboards (More)

{
  "title": "MFE Perf",
  "panels": [
    {"type":"graph","title":"LCP by Route"},
    {"type":"graph","title":"INP by Route"},
    {"type":"table","title":"Bundle Size by MFE"}
  ]
}

Appendix BQ — Contracts Registry

- Registry of exposed modules, versions, owners, change history

Appendix BR — CLI Contracts Check

- Ensure exposed APIs remain backward compatible; block breaking PRs

Appendix BS — Privacy by Design

- Data minimization; consent state propagated; per-MFE audits

Appendix BT — Network and CDN

- HTTP/3; brotli; image CDNs; 103 Early Hints for critical CSS/JS

Appendix BU — Device Classes

- Low-end devices get reduced hydration; fewer widgets; defer heavy charts

Appendix BV — Offline and PWA

- Cache shell and critical routes; remotes as stale-while-revalidate

Appendix BW — Error Budget Policies

- Freeze deploys for MFE on burn > 2×; remediate before resuming

Appendix BX — Incident Drills

- Simulate remote outage, shared conflict, edge cache corruption

Appendix BY — Education and Onboarding

- Training: contracts, perf budgets, a11y, security, observability

Appendix BZ — Final Practices

- Clear seams, small contracts, fast rollbacks, and ruthless observability

Mega FAQ (801–1200)

Is Module Federation enough?
Often for client composition; mix with SSR/edge for SEO-critical.
How do I debug remote load failures?
Check CORS, CSP, SRI, CDN, and alias pointers.
Can two remotes share state?
Prefer events; if necessary, a small shared service with read-only hooks.
How to keep bundle sizes in check?
Budgets + CI checks + shared libs + lazy loading.
Do I need a design system?
Yes for consistency and speed; versioned tokens.

Mega FAQ (1201–1600)

How to test contracts?
Consumer-driven tests and type packages; CI blocks breaking changes.
What about RSC?
Keep MFEs client-side unless server-safe; SSR islands.
Can I run remotes from partner domains?
Yes with CSP allowlist, SRI, sandbox/iframe if untrusted.
Are import maps safer?
They’re simpler but need governance; combine with CSP.
Do I need canaries?
Yes—per-remote rollout with metrics and error budgets.

Mega FAQ (1601–2000)

Hydration mismatch everywhere—what now?
Turn off streaming, align markup, pin versions; add SSR tests.
Shared lib explosion?
Centralize versions; singletons; rebuild remotes; use a registry.
Metrics noisy?
Sample, aggregate by route/MFE; remove PII; align clocks.
Final: ship small, roll fast, and measure relentlessly.

Appendix CA — Contracts Governance

- Contracts repo lists exposed modules, props/events, owners, versions
- CI checks: backward-compatible diffs; deprecation windows; usage telemetry
- Breaking changes require RFC approval and coordinated rollout plan

Appendix CB — Shell Services Catalog

- Auth/session, analytics, feature flags, i18n, design tokens, error reporter
- Remotes consume via thin adapters; versioned and typed

Appendix CC — Runtime Capability Detection

- Remotes call shell.getCapabilities(); adapt to available features
- Fallback behavior defined per capability

Appendix CD — Federation + Import Maps Hybrid

- Use import maps for shared libs (react, ui-kit)
- Module Federation for app code remotes; clear governance split

Appendix CE — Edge Security Model

- Signed fragment requests; audience-bound URLs; short TTL tokens
- CSP report-only phase before enforce; dashboards for violations

Appendix CF — Hydration and Islands

- SSR shell + islands; hydrate per viewport/intersection observer
- Prioritize input readiness (INP) over non-critical widgets

Appendix CG — Error Category Catalog

- remote_load_fail, remote_bootstrap_timeout, shared_version_conflict
- hydration_mismatch, route_404, widget_exception, csp_violation

Appendix CH — Recovery Strategies

- Hide offending widget via flag; degrade to server-rendered HTML
- Rollback alias; pre-warm caches; notify owners automatically

Appendix CI — Data Contracts

// Example typed event payload
export interface ProfileViewedEvent { userId: string; referrer?: string }

Appendix CJ — Privacy and Telemetry

- Minimal events; purpose-bound; sampling; data classification tags

- CI gates: visual diffs by route; axe checks; keyboard navigation

Appendix CL — Browser Support Policy

- Tier A: evergreen stable; Tier B: last two major; Tier C: graceful degrade
- Feature detection guides; polyfills via import maps

Appendix CM — CDN Architecture

- Multi-CDN with failover; signed URLs; regional edges; compression policies

Appendix CN — Resilience Drills

- Simulate remote 404; shared conflict; CSP strict block; edge outage
- Measure MTTR and UX impact; refine playbooks

Appendix CO — Partner Remotes

- Host untrusted partner remotes in iframes; message channels with schema
- Rate limits and timeouts; explicit allowlists

Appendix CP — Monitors as Tests

- Synthetic checks for key routes; widget presence; perf budgets; errors

Appendix CQ — RSC Interop Notes

- Keep remotes client-side unless server-safe; avoid passing functions
- Use server actions at shell; remotes call via adapters

Appendix CR — Documentation Portal

- Live registry of remotes, contracts, owners, examples, and usage

Appendix CS — CLI Scaffolding

mfe new remote account --contracts profile --with-ci --with-csp

Appendix CT — Edge Worker Snippet (Pseudo)

async function handle(request) {
  const shell = await fetchShell();
  const frag = await fetchFragment('account/profile');
  return compose(shell, frag);
}

Appendix CU — Security Reviews Checklist

- CSP, SRI, Trusted Types; dependency audit; secrets in code scan; SSRF checks

Appendix CV — Performance Playbook

- Measure → budget → optimize; reduce JS, streams, defer non-critical

Appendix CW — Incident Metrics

- Time to detect remote failures; MTTR; error budget burn; LCP/INP deltas

Appendix CX — Education Tracks

- Contracts 101, Federation runtime, a11y, perf, security, observability

Appendix CY — Migration: SPA → MFEs

- Carve routes; strangler; shell first, then remotes

Appendix CZ — Final Operating Principles

- Stable seams; small contracts; strict budgets; fast, safe rollouts

Extended Examples

// Shell error boundary wrapper
function RemoteBoundary({ children, name }: { children: React.ReactNode; name: string }) {
  // catch and report with mfe name
  return <ErrorBoundary fallback={<div data-mfe-fallback={name} />}>{children}</ErrorBoundary>;
}

Policies (Sketch)

- No remote without owner and SLOs
- Budgets: JS/CSS per route; error rate; Core Web Vitals thresholds
- Security: CSP/SRI required; SBOM; signed bundles

Dashboards (Additional JSON)

{
  "title": "MFE Quality",
  "panels": [
    {"type":"graph","title":"Error Rate by MFE"},
    {"type":"graph","title":"Bundle Size Trend"},
    {"type":"table","title":"CSP Violations"}
  ]
}

Mega FAQ (2001–2400)

Why not a single SPA?
Team scale and independent deploys favor MFEs; SPA fine at smaller scale.
How to avoid layout thrash?
Reserve space; skeletons; avoid CLS.
Can I split one domain into many remotes?
Prefer one remote per domain to reduce shared coupling.
Do MFEs hurt performance?
Only with poor budgets; with SSR/edge and budgets, they can be fast.

Mega FAQ (2401–2800)

Partner remote safe?
Use iframes and strict CSP; never trust third-party JS inline.
How to keep contracts sane?
Small, stable, typed; registry and CI gates.
Is design system mandatory?
For scale and consistency—yes.
Do we version remotes?
Immutable builds + alias; track with registry.

Mega FAQ (2801–3200)

Next steps after POC?
Define contracts, build shell services, set budgets and CI gates.
Observability basics?
Trace across shell/remotes; measure CWV per route; structured logs.
Final: MFEs succeed with discipline—contracts, budgets, and ownership.

Appendix DA — Error Reporting and Triage

- Normalize errors: { mfe, route, code, message, stack, version }
- Sample non-critical; 100% for critical widgets and SEV routes
- Dashboards: top errors by MFE, regression since deploy, time to acknowledge

Appendix DB — Progressive Hydration Strategies

- Idle‑until‑urgent for non‑interactive widgets
- Viewport‑based hydration via IntersectionObserver
- Input‑ready hydration for controls to improve INP

Appendix DC — Contract Examples (Typed)

// events.ts
export interface CartAddEvent { sku: string; qty: number; priceCents: number }
export interface AuthState { userId?: string; roles: string[]; tenant?: string }

// props.ts
export interface ProductCardProps { sku: string; onAdd?: (e: CartAddEvent) => void }

Appendix DD — E2E Recipes (Playwright)

import { test, expect } from '@playwright/test';

test('checkout happy path', async ({ page }) => {
  await page.goto('/');
  await page.getByRole('link', { name: /products/i }).click();
  await page.getByRole('button', { name: /add to cart/i }).first().click();
  await page.getByRole('link', { name: /checkout/i }).click();
  await expect(page.getByRole('heading', { name: /payment/i })).toBeVisible();
});

Appendix DE — SRE On‑Call SOP (Frontends)

- Alerts: error rate, LCP/INP regressions, remote load failures
- First response: confirm scope, route/MFE, recent deploys; enable fallback flag
- Communicate in incident room; rollback alias if needed; attach evidence

Appendix DF — Final Checklist per Remote

- Owner set; SLOs defined; dashboards live
- Contracts typed and versioned; budgets enforced; CI gates green
- CSP/SRI configured; SBOM generated; bundles signed (where supported)
- Visual and a11y checks; RUM instrumented; error boundaries present

Additional FAQ (3201–3600)

How do we keep MFEs from diverging in UX?
Versioned design tokens + lint rules + visual QA per route.
What if a remote needs different React minor?
Use singletons and strict ranges; otherwise isolate via iframe.
Can we lazy‑mount routes only when needed?
Yes—code split per route and prefetch on hover/viewport.
How to handle dark mode across MFEs?
CSS variables + shell theme context; remotes subscribe.
Partner remote crashed the page—what now?
Isolate in iframe; strict CSP; degrade to server HTML; notify partner.
Do we run canaries per MFE or per route?
Per MFE, with route‑level KPIs; promote when budgets hold.
Who approves breaking contract changes?
Architecture review board + affected owners; plan dual‑write window.
How to test RSC interop?
SSR snapshot and hydration tests; disable streaming if unstable.
Are import maps production‑ready?
Yes with governance; lock versions; serve via CSP‑allowed inline JSON.
Final: small seams, strict budgets, swift rollbacks.

Mega FAQ (3601–4000)

Can MFEs share a Redux store?
Prefer not; if unavoidable, isolate slices and version clearly.
How to handle conflicting CSS?
CSS modules or Shadow DOM; tokenized variables; avoid globals.
What about analytics duplication?
Shell owns analytics; remotes publish events through shell adapter.
Partner remote steals focus?
Iframe with sandbox; strict postMessage; audit focus behavior.
Should we preload all remoteEntries?
Only popular routes; otherwise prefetch on hover/viewport.
Is runtime negotiation brittle?
Use strict semver + capability flags; canary before broad rollout.
How to triage hydration mismatches?
Log diff, disable streaming, diff SSR output, align locales/time.
Are MFEs accessible by default?
Only with discipline; run a11y gates and audits.
Who owns dark mode defects?
Each MFE; tokens and design system team advise; shell enforces.
Final: ship small, test well, and watch real‑user metrics.

Additional FAQ (4001–4200)

How to ensure SSO consistency?
Shell provides auth adapter; remotes must not store tokens.
Can I run MFEs without Module Federation?
Yes: import maps + Web Components; edge/server composition.
What if CDN fails?
Multi‑CDN with health failover; cache last‑good; degrade to shell.
Final: simplicity at seams, discipline in delivery, and data‑driven ops.

Appendix EA — Ownership and On‑Call

- Each MFE: owner, on‑call rotation, escalation matrix
- Error budgets: freeze risky deploys when burn > 2×; remediate first
- Weekly quality review: CWV, error rates, size budgets

Appendix EB — Contracts Monorepo

- contracts/ package with types, events, token schema, lint rules
- Versioned releases; changelog; deprecation windows; CI gates

Appendix EC — Remote Health Endpoints

- /.well-known/mfe.json: { name, version, build, contracts, owner }
- Shell fetches for diagnostics; surface in governance dashboard

Appendix ED — Size Budgets and Enforcements

- JS ≤ 150KB per route (post‑gzip), CSS ≤ 30KB, fonts ≤ 2
- CI fails on regressions; exceptions require expiry and owner sign‑off

Appendix EE — Shared Lib Policy

- Allowlist shared libs; strict semver; singletons
- Disallow heavy date/lodash bundles; prefer micro-lib or native APIs

Appendix EF — Shell API Surface

export interface ShellApi {
  getAuth(): Promise<AuthState>;
  track(event: Event): void;
  flags(): FeatureFlags;
  i18n(): I18nContext;
}

Appendix EG — Import Maps Governance

- Serve via inline importmap (CSP allowed); lock exact versions
- Roll map via alias; verify with canaries; fallback map cached

Appendix EH — SSR Hydration Guidelines

- Ensure deterministic markup; avoid random IDs; consistent locales and dates
- Disable streaming per route during incident; re‑enable after fix

Appendix EI — Partner Remote Contract

- Props and events documented; SLA; security review; audit logs
- If untrusted: iframe sandbox, allowlists, message schema validation

Appendix EJ — Failure Testing Matrix

- Remote 404; SRI fail; CSP block; network timeout; shared conflict; hydration mismatch
- Expected: shell usable, fallbacks rendered, errors reported, MTTR < target

Appendix EK — CDN and Multi‑CDN

- Primary + backup CDNs; health checks; DNS or client‑side failover
- Signed URLs; per‑region bucket replication; warm popular assets

Appendix EL — Core Web Vitals SLOs

- LCP p75 < 2.5s; INP p75 < 200ms; CLS p75 < 0.1
- SLO burn dashboard; route and cohort segmentation

Appendix EM — Privacy Program Tie‑In

- PII catalog; consent propagation; data minimization checklists
- Region routing for data residency; partner DPAs

Appendix EN — Visual QA Workflows

- Storybook per MFE; snapshot on tokens/themes/locales; approve diffs in PR

- Axe checks; keyboard nav; focus management; color contrast
- Screen reader announcements on route changes and async content

Appendix EP — Edge Rendering Patterns

- Edge workers assemble shell + fragments; personalize via cookies
- Cache fragment variants; purge on deploy; protect with tokens

Appendix EQ — DX CLI Commands

mfe scan sizes
mfe check contracts
mfe preview shell --with account checkout

Appendix ER — Education Plan

- Bootcamp: contracts, perf, a11y, security, observability, incident drills

Appendix ES — Incident Drill Templates

- Remote load fails; hydration mismatch; shared conflict; edge include 500

Appendix ET — Evidence Bundles

- Include perf charts, error rate deltas, bundle size diffs, commit SHAs

Appendix EU — Governance Dashboard (JSON Sketch)

{
  "title": "MFE Governance",
  "panels": [
    {"type":"table","title":"Remotes & Owners"},
    {"type":"graph","title":"Error Budget Burn by MFE"},
    {"type":"table","title":"Contracts Deltas"}
  ]
}

Appendix EV — Security Headers Matrix

- shell: HSTS, CSP (nonces), COOP/COEP, CORP, Referrer‑Policy strict
- remote: CSP compatible; no inline; SRI; immutable assets

Appendix EW — Browser Support and Tests

- Evergreen browsers; mobile Safari checks; RTL + dark mode; low‑end devices

Appendix EX — SLA and Error Budgets per MFE

- Define SLOs: error <1%, CWV budgets; burn policies; freeze rules

Appendix EY — Closing Contracts

- Keep small and stable; add not break; remove after usage=0 windows

Appendix EZ — Final Principles

- Clear seams; small contracts; strong budgets; instant rollbacks; honest telemetry

Mega FAQ (3601–4000)

Can MFEs share a Redux store?
Prefer not; if unavoidable, isolate slices and version clearly.
How to handle conflicting CSS?
CSS modules or Shadow DOM; tokenized variables; avoid globals.
What about analytics duplication?
Shell owns analytics; remotes publish events through shell adapter.
Partner remote steals focus?
Iframe with sandbox; strict postMessage; audit focus behavior.
Should we preload all remoteEntries?
Only popular routes; otherwise prefetch on hover/viewport.
Is runtime negotiation brittle?
Use strict semver + capability flags; canary before broad rollout.
How to triage hydration mismatches?
Log diff, disable streaming, diff SSR output, align locales/time.
Are MFEs accessible by default?
Only with discipline; run a11y gates and audits.
Who owns dark mode defects?
Each MFE; tokens and design system team advise; shell enforces.
Final: ship small, test well, and watch real‑user metrics.

Additional FAQ (4001–4200)

How to ensure SSO consistency?
Shell provides auth adapter; remotes must not store tokens.
Can I run MFEs without Module Federation?
Yes: import maps + Web Components; edge/server composition.
What if CDN fails?
Multi‑CDN with health failover; cache last‑good; degrade to shell.
Final: simplicity at seams, discipline in delivery, and data‑driven ops.

Patterns Catalog (More)

- Shell‑first SSR with deferred islands
- Route‑level remotes; per‑route budgets and contracts
- Capability detection and polyfills via import maps
- Partner remotes in iframes with strict messaging
- Visual QA gates with token diffs per theme/locale

Final FAQ (4201–4600)

What’s the first step to migrate to MFEs?
Build the shell with contracts, design tokens, and analytics adapters.
Who owns cross‑cutting concerns?
Platform team via shell services and governance.
How to keep perf strong at scale?
Strict budgets, SSR/edge for critical, lazy everything else, measure CWV.
How to avoid contract sprawl?
Small typed packages, central registry, CI gates, deprecation windows.
Final: clear seams, tight budgets, fast rollbacks, relentless measurement.

Appendix FA — Contracts Diff Bot

- PR bot posts exposed module diffs; flags breaking changes; links owners
- Requires migration notes and deprecation windows for risky deltas

Appendix FB — Bundle Integrity and Signing

- Generate checksums and optional signatures for remote bundles
- Shell verifies integrity metadata before mounting (feature‑flagged)

Appendix FC — Progressive Rollouts Matrix

- 1% → 5% → 25% → 50% → 100% per remote; metrics guardrails per step
- Auto‑rollback on error/LCP regressed beyond thresholds

Appendix FD — CWV Guardrails

- LCP guard: block promote if p75 route LCP > 2.5s by >10%
- INP guard: block if p75 > 200ms by >15%; CLS guard at 0.1

Appendix FE — Error Budgets by Route

- Tier 1 routes (checkout, auth) have strict budgets; lower for marketing
- Freeze CFs when burn exceeds policy; remediate before resuming

Appendix FF — Client Hints and Early Hints

- Use 103 Early Hints to preload critical CSS/JS; Client Hints for DPR/width

Appendix FG — Fonts Strategy

- System fonts preferred; limited custom families; font‑display: swap
- Preload critical; subset and variable fonts for size wins

Appendix FH — Images Strategy

- AVIF/WebP; responsive srcset; lazy; priority for hero; CDN transforms

Appendix FI — Privacy Anti‑Patterns

- No PII in analytics; avoid fingerprinting; regional routing; short retention

Appendix FJ — Shell Fail‑Safe Mode

- Feature flag to disable all non‑essential remotes; serve server HTML + CTAs

Appendix FK — Edge Canary Logic

- Sticky cohorts by cookie; per‑route rollouts; auto‑demote on guardrail breach

Appendix FL — Low‑End Device Mode

- Detect RTT/CPU hints; reduce hydration, animations, and heavy widgets

Appendix FM — Offline Behaviors

- Cache shell routes; show cached islands; queue actions for retry

Appendix FN — Security Incident Hooks

- Kill switch for partner remotes; block domains at edge; CSP tighten

Appendix FO — Training Curriculum

- Week 1: contracts and types; Week 2: perf and CWV; Week 3: security; Week 4: a11y

Appendix FP — Measurements and KPIs

- p75 CWV by route; error rate; bundle sizes; time to rollback; MTTR

Appendix FQ — Risk Register Tie‑In

- Track top MFE risks and mitigations; review quarterly

Appendix FR — Template Repo Layout

apps/
  shell/
  account-remote/
  checkout-remote/
packages/
  contracts/
  ui-kit/
  design-tokens/

Appendix FS — Clean‑up and Deprecations

- Decommission remotes with zero usage; archive docs; purge CDN aliases

Appendix FT — A/B Testing Ethics

- Avoid dark patterns; disclose experiments; protect user privacy

Appendix FU — SLA Examples

- Remote load fail < 0.5%; widget error < 1%; LCP p75 < 2.5s on Tier 1

Appendix FV — Governance Cadence

- Weekly ops; monthly governance; quarterly architecture council

Appendix FW — Tooling Index

- size‑limit, bundle analyzer, axe, lighthouse CI, playwright, Sentry/RUM, OTel

Appendix FX — Final Migration Tips

- Start from shell; migrate route by route; keep contracts tiny

Appendix FY — Public Status and Trust Center

- Publish uptime, incidents, and performance summaries; build trust

Appendix FZ — Closing Practices

- Clarity at seams, budgets everywhere, and ruthless observability

Appendix GA — Runbook: Remote Load Fail

1) Confirm scope and route; 2) Check CDN/CSP/SRI; 3) Enable fallback flag; 4) Rollback alias; 5) Notify owner; 6) Post‑mortem

Appendix GB — Runbook: Hydration Mismatch

1) Disable streaming; 2) Compare SSR/CSR markup; 3) Pin locales/dates; 4) Fix and re‑enable

Appendix GC — Runbook: Shared Conflict

1) Pin shared to last‑good; 2) Rebuild remote; 3) Contracts check; 4) Promote after canary

Appendix GD — Runbook: Partner Sandbox

1) Switch to iframe sandbox; 2) Tighten CSP; 3) Rate limit; 4) Coordinate fix

Concluding Notes

Micro‑frontends work when seams are clear, contracts are tiny, and teams own reliability. Favor SSR/edge for critical UX, enforce budgets, and keep rollbacks instant. Measure real users, not just lab scores.

Quick Reference

- Keep contracts tiny and typed
- SSR critical, defer non-critical
- Enforce JS/CSS budgets and CWV SLOs
- CSP/SRI and provenance for security
- Fast rollbacks via CDN aliases

Troubleshooting Index

- remoteEntry 404 → check CDN alias/SRI/CSP; rollback alias
- shared conflict → pin versions; rebuild; contracts check
- hydration mismatch → disable streaming; align SSR/CSR; fix locale/time
- perf regression → size budgets; prefetch; SSR hero; defer heavy widgets

Final Notes

Contracts evolve additively; remove only after zero usage.
Budgets protect UX; measure with real users.
Rollback fast; fix forward with discipline.

Glossary (Selected)

MFE: Micro‑frontend, independently deployed UI slice
Shell: Host application that composes remotes and provides shared services
Remote: Federated bundle exposing modules to the shell
Contract: Typed API (props/events/data) between shell and remotes
CWV: Core Web Vitals (LCP, INP, CLS) — user‑centric performance metrics
SSR: Server‑Side Rendering, HTML rendered on server/edge
SRI: Subresource Integrity, verifies asset integrity via hash
CSP: Content Security Policy, restricts resource loading and inline execution
SLO/Error Budget: Reliability targets and allowable failure window

Quick Tips

Prefer SSR for critical content; hydrate islands progressively
Keep contracts tiny, typed, and additive; deprecate with usage data
Enforce JS/CSS size budgets per route; block regressions in CI
Cache remote assets with immutable hashes; roll back via alias flip
Use CSP nonces and (optionally) SRI; quarantine partner remotes in iframes
Trace shell→remote; watch CWV p75; alert on error budget burn
Practice fallbacks: disable a remote via flag without breaking the route
Centralize analytics/flags/i18n in shell; remotes use thin adapters
Document owners and on‑call for every remote; drill incident playbooks

Final Reminder

Observe, budget, and evolve — small, fast, and reliable MFEs win.

Addendum

Keep a living contracts registry; retire unused surfaces promptly.
Run monthly governance reviews for size, CWV, and error budget trends.

Epilogue

Measure real users. Keep seams small. Ship safely.

Always have a rollback plan one click away.
Keep error budget dashboards visible during deploys.