33

I deployed an app on heroku, and I added the Puppeteer Heroku buildpack.

After a succesful redeployment, I tried to run it and it fails. Using heroku logs -t, I get this error message:

2018-09-07T13:16:10.870497+00:00 app[web.1]: Error: Failed to launch chrome!
2018-09-07T13:16:10.870512+00:00 app[web.1]: [0907/131610.045486:FATAL:zygote_ho
st_impl_linux.cc(116)] No usable sandbox! Update your kernel or see https://chro
mium.googlesource.com/chromium/src/+/master/docs/linux_suid_sandbox_development.
md for more information on developing with the SUID sandbox. If you want to live
 dangerously and need an immediate workaround, you can try using --no-sandbox.
ggorlen
  • 44,755
  • 7
  • 76
  • 106
user1584421
  • 3,499
  • 11
  • 46
  • 86

4 Answers4

82

Here is what worked for me. First, I clear all my buildpacks and then I added the puppeteer-heroku-buildpack and the heroku/nodejs one:

$ heroku buildpacks:clear
$ heroku buildpacks:add --index 1 https://github.com/jontewks/puppeteer-heroku-buildpack
$ heroku buildpacks:add --index 1 heroku/nodejs

Then, add the following args to the puppeteer launch function:

const browser = await puppeteer.launch({
  'args' : [
    '--no-sandbox',
    '--disable-setuid-sandbox'
  ]
});

Finally, deploy it back to Heroku:

$ git add .
$ git commit -m "Fixing deployment issue"
$ git push heroku master
JulienRioux
  • 2,853
  • 2
  • 24
  • 37
36

You should be able to solve this issue by passing the --no-sandbox and --disable-setuid-sandbox flags to puppeteer.launch():

const browser = await puppeteer.launch({
  args: [
    '--no-sandbox',
    '--disable-setuid-sandbox',
  ],
});

If this does not work, you may want to read the official Puppeteer troubleshooting guide: Running Puppeteer on Heroku.

Grant Miller
  • 27,532
  • 16
  • 147
  • 165
6

This answer is fantastic, but in the interests of a minimal, runnable example I thought I'd share my complete code and workflow for getting up and running with a Puppeteer-based web app.

See this answer for a simple scheduler and a clock process version (although all three approaches can coexist in one app without doing anything special).

package.json:

{
  "name": "test-puppeteer",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "start": "node index.js"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "express": "^4.17.1",
    "puppeteer": "^9.1.1"
  }
}

Procfile:

web: node index.js

index.js:

const express = require("express");
const puppeteer = require("puppeteer");

const app = express();
app.set("port", process.env.PORT || 5000);

const browserP = puppeteer.launch({
  args: ["--no-sandbox", "--disable-setuid-sandbox"]
});

app.get("/", (req, res) => {
  // FIXME move to a worker task; see https://devcenter.heroku.com/articles/node-redis-workers
  let page;
  (async () => {
    page = await (await browserP).newPage();
    await page.setContent(`<p>web running at ${Date()}</p>`);
    res.send(await page.content());
  })()
    .catch(err => res.sendStatus(500))
    .finally(() => page.close())
  ;
});

app.listen(app.get("port"), () => 
  console.log("app running on port", app.get("port"))
);

Set up

  1. Install Heroku CLI and create a new app with Node and Puppeteer buildpacks (see this answer):

    heroku create
heroku buildpacks:add --index 1 https://github.com/jontewks/puppeteer-heroku-buildpack -a cryptic-dawn-48835
heroku buildpacks:add --index 1 heroku/nodejs -a cryptic-dawn-48835

    (replace cryptic-dawn-48835 with your app name)

  2. Deploy:

    git init
git add .
git commit -m "initial commit"
heroku git:remote -a cryptic-dawn-48835
git push heroku master

  3. Verify that it worked with curl https://cryptic-dawn-48835.herokuapp.com. You should see something like

    <html><head></head><body><p>web running at Wed May 19 2021 02:12:48 GMT+0000 (Coordinated Universal Time)</p></body></html>
ggorlen
  • 44,755
  • 7
  • 76
  • 106
  • 1
    excellent solution, worked for me! if you need only add the pack, just run "heroku buildpacks:add --index 1 https://github.com/jontewks/puppeteer-heroku-buildpack -a your-app-name". Make a new comit in order to make a new release and that's all! – Richard Aguirre Oct 19 '21 at 20:22
1

I have been able to solve the problem installing puppeteer v19.7.2 in Heroku by adding the following file to be base directory of my project: ".puppeteerrc.cjs"

const {join} = require('path');

/**
 * @type {import("puppeteer").Configuration}
 */
module.exports = {
  // Changes the cache location for Puppeteer.
  cacheDirectory: join(__dirname, '.cache', 'puppeteer'),
};

Puppeteer v19 moved the cache directory and what this file does is tell the npm installer to move the cache directory from $HOME/.cache/puppeteer to the current-working-directory/.cache/puppeteer. This file is also read by puppeteer when launched so it knows where to find the cached files. I have tested this on Heroku22 and worked perfect. Remember to add .cache to your .gitignore.

Jay Jungalwala
  • 41
  • 4