Puppeteer: Upgrade to v22 (#556)

package.json

@@ -28,7 +28,7 @@
     "@grpc/grpc-js": "^1.8.22",
     "@grpc/proto-loader": "^0.7.2",
     "@hapi/boom": "^10.0.0",
-    "@puppeteer/browsers": "^1.6.0",
+    "@puppeteer/browsers": "^2.3.1",
     "chokidar": "^3.5.2",
     "dompurify": "^2.4.0",
     "express": "^4.19.2",
@@ -42,8 +42,8 @@
     "on-finished": "^2.3.0",
     "poolpeteer": "^0.23.0",
     "prom-client": "^14.1.0",
-    "puppeteer": "^21.0.3",
-    "puppeteer-cluster": "^0.23.0",
+    "puppeteer": "^22.8.2",
+    "puppeteer-cluster": "^0.24.0",
     "unique-filename": "^2.0.1",
     "winston": "^3.8.2"
   },
@@ -59,7 +59,7 @@
     "@types/supertest": "^2.0.15",
     "@typescript-eslint/eslint-plugin": "5.37.0",
     "@typescript-eslint/parser": "5.37.0",
-    "axios": "1.6.7",
+    "axios": "1.7.4",
     "cross-env": "7.0.3",
     "eslint": "8.23.1",
     "fast-png": "^6.2.0",

scripts/download_chrome.js

@@ -24,7 +24,7 @@ if (platform === 'darwin') {
 
 const outputPath = path.resolve(process.cwd(), 'dist', process.argv[3] || `plugin-${archArg}`);
 
-const browserVersion = Browser.CHROME;
+const browserVersion = Browser.CHROMEHEADLESSSHELL;
 
 async function download() {
     const buildId = await resolveBuildId(browserVersion, platform, 'latest');

scripts/run_tests.sh

@@ -2,7 +2,7 @@
 yarn install --frozen-lockfile
 
 # Start Grafana
-docker-compose -f ./devenv/docker/test/docker-compose.yaml up -d
+docker compose -f ./devenv/docker/test/docker-compose.yaml up -d
 
 # Start testing
 yarn jest

src/app.ts

@@ -16,9 +16,6 @@ async function main() {
   const env = Object.assign({}, process.env);
   const command = argv._[0];
 
-  // See https://github.com/grafana/grafana-image-renderer/issues/460
-  process.env["PUPPETEER_DISABLE_HEADLESS_WARNING"] = "true"
-
   if (command === undefined) {
     const logger = new PluginLogger();
     const config: PluginConfig = defaultPluginConfig;
@@ -30,7 +27,7 @@ async function main() {
 
       config.rendering.chromeBin = computeExecutablePath({
         cacheDir: path.dirname(process.execPath),
-        browser: Browser.CHROME,
+        browser: Browser.CHROMEHEADLESSSHELL,
         buildId: chromeInfo.buildId,
       });
       logger.debug(`Setting chromeBin to ${config.rendering.chromeBin}`);

src/browser/browser.ts

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

src/browser/reusable.ts

@@ -23,7 +23,7 @@ export class ReusableBrowser extends Browser {
     try {
       page = await this.withTimingMetrics<puppeteer.Page>(async () => {
         this.validateImageOptions(options);
-        context = await this.browser.createIncognitoBrowserContext();
+        context = await this.browser.createBrowserContext();
         return context.newPage();
       }, 'newPage');
 
@@ -52,7 +52,7 @@ export class ReusableBrowser extends Browser {
 
     try {
       this.validateRenderOptions(options);
-      context = await this.browser.createIncognitoBrowserContext();
+      context = await this.browser.createBrowserContext();
       page = await context.newPage();
 
       if (options.timezone) {

src/service/http-server.integration.test.ts

@@ -98,8 +98,6 @@ let envSettings = {
 }
 
 beforeAll(() => {
-  process.env['PUPPETEER_DISABLE_HEADLESS_WARNING'] = 'true';
-
   if (process.env['CI'] === 'true') {
     domain = 'grafana';
   }