#### Objective - Build a host shell that loads remotes at runtime (Rspack MF 2.0 or ESM loader) - Isolate failures with error boundaries, timeouts, and circuit breakers - Communicate via a typed event bus - Enforce Core Web Vitals budgets — **LCP, INP, CLS** (INP replaced FID March 2024) #### Steps ##### Step 1: Create a typed event bus for cross-MFE lifecycle and performance events. ```typescript // src/platform/event-bus.ts type EventMap = { 'mfe:loaded': { name: string; version: string; loadMs: number }; 'mfe:error': { name: string; error: string }; 'mfe:degraded': { name: string; reason: string }; 'perf:budget-violation': { metric: 'LCP' | 'INP' | 'CLS' | 'load-time'; value: number; budget: number; mfeId?: string; }; }; type Handler = (payload: EventMap[K]) => void; class TypedEventBus { private listeners = new Map>>(); on(event: K, handler: Handler) { if (!this.listeners.has(event)) this.listeners.set(event, new Set()); this.listeners.get(event)!.add(handler as Handler); return () => this.listeners.get(event)!.delete(handler as Handler); } emit(event: K, payload: EventMap[K]) { this.listeners.get(event)?.forEach((fn) => fn(payload)); } } export const bus = new TypedEventBus(); ``` ##### Step 2: Implement a remote loader with timeout, circuit breaker, and performance marks. Supports MF 2.0 manifest URL or plain ESM entry. ```typescript // src/platform/remote-loader.ts import { bus } from './event-bus'; type RemoteConfig = { name: string; version: string; entry: string; // mf-manifest.json or ESM App.js URL timeoutMs?: number; }; const failureCounts = new Map(); const CIRCUIT_THRESHOLD = 3; export async function loadRemote(config: RemoteConfig): Promise { const { name, version, entry, timeoutMs = 8000 } = config; if ((failureCounts.get(name) ?? 0) >= CIRCUIT_THRESHOLD) { bus.emit('mfe:degraded', { name, reason: 'circuit-open' }); throw new Error(`Circuit open for ${name}`); } const start = performance.now(); performance.mark(`mfe:${name}:load-start`); const loadPromise = (async () => { const { loadRemoteModule } = await import('@module-federation/enhanced/runtime'); return loadRemoteModule({ name, entry }); })(); const timeout = new Promise((_, reject) => setTimeout(() => reject(new Error('timeout')), timeoutMs) ); try { const module = await Promise.race([loadPromise, timeout]); const loadMs = performance.now() - start; performance.mark(`mfe:${name}:load-end`); performance.measure(`mfe:${name}:load`, `mfe:${name}:load-start`, `mfe:${name}:load-end`); bus.emit('mfe:loaded', { name, version, loadMs }); failureCounts.set(name, 0); return module.default; } catch (e) { failureCounts.set(name, (failureCounts.get(name) ?? 0) + 1); bus.emit('mfe:error', { name, error: (e as Error).message }); throw e; } } ``` ##### Step 3: Wrap remotes in error boundaries and sized Suspense fallbacks. ```tsx // src/platform/remote-slot.tsx 'use client'; import React, { Suspense, lazy, useEffect, useState } from 'react'; import { loadRemote } from './remote-loader'; export function RemoteSlot({ config, minHeight = 320, fallback, }: { config: Parameters[0]; minHeight?: number; fallback?: React.ReactNode; }) { const [Remote, setRemote] = useState(null); const [failed, setFailed] = useState(false); useEffect(() => { loadRemote(config) .then(setRemote) .catch(() => setFailed(true)); }, [config.name, config.version, config.entry]); if (failed) { return (

{config.name} unavailable

); } if (!Remote) { return (

{fallback ?? `Loading ${config.name}…`}

); } return (

); } class ErrorBoundary extends React.Component< { name: string; children: React.ReactNode }, { hasError: boolean } > { state = { hasError: false }; static getDerivedStateFromError() { return { hasError: true }; } render() { if (this.state.hasError) { return

{this.props.name} crashed

; } return this.props.children; } } ``` ##### Step 4: Add Core Web Vitals observer with INP (not FID) and budget enforcement. ```typescript // src/platform/vitals-observer.ts import { onCLS, onINP, onLCP } from 'web-vitals'; import { bus } from './event-bus'; const BUDGETS = { LCP: 2500, INP: 200, CLS: 0.1 }; function check(metric: 'LCP' | 'INP' | 'CLS', value: number, mfeId?: string) { const budget = BUDGETS[metric]; if (value > budget) { bus.emit('perf:budget-violation', { metric, value, budget, mfeId }); } } export function observeVitals() { onLCP(({ value }) => check('LCP', value, 'shell')); onINP(({ value }) => check('INP', value)); // INP — replaces FID onCLS(({ value }) => check('CLS', value, 'shell')); } ``` ##### Step 5: Enforce per-remote load-time budgets and log violations. ```typescript // src/platform/perf-budget.ts import { bus } from './event-bus'; const LOAD_BUDGET_MS: Record = { header: 1500, dashboard: 3000, default: 2500, }; export function enforceLoadBudgets() { bus.on('mfe:loaded', ({ name, loadMs }) => { const budget = LOAD_BUDGET_MS[name] ?? LOAD_BUDGET_MS.default; if (loadMs > budget) { bus.emit('perf:budget-violation', { metric: 'load-time', value: loadMs, budget, mfeId: name, }); } }); } ``` ##### Step 6: Wire the shell — two remotes, vitals, budgets, violation dashboard. ```tsx // src/shell/App.tsx 'use client'; import { useEffect, useState } from 'react'; import { bus } from '../platform/event-bus'; import { observeVitals } from '../platform/vitals-observer'; import { enforceLoadBudgets } from '../platform/perf-budget'; import { RemoteSlot } from '../platform/remote-slot'; type Violation = { metric: string; value: number; budget: number; mfeId?: string }; export function App() { const [violations, setViolations] = useState([]); useEffect(() => { enforceLoadBudgets(); observeVitals(); return bus.on('perf:budget-violation', (v) => setViolations((prev) => [...prev, v]) ); }, []); return (

        {JSON.stringify(violations, null, 2)}

); } ``` ##### Step 7: Add CI bundle-size check (complements runtime monitoring). ```javascript // scripts/check-budgets.mjs import { statSync, existsSync } from 'node:fs'; const LIMITS = { 'dist/shell/main.js': 150_000, 'dist/remotes/header/remoteEntry.js': 80_000 }; let failed = false; for (const [file, maxBytes] of Object.entries(LIMITS)) { if (!existsSync(file)) continue; const size = statSync(file).size; if (size > maxBytes) { console.error(`FAIL: ${file} ${size} > ${maxBytes}`); failed = true; } } process.exit(failed ? 1 : 0); ``` #### Done when - [ ] Shell loads two remotes with isolated error states - [ ] Load-time and CWV violations appear in the dashboard - [ ] INP (not FID) is tracked with 200ms budget - [ ] CI script fails when bundle exceeds limit #### Extension Add `data-mfe` attribution using `web-vitals/attribution` and map INP spikes to the remote that handled the interaction.