如何用Puppeteer捕获页面JS错误？我的代码为何无法检测到错误？

问题根源 #

1. 监听器注入时机错误：你将page.evaluateOnNewDocument放在了page.goto之后，而这个方法的作用是在页面文档创建前注入脚本。页面跳转后，React应用加载时的错误已经触发，此时才注入监听器根本无法捕获这些早期错误。
2. 上下文隔离导致错误无法同步：Node.js环境和浏览器页面环境是完全隔离的，page.evaluateOnNewDocument返回的errors是注入脚本时的空数组，后续页面运行时添加到数组中的错误不会同步到你Node端的变量里，所以你打印的始终是空数组。
3. 错误捕获方式冗余：没必要自己在页面中维护错误数组，Puppeteer本身提供了专门的事件来捕获页面错误，更可靠且无需跨上下文同步数据。

修复后的代码 #

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch({headless: true, timeout: 30000, ignoreHTTPSErrors: true});
  const page = await browser.newPage();

  // 先注册错误监听器，再执行页面跳转
  const pageErrors = [];
  // 捕获页面级别的JS错误
  page.on('pageerror', (error) => {
    pageErrors.push(error);
  });

  // 可选：捕获控制台输出的错误信息
  page.on('console', (msg) => {
    if (msg.type() === 'error') {
      pageErrors.push({
        type: 'console-error',
        message: msg.text(),
        location: msg.location()
      });
    }
  });

  // 跳转目标页面
  await page.goto('http://localhost:3000/app/registration', {
    waitUntil: "domcontentloaded",
  });

  // 可选：等待React渲染完成（根据页面实际情况调整时长）
  await page.waitForTimeout(1000);

  // 输出捕获到的错误
  if (pageErrors.length > 0) {
    console.error('JavaScript errors found on the page:');
    pageErrors.forEach((error, index) => {
      console.error(`Error #${index + 1}:`);
      if (error instanceof Error) {
        console.error(`  Message: ${error.message}`);
        console.error(`  Stack: ${error.stack}`);
      } else {
        console.error(`  Message: ${error.message}`);
        console.error(`  Location: ${error.location?.url || 'N/A'}, Line: ${error.location?.lineNumber || 'N/A'}`);
      }
    });
  } else {
    console.log('No JavaScript errors found. Page is rendering correctly.');
  }

  await browser.close();
})();

关于page.evaluate的执行时机 #

• 若要捕获页面加载过程中的错误，或需要在页面初始化时注入脚本/监听器，相关注入操作（如page.evaluateOnNewDocument、page.exposeFunction）必须放在page.goto之前。
• 若要操作已加载完成的页面（如点击按钮、获取DOM内容），page.evaluate应放在page.goto之后，确保页面已加载完毕。

内容的提问来源于stack exchange，提问作者Kristian Martinez