升级Puppeteer至21版启用new无头模式后遇超时错误求助

• 强制生成完整堆栈跟踪
  目前TimeoutError没有完整堆栈，无法定位触发源，可通过两种方式临时排查：

  1. 在项目入口添加全局未处理拒绝捕获：

     process.on('unhandledRejection', (reason, promise) => {
       console.error('未处理的Promise拒绝:', promise);
       console.error('错误详情:', reason);
       if (reason instanceof Error) {
         console.error('完整堆栈:', reason.stack);
       }
     });
     

  2. 临时修改node_modules/puppeteer/node_modules/puppeteer-core/src/util/Deferred.ts中的reject逻辑，手动捕获堆栈：

     setTimeout(() => {
       const error = new TimeoutError(opts.message);
       Error.captureStackTrace(error, this.constructor);
       this.reject(error);
     }, opts.timeout)
     

  运行测试后就能看到触发这个超时的具体调用链路。

• 调整新无头模式的超时配置
  新无头模式与旧模式的网络处理逻辑存在差异，默认超时可能不匹配场景：

  • 给page.goto、page.waitForNavigation等操作显式设置更长的timeout参数，比如page.goto(url, { timeout: 60000 })
  • 全局设置页面和导航超时：

    const page = await browser.newPage();
    page.setDefaultTimeout(60000); // 全局页面操作超时
    page.setDefaultNavigationTimeout(60000); // 全局导航超时
    

• 补充新无头模式的浏览器启动参数
  新无头模式更接近真实Chrome，可能需要补充参数适配测试环境：

  • 添加--disable-web-security（若测试涉及跨域资源）
  • 添加--disable-features=VizDisplayCompositor（解决部分环境下渲染阻塞导致的网络等待问题）
  • 添加--enable-network-logging输出详细网络日志，排查卡住的请求

• 监控页面请求状态
  监听页面的请求事件，排查是否有资源加载异常：

  page.on('request', req => console.log('发起请求:', req.url()));
  page.on('requestfailed', req => console.log('请求失败:', req.url(), req.failure()));
  page.on('requestfinished', req => console.log('请求完成:', req.url()));
  

  通过日志定位是否有请求长期pending，导致等待Symbol(NetworkManager.Request)事件超时。

• 版本适配验证

  • 暂时切换回旧无头模式（headless: true），确认错误是否消失，排除新版本其他API变更的影响
  • 查看Puppeteer 20到21的官方变更日志，重点关注网络请求处理、无头模式相关的改动，确认是否存在API行为变更导致测试不兼容

内容的提问来源于stack exchange，提问作者Andrea Bisello