I am using Puppeteer in my Node.js project, and it works perfectly fine on my local machine. However, after deploying the project to Azure, I am encountering issues where Puppeteer does not seem to function properly.
Issue:
The error message I get is:
Could not find Chrome (ver. 131.0.6778.85). This can occur if either
1. you did not perform an installation before running the script (e.g. `npx puppeteer browsers install chrome`) or
2. your cache path is incorrectly configured (which is: /root/.cache/puppeteer).
For (2), check out our guide on configuring puppeteer at https://pptr.dev/guides/configuration.
This suggests that Puppeteer is unable to locate a Chromium instance in the Azure environment.
Environment Details:
Local Machine: Works fine without any issues.
Azure Deployment: Fails to find Chrome.
Steps I Have Tried:
Installing Puppeteer with Chromium:
npm install puppeteer
Setup the api
app.get("/_api/screenshot", async (req, res) => {
try {
// Get the URL from query string, default to example.com if not provided
const targetUrl = req.query.url || "https://example.com";
console.log("Starting browser launch...");
// Launch Puppeteer with necessary arguments for cloud environments
const browser = await puppeteer.launch({
headless: true,
args: [
"--no-sandbox",
"--disable-setuid-sandbox",
"--disable-dev-shm-usage",
"--single-process",
"--no-zygote",
],
// Use the path from environment variable or let Puppeteer find it
executablePath: process.env.PUPPETEER_EXECUTABLE_PATH,
});
console.log("Browser launched successfully");
const page = await browser.newPage();
console.log("Navigating to:", targetUrl);
// Navigate to the target URL and wait until network is idle
await page.goto(targetUrl, { waitUntil: "networkidle0" });
console.log("Page loaded, taking screenshot");
// Take a screenshot as a base64 string
const screenshotBuffer = await page.screenshot({ encoding: "base64" });
console.log("Screenshot taken, closing browser");
await browser.close();
// Return the screenshot as an HTML image
res.send(`<img src="data:image/png;base64,${screenshotBuffer}" />`);
} catch (error) {
console.error("Error in /api/screenshot:", error);
res.status(500).json({
error: "Failed to take screenshot",
message: error.message,
stack: error.stack,
puppeteerInfo: process.env.PUPPETEER_EXECUTABLE_PATH || "No path set",
});
}
});
But still getting the above error
Note: We’re using the Github workflow to deploy the updated code to Azure, if anyone know or have done this please let us know what will be proper method to do this, would be great help 🙂