WIP: feat: add mf observability plugin

.changeset/safe-observability-plugin.md

@@ -0,0 +1,8 @@
+---
+"@module-federation/observability-plugin": minor
+"@module-federation/error-codes": minor
+"@module-federation/runtime-core": minor
+"@module-federation/runtime": minor
+---
+
+Add an opt-in observability plugin, a Node-specific export for file reports, a build-specific export for build summaries and build error reports, remote and shared lifecycle hooks, console trace hints, safe browser/Node report outputs, configurable error stack capture with explicit console raw-stack opt-ins, shared/eager loading evidence, final loading outcome summaries for Module Federation loading reports, deterministic fact reports for runtime and build failures, no-op return handling for observer hooks, detailed remote match/init/expose/factory phase events with phase durations, compact phase summaries, cache/retry/fallback markers, length-limited business component metadata, clipped moduleInfo evidence with preserved deployment locator fields for snapshot-dependent failures, normalized runtime error summaries with error codes, owner hints, retryability, and safe context, dedicated runtime error codes for invalid manifests, missing exposes, and remote container init failures, plus an AI troubleshooting guide for reading and fixing observability reports.

apps/runtime-demo/3005-runtime-host/package.json

@@ -4,6 +4,7 @@
   "version": "0.0.0",
   "devDependencies": {
     "@module-federation/core": "workspace:*",
+    "@module-federation/observability-plugin": "workspace:*",
     "@module-federation/runtime": "workspace:*",
     "@module-federation/typescript": "workspace:*",
     "@module-federation/enhanced": "workspace:*",
@@ -26,7 +27,7 @@
     "serve": "NODE_OPTIONS=--max_old_space_size=4096 pnpm exec webpack-cli serve --config webpack.config.js --mode production --port 3005 --no-hot",
     "serve:development": "NODE_OPTIONS=--max_old_space_size=4096 pnpm exec webpack-cli serve --config webpack.config.js --mode development --port 3005",
     "serve:production": "NODE_OPTIONS=--max_old_space_size=4096 pnpm exec webpack-cli serve --config webpack.config.js --mode production --port 3005 --no-hot",
-    "lint": "ESLINT_USE_FLAT_CONFIG=false pnpm exec eslint --no-error-on-unmatched-pattern --ignore-pattern node_modules **/*.{ts,tsx,js,jsx}",
+    "lint": "ESLINT_USE_FLAT_CONFIG=false pnpm exec eslint --no-error-on-unmatched-pattern --ignore-pattern node_modules src/**/*.{ts,tsx,js,jsx} cypress/**/*.{ts,tsx,js,jsx} cypress.config.ts webpack.config.js remotes.d.ts @mf-types/**/*.ts",
     "serve-static": "pnpm exec serve dist -l 3005 --cors",
     "e2e": "pnpm exec cypress run --project . --e2e --config baseUrl=http://127.0.0.1:3005 --browser chrome",
     "e2e:development": "pnpm exec cypress open --project . --e2e --config baseUrl=http://127.0.0.1:3005 --browser electron",

apps/runtime-demo/3005-runtime-host/src/App.tsx

@@ -1,29 +1,62 @@
-import React, { lazy } from 'react';
-import { loadRemote } from '@module-federation/runtime';
-import { Link, Routes, Route, BrowserRouter } from 'react-router-dom';
+import React from 'react';
+import {
+  Link,
+  Routes,
+  Route,
+  BrowserRouter,
+  useLocation,
+} from 'react-router-dom';
+import ObservabilityDemo from './ObservabilityDemo';
+import ObservabilityShowcase from './ObservabilityShowcase';
 import Root from './Root';
 import Remote1 from './Remote1';
 import Remote2 from './Remote2';
 
+const AppRoutes = () => {
+  const location = useLocation();
+  const isShowcase = location.pathname.startsWith('/observability-showcase');
+
+  return (
+    <>
+      {!isShowcase ? (
+        <>
+          <h1>Runtime Demo</h1>
+          <ul>
+            <li>
+              <Link to={'/'}>Home</Link>
+            </li>
+            <li>
+              <Link to={'/remote1'}>remote1</Link>
+            </li>
+            <li>
+              <Link to={'/remote2'}>remote2</Link>
+            </li>
+            <li>
+              <Link to={'/observability'}>observability</Link>
+            </li>
+            <li>
+              <Link to={'/observability-showcase'}>observability showcase</Link>
+            </li>
+          </ul>
+        </>
+      ) : null}
+      <Routes>
+        <Route path="/" element={<Root />} />
+        <Route path="/remote1" element={<Remote1 />} />
+        <Route path="/remote2" element={<Remote2 />} />
+        <Route path="/observability" element={<ObservabilityDemo />} />
+        <Route
+          path="/observability-showcase/*"
+          element={<ObservabilityShowcase />}
+        />
+      </Routes>
+    </>
+  );
+};
+
 const App = () => (
   <BrowserRouter>
-    <h1>Runtime Demo</h1>
-    <ul>
-      <li>
-        <Link to={'/'}>Home</Link>
-      </li>
-      <li>
-        <Link to={'/remote1'}>remote1</Link>
-      </li>
-      <li>
-        <Link to={'/remote2'}>remote2</Link>
-      </li>
-    </ul>
-    <Routes>
-      <Route path="/" element={<Root />} />
-      <Route path="/remote1" element={<Remote1 />} />
-      <Route path="/remote2" element={<Remote2 />} />
-    </Routes>
+    <AppRoutes />
   </BrowserRouter>
 );