Fix pnpm bench on macos

Author: NullVoxPopuli

bin/benchmark.mjs

@@ -16,6 +16,8 @@ Output directory:
 Options:
 	 --force                  delete cached directories before running
      --reuse                  reuse existing apps and tarballs, if available (by default only the control app/tarball is reused)
+     --no-headless            run Chrome without headless mode (opens visible browser windows)
+                              On macOS, benchmarks will run sequentially (one browser at a time)
 
 Notes:
 	- This script runs \`pnpm install\` and \`node ./bin/build-for-publishing.js\` in both repos.
@@ -27,11 +29,13 @@ Notes:
 
 const FORCE = hasFlag(process.argv, '--force');
 const REUSE = hasFlag(process.argv, '--reuse');
+const HEADLESS = !hasFlag(process.argv, '--no-headless');
 
 try {
   await runBenchmark({
     force: FORCE,
     reuse: REUSE,
+    headless: HEADLESS,
   });
 } catch (error) {
   console.error(error);

bin/benchmark/run.mjs

@@ -66,7 +66,7 @@ const EXPERIMENT_DIRS = {
   repo: REPO_ROOT,
 };
 
-export async function runBenchmark({ force = false, reuse = false } = {}) {
+export async function runBenchmark({ force = false, reuse = false, headless = true } = {}) {
   await ensureDir(BENCH_ROOT);
 
   if (force) {
@@ -119,15 +119,15 @@ export async function runBenchmark({ force = false, reuse = false } = {}) {
   });
 
   try {
-    await bootAndRun();
+    await bootAndRun({ headless });
   } finally {
     console.log(`\n\tCleaning up servers with SIGKILL...`);
 
     await killPortProcess([DEFAULT_CONTROL_PORT, DEFAULT_EXPERIMENT_PORT]);
   }
 }
 
-async function bootAndRun() {
+async function bootAndRun({ headless = true } = {}) {
   const controlUrl = `http://127.0.0.1:${DEFAULT_CONTROL_PORT}`;
   const experimentUrl = `http://127.0.0.1:${DEFAULT_EXPERIMENT_PORT}`;
   const markersString = buildMarkersString(DEFAULT_MARKERS);
@@ -164,14 +164,44 @@ async function bootAndRun() {
     '--experimentURL',
     experimentUrl,
     '--report',
-    '--headless',
     '--cpuThrottleRate',
     DEFAULT_THROTTLE,
     '--markers',
     markersString,
     '--debug',
     '--browserArgs',
-    `"--incognito,--disable-gpu,--mute-audio,--log-level=3,--headless=new"`,
+    [
+      '--no-sandbox',
+      '--crash-dumps-dir=./tmp',
+      // Disable task throttling (also in TracerBench defaults, but explicit here for clarity)
+      '--disable-background-timer-throttling',
+      '--disable-backgrounding-occluded-windows',
+      '--disable-renderer-backgrounding',
+      // Disable caching and unnecessary subsystems
+      '--disable-dev-shm-usage',
+      '--disable-cache',
+      '--disable-v8-idle-tasks',
+      '--disable-breakpad',
+      '--disable-component-update',
+      '--disable-background-networking',
+      '--disable-notifications',
+      '--disable-hang-monitor',
+      '--safebrowsing-disable-auto-update',
+      '--ignore-certificate-errors',
+      '--v8-cache-options=none',
+      // Use the new headless mode to support multiple targets
+      ...(headless ? ['--headless=new'] : []),
+      // GPU: use software rendering via SwiftShader, but do NOT
+      // combine --disable-gpu with --use-gl or --disable-software-rasterizer
+      // as the contradictory flags cause use-after-free crashes on macOS
+      '--disable-gpu',
+      '--disable-gpu-compositing',
+      // Disable Chrome ML/TFLite features (suppresses XNNPACK/TFLite init)
+      '--disable-features=TranslateUI',
+      '--disable-features=UseChromiumML',
+      '--disable-features=UseTfLite',
+      '--disable-features=TensorFlowLite',
+    ].join(','),
   ];
 
   await run('node', args, { cwd: EXPERIMENT_DIRS.app });

package.json

@@ -166,7 +166,10 @@
       "@swc/core",
       "core-js",
       "esbuild"
-    ]
+    ],
+    "patchedDependencies": {
+      "@tracerbench/core@8.0.1": "patches/@tracerbench__core@8.0.1.patch"
+    }
   },
   "peerDependencies": {
     "@glimmer/component": ">= 1.1.2"

patches/@tracerbench__core@8.0.1.patch

@@ -0,0 +1,15 @@
+diff --git a/dist/create-trace-benchmark.js b/dist/create-trace-benchmark.js
+index 5918e8f7665b3e796ef88283fc40c2b3286a564f..e1a8768964de8b3c16d38bfb6280d836b45aba0b 100644
+--- a/dist/create-trace-benchmark.js
++++ b/dist/create-trace-benchmark.js
+@@ -45,9 +45,8 @@ function createTraceBenchmark(group, sampleTrace, options = {}) {
+ }
+ exports.default = createTraceBenchmark;
+ function getCategories(isTrial, options) {
+-    const categories = ['-*', ...defaultCategories];
++    const categories = [...defaultCategories];
+     if (isTrial) {
+-        categories.push(...captureAllDevtoolsTimelineCategories, ...captureCpuProfileCategories, captureCpuProfilesHiresCategory, captureFilmStripCategory, ...capturePaintProfileCategories);
+         if (options.additionalTrialCategories) {
+             categories.push(...options.additionalTrialCategories);
+         }

pnpm-lock.yaml

@@ -33,6 +33,21 @@ export function waitForIdle() {
   });
 }
 
+/**
+ * After heavy DOM operations (e.g. rendering/clearing 5000 items), Chrome's
+ * internal trace-writer thread may fall behind. requestIdleCallback only waits
+ * for the *main* thread to be idle — the trace-writer is a separate thread.
+ * This explicit delay gives the trace writer time to flush its buffer so that
+ * subsequent performance.mark() events are not lost to packet drops.
+ */
+export function waitForTraceFlush() {
+  return new Promise((resolve) => {
+    requestIdleCallback(() => {
+      setTimeout(resolve, 100);
+    });
+  });
+}
+
 
 export function enforcePaintEvent() {
   const docElem = document.documentElement;
@@ -64,12 +79,12 @@ async function renderBenchmark() {
   let resolveRender
 
   await measureRender('render', 'renderStart', 'renderEnd', () => {
-    requestIdleCallback(() => {
+      requestIdleCallback(() => {
         if (!resolveRender) return;
 
         resolveRender();
         resolveRender = undefined;
-    });
+      });
 
   });
 
@@ -134,25 +149,25 @@ export async function runBenchmark() {
     emitDomClickEvent(ButtonSelectors.Clear);
   });
 
-  await waitForIdle();
+  await waitForTraceFlush();
 
   await app('render5000Items1', () => {
     emitDomClickEvent(ButtonSelectors.Create5000);
   });
 
-  await waitForIdle();
+  await waitForTraceFlush();
 
   await app('clearManyItems1', () => {
     emitDomClickEvent(ButtonSelectors.Clear);
   });
 
-  await waitForIdle();
+  await waitForTraceFlush();
 
   await app('render5000Items2', () => {
     emitDomClickEvent(ButtonSelectors.Create5000);
   });
 
-  await waitForIdle();
+  await waitForTraceFlush();
 
   await app('clearManyItems2', () => {
     emitDomClickEvent(ButtonSelectors.Clear);