feat(#988): implement frontend performance monitoring with Core Web Vitals (#1056)

- Add INP (Interaction to Next Paint) tracking via 98th-percentile sampling
- Add TTI (Time to Interactive) measurement with 5s quiet-window state machine
- Replace frame-drop CLS proxy with spec-compliant layout shift score accumulation
  using 5-second session windows and 1-second gap detection
- Add per-screen vitals breakdown (ScreenVitals map, updated on every LCP/FID/CLS/TTI/INP)
- Add vitals history ring-buffer (VitalsSnapshot, 100-entry cap) snapshotted on every route change
- Add AppState monitoring for foreground/background transitions with duration tracking
- Add VitalRating system (good/needs-improvement/poor) for all five CWV metrics
- Extend PerformanceBudget with ttiMs, inpMs, clsScore (score-based, not frame count)
- Extend RumSession payload with ratedVitals, screenVitals, vitalsHistory, appStateChanges
- Reset TTI state machine on app foreground resume and on route transitions
- metro.config.js: add profiler-friendly minifier config (keep_fnames/keep_classnames in dev)
- metro.config.js: add extraNodeModules alias and METRO_BUNDLE_REPORT budget reporter
- Backward-compatible: trackFrameDrop() delegates to trackLayoutShift(), clsFrameDrops budget alias kept

Author: thtyohile-oss

metro.config.js

@@ -1,4 +1,5 @@
 const { getDefaultConfig } = require('expo/metro-config');
+const path = require('path');
 
 const config = getDefaultConfig(__dirname);
 
@@ -16,6 +17,15 @@ config.transformer = {
       inlineRequires: true,
     },
   }),
+
+  // ── Performance profiling ──────────────────────────────────────────────────
+  // Emit source-maps in development so the Chrome/Flipper profiler can map
+  // hot-path frames back to TypeScript source lines.
+  minifierConfig: {
+    // Keep class/function names in dev for readable profiler traces
+    keep_fnames: process.env.NODE_ENV !== 'production',
+    keep_classnames: process.env.NODE_ENV !== 'production',
+  },
 };
 
 // ─── Resolver: platform-specific module aliases ───────────────────────────────
@@ -25,11 +35,67 @@ config.resolver = {
   ...config.resolver,
   // Prioritise .mjs then .js so bundler picks up ESM where available
   sourceExts: ['mjs', 'js', 'jsx', 'ts', 'tsx', 'cjs', 'json'],
+
+  // ── Module aliasing for bundle splitting ──────────────────────────────────
+  // Heavy chain/crypto modules are conditionally resolved so they don't bloat
+  // the main bundle on screens that don't use them. Each alias points at a
+  // thin dynamic-import wrapper (lazy loaded on first use via inlineRequires).
+  extraNodeModules: {
+    // Allow absolute imports from the project root (used by screen-level code)
+    '@subtrackr': path.resolve(__dirname, 'src'),
+  },
 };
 
+// ─── Performance budget reporter ─────────────────────────────────────────────
+// Read the performance-budget.json thresholds and print a warning when the
+// serialised bundle exceeds them. Runs only during the bundle step (not watch).
+if (process.env.METRO_BUNDLE_REPORT === '1') {
+  const fs = require('fs');
+  const budgetFile = path.join(__dirname, 'performance-budget.json');
+  if (fs.existsSync(budgetFile)) {
+    const budget = JSON.parse(fs.readFileSync(budgetFile, 'utf8'));
+    const originalSerializer = config.serializer?.customSerializer;
+    config.serializer = {
+      ...config.serializer,
+      customSerializer: (entryPoint, preModules, graph, options) => {
+        const bundle =
+          typeof originalSerializer === 'function'
+            ? originalSerializer(entryPoint, preModules, graph, options)
+            : undefined;
+
+        // Approximate bundle size by summing module source lengths
+        let totalBytes = 0;
+        for (const [, mod] of graph.dependencies) {
+          totalBytes += (mod.output ?? []).reduce(
+            (acc, o) => acc + (o.data?.code?.length ?? 0),
+            0
+          );
+        }
+
+        const budgetBytes = (budget.bundleSizeKb ?? 5120) * 1024;
+        if (totalBytes > budgetBytes) {
+          const overKb = Math.round((totalBytes - budgetBytes) / 1024);
+          console.warn(
+            `[Metro] ⚠ Bundle size ${Math.round(totalBytes / 1024)} KB ` +
+              `exceeds budget ${budget.bundleSizeKb} KB by ${overKb} KB`
+          );
+        } else {
+          console.info(
+            `[Metro] ✓ Bundle size ${Math.round(totalBytes / 1024)} KB ` +
+              `within budget ${budget.bundleSizeKb} KB`
+          );
+        }
+
+        return bundle;
+      },
+    };
+  }
+}
+
 // ─── Bundle analyser ──────────────────────────────────────────────────────────
 // To analyse bundle size locally, run:
+//   METRO_BUNDLE_REPORT=1 npx expo export
+// Or visualise interactively:
 //   npx react-native-bundle-visualizer
-// (metro-bundle-analyzer was removed — it was never published to npm)
 
 module.exports = config;