How to use Puppeteer with Serverless Vercel in 2024

import chromium from '@sparticuz/chromium';
 
// Keep in memory for possible re-use between innovations
let browser: puppeteer.Browser;
 
const chromeArgs = [
  // @sparticuz/chromium has default chromeArgs to improve serverless performance, but you can add others as you deem appropriate
  '--font-render-hinting=none', // Improves font-rendering quality and spacing
];
 
export const takeScreenshot = async ({
  width,
  height,
  url,
}: ScreenshotHandlerProps) => {
  const isLocal = false; // Set this variable as required - @sparticuz/chromium does not work on ARM, so we use a standard Chrome executable locally - see issue https://github.com/Sparticuz/chromium/issues/186
 
  if (!browser?.isConnected()) {
    // If you don't need webGL, this skips the extraction of the bin/swiftshader.tar.br file, improving performance
    chromium.setGraphicMode = false;
    browser = await puppeteer.launch({
      ...(isLocal
        ? { channel: 'chrome' }
        : {
            args: chromeArgs,
            executablePath: await chrome.executablePath(),
            ignoreHTTPSErrors: true,
          }),
    });
  }
 
  const page = await browser.newPage();
 
  await page.setViewport({
    width,
    height,
    deviceScaleFactor: 2,
  });
 
  const imagePage = await page.goto(url, { waitUntil: 'domcontentloaded' });
 
  if (!imagePage || !imagePage.ok()) {
    throw new Error('Failed to load image page');
  }
 
  const file = await page.screenshot({
    type: 'png',
    omitBackground: true,
  });
 
  const pages = await browser.pages();
 
  // Avoids orphaned pages by looping all open pages and closing them
  for (const openPage of pages) {
    await openPage.close();
  }
 
  // We don't want headless Chrome instances left running locally
  if (isLocal) {
    await browser.close();
  }
 
  return file;
};