在NextJS中使用Puppeteer获取Web Vitals无输出，求排查原因

核心原因分析 #

• 上下文隔离导致日志无法同步：evaluate函数内的代码运行在浏览器页面环境中，这里的console.log只会输出到浏览器开发者工具控制台，不会同步到Node.js终端，所以你看不到任何打印结果。
• 暴露的函数未实际调用：你通过exposeFunction把onReport暴露给了浏览器上下文，但在evaluate里仍然使用console.log，没有调用这个暴露的函数，Node端自然接收不到指标数据。
• 浏览器过早关闭：部分Web Vitals指标（如CLS、FID）会在页面加载完成后延迟触发，你在evaluate执行后立刻关闭浏览器，可能还没等到指标上报就终止了流程。
• 脚本加载时机问题：虽然用await加载web-vitals脚本，但少数情况下可能脚本未完全初始化就执行evaluate，导致webVitals未定义（如果终端有报错则优先排查此点）。

修复后的代码示例 #

const browser = await puppeteer.launch({ headless: false });
const website = await browser.newPage();

await website.goto(request.url, { waitUntil: 'networkidle0' });

// 注入web-vitals库
await website.addScriptTag({ url: 'https://unpkg.com/web-vitals@2/dist/web-vitals.umd.js' });

// 存储所有收集到的指标
const collectedMetrics = [];

// 暴露收集函数到浏览器上下文，实现指标从浏览器到Node端的传递
await website.exposeFunction('collectMetric', (metric) => {
  collectedMetrics.push(metric);
  console.log(`${metric.name}: ${metric.value}`);
});

// 在浏览器上下文执行指标收集，等待所有指标完成后再继续流程
await website.evaluate(() => {
  return new Promise((resolve) => {
    let finishedCount = 0;
    const totalMetrics = 5;

    // 所有指标收集完成后触发resolve，避免提前关闭浏览器
    const checkCompletion = () => {
      finishedCount++;
      if (finishedCount === totalMetrics) resolve();
    };

    // 每个指标回调中调用暴露的收集函数，并标记完成状态
    webVitals.getCLS((metric) => {
      window.collectMetric(metric);
      checkCompletion();
    });
    webVitals.getFID((metric) => {
      window.collectMetric(metric);
      checkCompletion();
    });
    webVitals.getLCP((metric) => {
      window.collectMetric(metric);
      checkCompletion();
    });
    webVitals.getTTFB((metric) => {
      window.collectMetric(metric);
      checkCompletion();
    });
    webVitals.getFCP((metric) => {
      window.collectMetric(metric);
      checkCompletion();
    });
  });
});

// 所有指标收集完成后关闭浏览器
await browser.close();

// 返回收集到的指标（按需用于后续业务逻辑）
return collectedMetrics;

关键改动说明 #

1. 用exposeFunction暴露的collectMetric函数替代浏览器内的console.log，实现浏览器到Node端的指标传递与终端打印。
2. 在evaluate内通过Promise等待所有指标回调触发后再结束，避免浏览器过早关闭导致指标丢失。
3. 将收集到的指标存入数组，方便后续业务处理（如返回前端或存储）。

内容的提问来源于stack exchange，提问作者Andrea D'Attero