Puppeteerを2系から3系にアップデートしたらError: Failed to launch the browser process!

Puppeteerメモです。

Heroku上で利用していたPuppetterのバージョンを2系->3系にアップデートしたらエラー発生。

Puppetterのバージョンを2系->3系にするとChromiumのバージョン違いで動かないっぽい

Heroku上のログ

Error: Failed to launch the browser process!
2020-05-27T21:22:10.217234+00:00 app[web.1]: /app/node_modules/puppeteer/.local-chromium/linux-756035/chrome-linux/chrome: error while loading shared libraries: libgbm.so.1: cannot open shared object file: No such file or directory

Heroku上でインストールされているChromiumを更新する

https://github.com/puppeteer/puppeteer/releases

Puppetterのv3.1.0ではChromium 83.0.4103.0 (r756035)を利用していると、Big changesと書かれていて、内部で利用するChromiumのバージョンが違う模様です。

最初にインストールしたときはPuppetterのv2系だったので、その時に対応していたバージョンのChromiumがHeroku側に残ったままになってるんだと思います。

bildpackを再ビルド

$ heroku buildpacks:add jontewks/puppeteer

その後デプロイしなおす(git push heroku master)と再度ビルドされてHeroku上のChromiumも更新されてこれで問題なく利用できるようになりました。

その他メモ

その他触っててでたエラーをメモ的に残しておきます。

TimeoutError: Navigation timeout of 30000 ms exceeded

タイムアウト。
デフォルトだと30秒待ってくれるみたいだけど、それ以上かかる場合もありそう。

page.goto()のオプションで{waitUntil: 'networkidle'}を指定するっぽいけど更にエラーが

Error: ERROR: "networkidle" option is no longer supported. Use "networkidle2" instead

なるほど

page.goto(url, {waitUntil: 'networkidle2'})

でうまくいった。

Error: Evaluation failed: TypeError: Cannot set property 'value' of null

こんな雰囲気でiPhoneでのページ閲覧エミュレートをしてましたが、

const devices = require('puppeteer/DeviceDescriptors');
const iPhone = devices['iPhone X'];

省略

await page.emulate(iPhone);

これもv2->3にあげたらError: Evaluation failed: TypeError: Cannot set property 'value' of nullとエラーが発生し、うまく動作しなくなってしまいました。

これパッと調べても原因や解決策がわからなかったので、iPhoneでのエミュレートを泣く泣く断念。

今回やりたかったのはデスクトップエミュレートでもなんとかなったのでよかったけど、必要になったらまた調べないと...