fix: a chromium bug where headless mode was set to false from chromium.headless

Dockerfile

@@ -42,6 +42,9 @@ RUN yarn build --production
 # Final stage
 FROM node:${NODE_VERSION}-${DEBIAN_VERSION}  AS final
 
+# Set the environment variable HEADLESS to true
+ENV HEADLESS=true
+
 WORKDIR /app
 
 COPY package.json yarn.lock ./

api/screenshot.js

@@ -1,56 +1,59 @@
-import puppeteer from 'puppeteer-core';
-import chromium from 'chrome-aws-lambda';
-import middleware from './_common/middleware.js';
+import puppeteer from "puppeteer-core";
+import chromium from "chrome-aws-lambda";
+import middleware from "./_common/middleware.js";
 
 const screenshotHandler = async (targetUrl) => {
-
   if (!targetUrl) {
-    throw new Error('URL is missing from queryStringParameters');
+    throw new Error("URL is missing from queryStringParameters");
   }
 
-  if (!targetUrl.startsWith('http://') && !targetUrl.startsWith('https://')) {
-    targetUrl = 'http://' + targetUrl;
+  if (!targetUrl.startsWith("http://") && !targetUrl.startsWith("https://")) {
+    targetUrl = "http://" + targetUrl;
   }
 
   try {
     new URL(targetUrl);
   } catch (error) {
-    throw new Error('URL provided is invalid');
+    throw new Error("URL provided is invalid");
   }
 
   let browser = null;
   try {
-      browser = await puppeteer.launch({
-      args: [...chromium.args, '--no-sandbox'], // Add --no-sandbox flag
+    browser = await puppeteer.launch({
+      args: [...chromium.args, "--no-sandbox"], // Add --no-sandbox flag
       defaultViewport: { width: 800, height: 600 },
-      executablePath: process.env.CHROME_PATH || await chromium.executablePath,
-      headless: chromium.headless,
+      executablePath:
+        process.env.CHROME_PATH || (await chromium.executablePath),
+      headless: process.env.HEADLESS ? true : chromium.headless,
       ignoreHTTPSErrors: true,
-      ignoreDefaultArgs: ['--disable-extensions'],
+      ignoreDefaultArgs: ["--disable-extensions"],
     });
 
     let page = await browser.newPage();
 
-    await page.emulateMediaFeatures([{ name: 'prefers-color-scheme', value: 'dark' }]);
+    await page.emulateMediaFeatures([
+      { name: "prefers-color-scheme", value: "dark" },
+    ]);
     page.setDefaultNavigationTimeout(8000);
-    await page.goto(targetUrl, { waitUntil: 'domcontentloaded' });
+    await page.goto(targetUrl, { waitUntil: "domcontentloaded" });
 
     await page.evaluate(() => {
-      const selector = 'body';
+      const selector = "body";
       return new Promise((resolve, reject) => {
         const element = document.querySelector(selector);
         if (!element) {
-          reject(new Error(`Error: No element found with selector: ${selector}`));
+          reject(
+            new Error(`Error: No element found with selector: ${selector}`)
+          );
         }
         resolve();
       });
     });
 
     const screenshotBuffer = await page.screenshot();
-    const base64Screenshot = screenshotBuffer.toString('base64');
+    const base64Screenshot = screenshotBuffer.toString("base64");
 
     return { image: base64Screenshot };
-
   } finally {
     if (browser !== null) {
       await browser.close();