[mcp] Add proper web-vitals metric collection

Author: jorge-cab

compiler/packages/react-mcp-server/src/index.ts

@@ -22,6 +22,10 @@ import assertExhaustive from './utils/assertExhaustive';
 import {convert} from 'html-to-text';
 import {measurePerformance} from './tools/runtimePerf';
 
+function calculateMean(values: number[]): string {
+  return values.length > 0 ? (values.reduce((acc, curr) => acc + curr, 0) / values.length) + 'ms' : 'could not collect';
+}
+
 const server = new McpServer({
   name: 'React',
   version: '0.0.0',
@@ -286,7 +290,6 @@ server.tool(
 server.tool(
   'review-react-runtime',
   `Run this tool every time you propose a performance related change to verify if your suggestion actually improves performance.
-
   <requirements>
   This tool has some requirements on the code input:
   - The react code that is passed into this tool MUST contain an App functional component without arrow function.
@@ -307,12 +310,12 @@ server.tool(
 
   <iterate>
   (repeat until every metric is good or two consecutive cycles show no gain)
-  - Always run the tool once on the original code before any modification
-  - Run the tool again after making the modification, and apply one focused change based on the failing metric plus React-specific guidance:
+  - Apply one focused change based on the failing metric plus React-specific guidance:
     - LCP: lazy-load off-screen images, inline critical CSS, preconnect, use React.lazy + Suspense for below-the-fold modules. if the user requests for it, use React Server Components for static content (Server Components).
     - INP: wrap non-critical updates in useTransition, avoid calling setState inside useEffect.
     - CLS: reserve space via explicit width/height or aspect-ratio, keep stable list keys, use fixed-size skeleton loaders, animate only transform/opacity, avoid inserting ads or banners without placeholders.
-  - Compare the results of your modified code compared to the original to verify that your changes have improved performance.
+
+    Stop when every metric is classified as good. Return the final metric table and the list of applied changes.
   </iterate>
   `,
   {
@@ -326,17 +329,17 @@ server.tool(
 # React Component Performance Results
 
 ## Mean Render Time
-${results.renderTime / iterations}ms
+${calculateMean(results.renderTime)}
 
+TEST: ${results.webVitals.inp}
 ## Mean Web Vitals
-- Cumulative Layout Shift (CLS): ${results.webVitals.cls / iterations}ms
-- Largest Contentful Paint (LCP): ${results.webVitals.lcp / iterations}ms
-- Interaction to Next Paint (INP): ${results.webVitals.inp / iterations}ms
-- First Input Delay (FID): ${results.webVitals.fid / iterations}ms
+- Cumulative Layout Shift (CLS): ${calculateMean(results.webVitals.cls)}
+- Largest Contentful Paint (LCP): ${calculateMean(results.webVitals.lcp)}
+- Interaction to Next Paint (INP): ${calculateMean(results.webVitals.inp)}
 
 ## Mean React Profiler
-- Actual Duration: ${results.reactProfiler.actualDuration / iterations}ms
-- Base Duration: ${results.reactProfiler.baseDuration / iterations}ms
+- Actual Duration: ${calculateMean(results.reactProfiler.actualDuration)}
+- Base Duration: ${calculateMean(results.reactProfiler.baseDuration)}
 `;
 
       return {

compiler/packages/react-mcp-server/src/tools/runtimePerf.ts

@@ -8,25 +8,52 @@ import * as babelPresetEnv from '@babel/preset-env';
 import * as babelPresetReact from '@babel/preset-react';
 
 type PerformanceResults = {
-  renderTime: number;
+  renderTime: number[];
   webVitals: {
-    cls: number;
-    lcp: number;
-    inp: number;
-    fid: number;
-    ttfb: number;
+    cls: number[];
+    lcp: number[];
+    inp: number[];
+    fid: number[];
+    ttfb: number[];
   };
   reactProfiler: {
-    id: number;
-    phase: number;
-    actualDuration: number;
-    baseDuration: number;
-    startTime: number;
-    commitTime: number;
+    id: number[];
+    phase: number[];
+    actualDuration: number[];
+    baseDuration: number[];
+    startTime: number[];
+    commitTime: number[];
   };
   error: Error | null;
 };
 
+
+type EvaluationResults = {
+  renderTime: number | null;
+  webVitals: {
+    cls: number | null;
+    lcp: number | null;
+    inp: number | null;
+    fid: number | null;
+    ttfb: number | null;
+  };
+  reactProfiler: {
+    id: number | null;
+    phase: number | null;
+    actualDuration: number | null;
+    baseDuration: number | null;
+    startTime: number | null;
+    commitTime: number | null;
+  };
+  error: Error | null;
+};
+
+function delay(time: number) {
+  return new Promise(function (resolve) {
+    setTimeout(resolve, time)
+  });
+}
+
 export async function measurePerformance(
   code: string,
   iterations: number,
@@ -68,66 +95,84 @@ export async function measurePerformance(
 
   const browser = await puppeteer.launch();
   const page = await browser.newPage();
-  await page.setViewport({width: 1280, height: 720});
+  await page.setViewport({ width: 1280, height: 720 });
   const html = buildHtml(transpiled);
 
   let performanceResults: PerformanceResults = {
-    renderTime: 0,
+    renderTime: [],
     webVitals: {
-      cls: 0,
-      lcp: 0,
-      inp: 0,
-      fid: 0,
-      ttfb: 0,
+      cls: [],
+      lcp: [],
+      inp: [],
+      fid: [],
+      ttfb: [],
     },
     reactProfiler: {
-      id: 0,
-      phase: 0,
-      actualDuration: 0,
-      baseDuration: 0,
-      startTime: 0,
-      commitTime: 0,
+      id: [],
+      phase: [],
+      actualDuration: [],
+      baseDuration: [],
+      startTime: [],
+      commitTime: [],
     },
     error: null,
   };
 
   for (let ii = 0; ii < iterations; ii++) {
-    await page.setContent(html, {waitUntil: 'networkidle0'});
+    await page.setContent(html, { waitUntil: 'networkidle0' });
     await page.waitForFunction(
       'window.__RESULT__ !== undefined && (window.__RESULT__.renderTime !== null || window.__RESULT__.error !== null)',
     );
+
     // ui chaos monkey
-    await page.waitForFunction(`window.__RESULT__ !== undefined && (function() {
-      for (const el of [...document.querySelectorAll('a'), ...document.querySelectorAll('button')]) {
-        console.log(el);
-        el.click();
+    const selectors = await page.evaluate(() => {
+      window.__INTERACTABLE_SELECTORS__ = [];
+      const elements = Array.from(document.querySelectorAll('a')).concat(Array.from(document.querySelectorAll('button')));
+      for (const el of elements) {
+        window.__INTERACTABLE_SELECTORS__.push(el.tagName.toLowerCase());
       }
-      return true;
-    })() `);
-    const evaluationResult: PerformanceResults = await page.evaluate(() => {
+      return window.__INTERACTABLE_SELECTORS__;
+    });
+
+    for (const selector of selectors) {
+      await page.click(selector);
+      await delay(500);
+    }
+
+    // Visit a new page for 1s to background the current page so that WebVitals can finish being calculated
+    const tempPage = await browser.newPage();
+    await tempPage.evaluate(() => {
+      return new Promise(resolve => {
+        setTimeout(() => {
+          resolve(true);
+        }, 1000);
+      });
+    });
+    await tempPage.close();
+
+    const evaluationResult: EvaluationResults = await page.evaluate(() => {
       return (window as any).__RESULT__;
     });
 
-    // TODO: investigate why webvital metrics are not populating correctly
-    performanceResults.renderTime += evaluationResult.renderTime;
-    performanceResults.webVitals.cls += evaluationResult.webVitals.cls || 0;
-    performanceResults.webVitals.lcp += evaluationResult.webVitals.lcp || 0;
-    performanceResults.webVitals.inp += evaluationResult.webVitals.inp || 0;
-    performanceResults.webVitals.fid += evaluationResult.webVitals.fid || 0;
-    performanceResults.webVitals.ttfb += evaluationResult.webVitals.ttfb || 0;
-
-    performanceResults.reactProfiler.id +=
-      evaluationResult.reactProfiler.actualDuration || 0;
-    performanceResults.reactProfiler.phase +=
-      evaluationResult.reactProfiler.phase || 0;
-    performanceResults.reactProfiler.actualDuration +=
-      evaluationResult.reactProfiler.actualDuration || 0;
-    performanceResults.reactProfiler.baseDuration +=
-      evaluationResult.reactProfiler.baseDuration || 0;
-    performanceResults.reactProfiler.startTime +=
-      evaluationResult.reactProfiler.startTime || 0;
-    performanceResults.reactProfiler.commitTime +=
-      evaluationResult.reactProfiler.commitTime || 0;
+    if (evaluationResult.renderTime !== null) {
+      performanceResults.renderTime.push(evaluationResult.renderTime);
+    }
+
+    const webVitalMetrics = ['cls', 'lcp', 'inp', 'fid', 'ttfb'] as const;
+    for (const metric of webVitalMetrics) {
+      if (evaluationResult.webVitals[metric] !== null) {
+        performanceResults.webVitals[metric].push(evaluationResult.webVitals[metric]);
+      }
+    }
+
+    const profilerMetrics = ['id', 'phase', 'actualDuration', 'baseDuration', 'startTime', 'commitTime'] as const;
+    for (const metric of profilerMetrics) {
+      if (evaluationResult.reactProfiler[metric] !== null) {
+        performanceResults.reactProfiler[metric].push(
+          evaluationResult.reactProfiler[metric]
+        );
+      }
+    }
 
     performanceResults.error = evaluationResult.error;
   }
@@ -159,14 +204,14 @@ function buildHtml(transpiled: string) {
       renderTime: null,
       webVitals: {},
       reactProfiler: {},
-      error: null
+      error: null,
     };
 
-    webVitals.onCLS((metric) => { window.__RESULT__.webVitals.cls = metric; });
-    webVitals.onLCP((metric) => { window.__RESULT__.webVitals.lcp = metric; });
-    webVitals.onINP((metric) => { window.__RESULT__.webVitals.inp = metric; });
-    webVitals.onFID((metric) => { window.__RESULT__.webVitals.fid = metric; });
-    webVitals.onTTFB((metric) => { window.__RESULT__.webVitals.ttfb = metric; });
+    webVitals.onCLS(({value}) => { window.__RESULT__.webVitals.cls = value; });
+    webVitals.onLCP(({value}) => { window.__RESULT__.webVitals.lcp = value; });
+    webVitals.onINP(({value}) => { window.__RESULT__.webVitals.inp = value; });
+    webVitals.onFID(({value}) => { window.__RESULT__.webVitals.fid = value; });
+    webVitals.onTTFB(({value}) => { window.__RESULT__.webVitals.ttfb = value; });
 
     try {
       ${transpiled}