Puppeteer + Next.js生产环境截图报错求助

针对你遇到的本地运行正常、生产环境返回客户端异常的情况，按以下步骤排查修复：

1. 适配生产环境的Chromium依赖 #

多数云部署平台（如Vercel、Netlify）默认不预装完整Chromium环境，需替换为适配云环境的依赖包：

• 卸载原puppeteer，安装puppeteer-core和@sparticuz/chromium：

  npm uninstall puppeteer
  npm install puppeteer-core @sparticuz/chromium
  

• 修改Puppeteer启动配置，指定适配环境的Chromium路径：

  import chromium from '@sparticuz/chromium';
  import puppeteer from 'puppeteer-core';
  
  export const createImages = async (urlArray) => {
    try {
      const browser = await puppeteer.launch({
        args: chromium.args,
        defaultViewport: chromium.defaultViewport,
        executablePath: await chromium.executablePath(),
        headless: chromium.headless,
        slowMo: 250,
      });
      // 其余截图逻辑保持不变
    }
  }
  

2. 强制API路由使用Node.js运行时 #

Next.js API路由默认可能启用Edge Runtime，但Puppeteer依赖Node.js环境，需在API文件顶部声明：

export const runtime = 'nodejs'; // 必须放在文件最顶部

3. 优化页面加载等待策略 #

waitUntil: "load"仅等待初始资源加载完成，不足以覆盖单页应用的动态渲染，替换为更可靠的策略：

• 改用networkidle2（网络空闲2秒后判定加载完成），同时延长超时时间：

  await page.goto(urlArray[i].address, {
    waitUntil: "networkidle2",
    timeout: 60000, // 延长至60秒避免超时
  });
  

• 若页面存在关键动态内容，增加元素等待逻辑：

  await page.waitForSelector('your-key-element-selector', { timeout: 30000 }); // 等待目标元素渲染完成
  

4. 修复Base64处理的冗余代码 #

page.screenshot返回的是字符串而非Promise，代码中await screenshotBase64属于冗余操作，直接处理即可：

const screenshotBase64 = await page.screenshot({ encoding: "base64" });
// 去掉多余的await，直接处理字符串
const screenshot = Buffer.from(
  screenshotBase64.replace(/^data:image\/\w+;base64,/, ""),
  "base64"
);

5. 完善错误处理与资源清理 #

• 确保浏览器在任何场景下都能关闭，避免资源泄漏：

  let browser;
  try {
    browser = await puppeteer.launch(/* 配置参数 */);
    // 截图逻辑
  } catch (err) {
    console.error(new Date(), "截图失败:", err);
    throw err; // 将错误抛出给客户端，便于排查具体问题
  } finally {
    if (browser) await browser.close();
  }
  

• 开启Next.js生产环境详细日志，在next.config.js中配置：

  module.exports = {
    logging: {
      fetches: {
        fullUrl: true,
      },
    },
  };
  

6. 调整启动参数适配生产环境 #

增加更稳定的启动参数，规避权限或资源不足问题：

args: [
  "--no-sandbox",
  "--disable-setuid-sandbox",
  "--disable-dev-shm-usage",
  "--single-process", // 单进程模式减少资源占用
  "--disable-gpu", // 禁用GPU适配无图形环境
],
headless: "new", // 使用Puppeteer 19+的新无头模式，稳定性更高

内容的提问来源于stack exchange，提问作者Mohammad Tbeishat