Puppeteer: upgrade to v21

package.json

@@ -5,7 +5,7 @@
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
-    "url": "http://github.com/grafana/grafana-image-renderer.git"
+    "url": "https://github.com/grafana/grafana-image-renderer.git"
   },
   "scripts": {
     "eslint": "eslint . --ext .ts",
@@ -23,6 +23,7 @@
     "@grpc/grpc-js": "^1.7.0",
     "@grpc/proto-loader": "^0.7.2",
     "@hapi/boom": "^10.0.0",
+    "@puppeteer/browsers": "^1.4.5",
     "chokidar": "^3.5.2",
     "dompurify": "^2.4.0",
     "express": "^4.16.3",
@@ -37,9 +38,10 @@
     "on-finished": "^2.3.0",
     "poolpeteer": "^0.23.0",
     "prom-client": "^14.1.0",
-    "puppeteer": "^17.1.3",
+    "puppeteer": "^20.6.0",
     "puppeteer-cluster": "^0.23.0",
     "unique-filename": "^2.0.1",
+    "vm2": "^3.9.19",
     "winston": "^3.8.2"
   },
   "devDependencies": {
@@ -76,7 +78,8 @@
     ]
   },
   "pkg": {
-    "assets": "proto/*"
+    "assets": "proto/*",
+    "scripts": "node_modules/vm2/lib/setup-sandbox.js"
   },
   "bin": "build/app.js",
   "engines": {

scripts/download_chromium.js

@@ -1,48 +1,46 @@
 const path = require('path');
-const child_process = require('child_process');
-const Puppeteer = require('puppeteer');
-const { PUPPETEER_REVISIONS } = require('../node_modules/puppeteer/lib/cjs/puppeteer/revisions')
+const {
+    BrowserPlatform,
+    Browser,
+    install,
+    resolveBuildId,
+} = require('@puppeteer/browsers');
 
 const archArg = process.argv[2];
 let [
-  // Should be one of linux, mac, win32, win64 as per options in BrowserFetcher but we reuse the same arch string
-  // as for grpc download (ie darwin-x64-unknown) so we need to transform it a bit
-  platform,
-  arch
+    // Should be one of linux, mac, win32, win64 as per options in BrowserFetcher but we reuse the same arch string
+    // as for grpc download (ie darwin-x64-unknown) so we need to transform it a bit
+    platform,
+    arch,
 ] = archArg.split('-');
 
 if (platform === 'win32' && arch === 'x64') {
-  platform = 'win64'
+    platform = BrowserPlatform.WIN64;
 }
 
 if (platform === 'darwin') {
-  platform = 'mac'
+    platform = BrowserPlatform.MAC;
 }
 
-const outputPath = "dist/" + (process.argv[3] || `plugin-${archArg}`);
-
-const browserFetcher = Puppeteer.createBrowserFetcher({ platform });
-const revision = PUPPETEER_REVISIONS.chromium;
-
-browserFetcher
-  .download(revision, null)
-  .then(() => {
-    console.log("Chromium downloaded");
-    const parts = browserFetcher.revisionInfo(revision).executablePath.split(path.sep);
-
-      // based on where puppeteer puts the binaries see BrowserFetcher.revisionInfo()
-    while (!parts[parts.length - 1].startsWith('chrome-')) {
-      parts.pop()
-    }
-
-    let execPath = parts.join(path.sep);
-
-    child_process.execSync(`cp -RP ${execPath} ${outputPath}`);
+const outputPath = path.resolve(
+    process.cwd(),
+    'dist',
+    process.argv[3] || `plugin-${archArg}`,
+);
+
+const browserVersion = Browser.CHROME;
+
+async function download() {
+    const buildId = await resolveBuildId(browserVersion, platform, 'latest');
+    console.log(`Installing ${browserVersion} into ${outputPath}`);
+    return install({
+        cacheDir: outputPath,
+        browser: browserVersion,
+        platform,
+        buildId,
+    });
+}
 
-    console.log(`Chromium moved from ${execPath} to ${outputPath}/`);
-    process.exit(0);
-  })
-  .catch((err) => {
-    console.error(err);
-    process.exit(1);
-  });
+download().then(() => {
+    console.log(`${browserVersion} downloaded into:`, outputPath);
+});

scripts/package_target.sh

@@ -16,7 +16,7 @@ if [ $? != 0 ]; then
 fi
 
 if [ ${SKIP_CHROMIUM} = false ]; then
-    node scripts/download_chromium.js ${ARCH} ${OUT}
+   node scripts/download_chromium.js ${ARCH} ${OUT}
 else
     echo "Skipping chromium download"
 fi

scripts/pkg.js

@@ -31,6 +31,6 @@ if(platform === 'macos' && (arch.includes('arm'))) {
 const outputPath = "dist/" + (process.argv[3] || `plugin-${archArg}`);
 const outputNodeModules = `${outputPath}/node_modules`
 
-childProcess.execSync(`"./node_modules/.bin/pkg" -t node14-${platform}-${arch} . --out-path ${outputPath} --no-native-build`, {stdio: 'inherit'});
+childProcess.execSync(`"./node_modules/.bin/pkg" -t node16-${platform}-${arch} . --out-path ${outputPath} --no-native-build`, {stdio: 'inherit'});
 
 childProcess.execSync(`rm -rf ${outputNodeModules}`)

src/browser/browser.ts

@@ -135,7 +135,7 @@ export class Browser {
       launcherOptions.executablePath = this.config.chromeBin;
     }
 
-    launcherOptions.headless = !this.config.headed;
+    launcherOptions.headless = !this.config.headed ? "new" : false;
 
     return launcherOptions;
   }