dh-remixer-sdk 0.0.24-d888b2d → 0.0.24-e08afd3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dh-remixer-sdk",
-  "version": "0.0.24-d888b2d",
+  "version": "0.0.24-e08afd3",
   "type": "module",
   "files": [
     "templates",
@@ -17,7 +17,8 @@
     "chrome-launcher": "1.2.1",
     "chrome-remote-interface": "0.34.0",
     "estree-walker": "3.0.3",
-    "sucrase": "3.35.0"
+    "sucrase": "3.35.0",
+    "@sparticuz/chromium": "143.0.4"
   },
   "devDependencies": {
     "eslint-plugin-n": "17.24.0",

package/scripts/ssg-helmet/index.mjs

@@ -32,7 +32,38 @@ async function main() {
   const reactRoutes = await getRoutes();
   let sitemapRoutes = [ROOT_ROUTE, reactRoutes.find((i) => typeof i === "object")];
 
-  const prerenderer = await Prerenderer.create();
+  // Retry logic with proper cleanup on failure
+  let prerenderer = null;
+  const maxRetries = 3;
+  for (let attempt = 1; attempt <= maxRetries; attempt++) {
+    try {
+      console.log(`[ssg-helmet] Creating Prerenderer (attempt ${attempt}/${maxRetries})...`);
+      prerenderer = await Prerenderer.create();
+      console.log(`[ssg-helmet] Prerenderer created successfully`);
+      break;
+    } catch (err) {
+      console.error(`[ssg-helmet] Prerenderer.create() failed on attempt ${attempt}:`, err.message);
+      
+      // Clean up any partially-created prerenderer
+      if (prerenderer) {
+        try {
+          await prerenderer.close();
+        } catch (closeErr) {
+          console.error(`[ssg-helmet] Error during cleanup:`, closeErr.message);
+        }
+        prerenderer = null;
+      }
+      
+      if (attempt === maxRetries) {
+        throw new Error(`Failed to create Prerenderer after ${maxRetries} attempts: ${err.message}`);
+      }
+      
+      // Exponential backoff: 2s, 4s
+      const delay = attempt * 2000;
+      console.log(`[ssg-helmet] Retrying in ${delay}ms...`);
+      await new Promise(resolve => setTimeout(resolve, delay));
+    }
+  }
 
   while (queuedRoutes.length > 0) {
     const knownRoutes = [...queuedRoutes, ...visistedRoutes];

package/scripts/ssg-helmet/prerenderer.mjs

@@ -4,6 +4,7 @@ import path from "node:path";
 import { URL } from "node:url";
 import { setTimeout } from "node:timers/promises";
 
+import { spawn } from "node:child_process";
 import * as chromeLauncher from "chrome-launcher";
 import CDP from "chrome-remote-interface";
 import { REMIXER_BUILD_DIR } from "./vars.mjs";
@@ -15,81 +16,75 @@ export class Prerenderer {
     return instance;
   }
 
+  #renderQueue = Promise.resolve();
+
   async prerenderPage(route = "/") {
+    return (this.#renderQueue = this.#renderQueue.then(() =>
+      this.#renderPage(route),
+    ));
+  }
+
+  async #renderPage(route) {
     const r = this.#normalize(route);
+    const { Page, Runtime } = this.#client;
+
+    // Navigate
+    await Page.navigate({ url: `${this.#origin}${r}` });
+    await Page.loadEventFired();
+
+    // Wait for Helmet (non-fatal)
+    await Runtime.evaluate({
+      expression: `
+        (async function () {
+          const deadline = Date.now() + 15000;
+          while (Date.now() < deadline) {
+            if (document.head && document.head.querySelector('[data-react-helmet="true"]')) return true;
+            await new Promise(r => setTimeout(r, 50));
+          }
+          return false;
+        })()
+      `,
+      awaitPromise: true,
+      returnByValue: true,
+    });
 
-    // Create a fresh tab (CDP target) for isolation + parallelism
-    // Retry connection to allow CDP server to initialize
-    let target, client;
-    for (let attempt = 1; attempt <= 10; attempt++) {
-      try {
-        target = await CDP.New({ port: this.#cdpPort });
-        client = await CDP({ port: this.#cdpPort, target });
-        break;
-      } catch (e) {
-        if (attempt === 10) throw e;
-        const delay = attempt * 1500; // 1.5s, 3s, 4.5s, ..., 15s
-        console.log(`[ssg-helmet] CDP connection attempt ${attempt} failed, retrying in ${delay}ms...`);
-        await setTimeout(delay);
-      }
-    }
+    await Runtime.evaluate({
+      expression: `new Promise(r => setTimeout(r, 100))`,
+      awaitPromise: true,
+      returnByValue: true,
+    });
 
-    const { Page, Runtime } = client;
+    // Snapshot
+    const { result } = await Runtime.evaluate({
+      expression: "document.documentElement.outerHTML",
+      returnByValue: true,
+    });
 
-    try {
-      await Page.enable();
-      await Runtime.enable();
-
-      // Navigate
-      await Page.navigate({ url: `${this.#origin}${r}` });
-      await Page.loadEventFired(); // roughly equivalent to domcontentloaded+load
-
-      // Wait for Helmet (non-fatal)
-      await Runtime.evaluate({
-        expression: `
-          (async function () {
-            const deadline = Date.now() + 15000;
-            while (Date.now() < deadline) {
-              if (document.head && document.head.querySelector('[data-react-helmet="true"]')) return true;
-              await new Promise(r => setTimeout(r, 50));
-            }
-            return false;
-          })()
-        `,
-        awaitPromise: true,
-        returnByValue: true,
-      });
-
-      // Small settle (like your 100ms)
-      await Runtime.evaluate({
-        expression: `new Promise(r => setTimeout(r, 100))`,
-        awaitPromise: true,
-        returnByValue: true,
-      });
-
-      // Snapshot
-      const { result } = await Runtime.evaluate({
-        expression: "document.documentElement.outerHTML",
-        returnByValue: true,
-      });
-
-      return result.value;
-    } finally {
-      await client.close().catch(() => {});
-      await CDP.Close({ port: this.#cdpPort, id: target.id }).catch(() => {});
-    }
+    return result.value;
   }
 
   async close() {
-    // stop chromium
+    if (this.#client) {
+      await this.#client.close().catch(() => {});
+      this.#client = null;
+    }
+
     if (this.#chrome) {
       try {
-        await this.#chrome.kill();
+        if (typeof this.#chrome.kill === "function") {
+          await this.#chrome.kill();
+        }
       } catch {}
       this.#chrome = null;
     }
 
-    // stop server
+    if (this.#chromeProcess) {
+      try {
+        this.#chromeProcess.kill("SIGKILL");
+      } catch {}
+      this.#chromeProcess = null;
+    }
+
     if (this.#server) {
       await new Promise((res) => this.#server.close(res));
       this.#server = null;
@@ -102,13 +97,118 @@ export class Prerenderer {
     this.#indexPath = path.join(REMIXER_BUILD_DIR, "index.html");
   }
 
+  async #verifyCDPReady() {
+    const maxAttempts = 20;
+    const delayMs = 500;
+
+    for (let attempt = 1; attempt <= maxAttempts; attempt++) {
+      try {
+        await CDP.List({ port: this.#cdpPort });
+        if (attempt > 1) {
+          console.log(`[ssg-helmet] CDP ready after ${attempt} attempts`);
+        }
+        return;
+      } catch (error) {
+        console.log(`[ssg-helmet] CDP verification attempt ${attempt}/${maxAttempts} failed: ${error.message}`);
+        if (attempt === maxAttempts) {
+          throw new Error(
+            `Chrome CDP not ready after ${maxAttempts * delayMs}ms. ` +
+            `Chrome may have crashed. Error: ${error.message}`
+          );
+        }
+        await setTimeout(delayMs);
+      }
+    }
+  }
+
   async #init() {
     await fs.access(this.#indexPath);
 
     await this.#startServer();
 
+    // In Lambda (CHROME_BIN set), spawn Chrome directly to capture stderr.
+    // Locally, use chrome-launcher for convenience.
+    if (process.env.CHROME_BIN) {
+      await this.#launchDirect();
+    } else {
+      await this.#launchWithChromeLauncher();
+    }
+
+    console.log(`[ssg-helmet] Chrome process launched on port ${this.#cdpPort}, verifying CDP readiness...`);
+    await this.#verifyCDPReady();
+    console.log(`[ssg-helmet] Chrome CDP ready`);
+
+    // Connect to the default tab
+    const targets = await CDP.List({ port: this.#cdpPort });
+    const pageTarget = targets.find((t) => t.type === "page");
+    if (!pageTarget) throw new Error("No default page target found in Chrome");
+
+    this.#client = await CDP({ port: this.#cdpPort, target: pageTarget });
+    await this.#client.Page.enable();
+    await this.#client.Runtime.enable();
+    console.log(`[ssg-helmet] Connected to default tab`);
+  }
+
+  async #launchDirect() {
+    const chromeBin = process.env.CHROME_BIN;
+    const debugPort = 9222 + Math.floor(Math.random() * 10000);
+
+    // Log Chrome version first
+    try {
+      const ver = spawn(chromeBin, ["--version"], { stdio: ["ignore", "pipe", "pipe"] });
+      let out = "";
+      ver.stdout.on("data", (d) => (out += d));
+      await new Promise((res) => ver.on("close", res));
+      console.log(`[ssg-helmet] Chrome version: ${out.trim()}`);
+    } catch {}
+
+    const defaultFlags = [
+      "--headless",
+      "--no-sandbox",
+      "--disable-setuid-sandbox",
+      "--disable-gpu",
+      "--disable-dev-shm-usage",
+      "--no-zygote",
+      "--disable-background-networking",
+      "--disable-extensions",
+      "--disable-background-timer-throttling",
+      "--disable-backgrounding-occluded-windows",
+      "--disable-renderer-backgrounding",
+    ];
+
+    const chromeFlags = process.env.CHROME_FLAGS
+      ? ["--headless=new", ...process.env.CHROME_FLAGS.split(",").map((f) => f.trim())]
+      : defaultFlags;
+
+    const allArgs = [
+      ...chromeFlags,
+      `--remote-debugging-port=${debugPort}`,
+      "--remote-debugging-address=127.0.0.1",
+      "about:blank",
+    ];
+
+    console.log(`[ssg-helmet] Spawning ${chromeBin} on port ${debugPort}`);
+    console.log(`[ssg-helmet] Args: ${allArgs.join(" ")}`);
+
+    this.#chromeProcess = spawn(chromeBin, allArgs, {
+      stdio: ["ignore", "pipe", "pipe"],
+    });
+
+    let stderrBuf = "";
+    this.#chromeProcess.stderr.on("data", (d) => {
+      stderrBuf += d.toString();
+    });
+    this.#chromeProcess.on("exit", (code, signal) => {
+      console.log(`[ssg-helmet] Chrome exited: code=${code}, signal=${signal}`);
+      if (stderrBuf) console.log(`[ssg-helmet] Chrome stderr:\n${stderrBuf.slice(0, 4000)}`);
+    });
+
+    this.#cdpPort = debugPort;
+  }
+
+  async #launchWithChromeLauncher() {
     const defaultFlags = [
-      "--headless=new",
+      "--headless",
       "--no-sandbox",
       "--disable-gpu",
       "--disable-dev-shm-usage",
@@ -117,9 +217,11 @@ export class Prerenderer {
     ];
 
     const chromeFlags = process.env.CHROME_FLAGS
-      ? ["--headless=new", ...process.env.CHROME_FLAGS.split(",").map(f => f.trim())]
+      ? ["--headless", ...process.env.CHROME_FLAGS.split(",").map((f) => f.trim())]
       : defaultFlags;
 
+    console.log(`[ssg-helmet] Launching Chrome with flags:`, chromeFlags);
+
     this.#chrome = await chromeLauncher.launch({
       chromePath: process.env.CHROME_BIN || undefined,
       chromeFlags,
@@ -198,6 +300,8 @@ export class Prerenderer {
   #origin;
   #indexPath;
 
+  #client;
   #chrome;
+  #chromeProcess;
   #cdpPort;
 }