node-html-to-image
node-html-to-image copied to clipboard
frinyvonnick
nodeHtmlToImage intermittently throws unexpected and uncatchable errors (with AWS lambda repro)
This issue is actually 4 issues.
- First, when I wrap
nodeHtmlToImagein a try/catch, some errors slip though going uncaught. See https://github.com/frinyvonnick/node-html-to-image/issues/165 - Second, it intermittently throws an error that I don't expect:
Protocol error (Page.captureScreenshot): Unable to capture screenshot - Third, it intermittently throws another that I don't expect:
Error: Navigating frame was detached at #onFrameDetached - Intermittently, the screenshot taken is a blank image that does not represent the html at all (<6000 bytes)
This all can be reproduced by deploying the following to AWS Lambda using node 18 or 20 runtime:
import nodeHtmlToImage from "node-html-to-image";
import puppeteerCore from "puppeteer-core";
import chromium from "@sparticuz/chromium-min";
export const handler = async (
event: any,
context: any,
callback: (err: any, response: any) => void,
) => {
const executablePath = await chromium.executablePath(
"https://github.com/Sparticuz/chromium/releases/download/v119.0.2/chromium-v119.0.2-pack.tar",
)!;
const html = `
<html>
<head>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
/>
</head>
<style>
body {
width: 1200px;
height: 800px;
}
.content {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
</style>
<body
style="
background-size: cover;
"
>
<div class="content">
<h1 style="font-size: 100px">Hello World</h1>
</div>
</body>
</html>
`
try {
for (let i = 0; i < 10; i++) {
const nodeHtmlToImageResponse = await nodeHtmlToImage({
type: "png",
html,
waitUntil: "networkidle0",
puppeteer: puppeteerCore,
puppeteerArgs: {
args: [...chromium.args, "--disable-features=site-per-process", '--no-sandbox', '--disable-setuid-sandbox', '--disable-dev-shm-usage', '--disable-accelerated-2d-canvas', '--no-first-run', '--no-zygote', '--single-process', '--disable-gpu'],
headless: true,
executablePath,
defaultViewport: {
width: 1200,
height: 800,
},
},
});
console.log({nodeHtmlToImageResponse});
}
} catch (e) {
// This cannot catch the following errors:
// > Error: Navigating frame was detached at #onFrameDetached
// > Protocol error (Page.captureScreenshot): Unable to capture screenshot
// Instead, these cause runtime to exit with catch block never ran
// > Runtime exited with error: exit status 1 Runtime.ExitError
// Additionally, sometimes there is no error but the screenshot is erroneously blank (<3000 bytes)
const err = (e as Error).message;
const errorResponse = {
statusCode: 500,
body: JSON.stringify({
message: "screenshot failed",
reason: err,
}),
};
console.error({ errorResponse });
return callback(null, errorResponse);
}
const response = {
statusCode: 200,
body: JSON.stringify({
message: "screenshot successful!",
}),
};
console.log({ response });
return callback(null, response);
};
Once deployed, put the lambda on a cron trigger to run every few minutes. The errors are intermittent, but it doesn't take long to start seeing them in your lambda execution logs. Note that the catch block never hits - the unexpected failures within nodeHtmlToImage kill the lambda runtime completely without being catchable.
+1, running into this as well on Lambda. Did you end up finding any solution here?
https://github.com/frinyvonnick/node-html-to-image/blob/64955f9f9f1f6f6c2d56fd0d631f8d995d3d12f4/src/main.ts#L64-L67
This looks to be the culprit. This library is exiting the process on unexpected errors in the cluster. This is very unexpected behavior. I'll put in a PR sometime this week if I can find the time.