Fix race condition in benchmark module loading

README.md

@@ -150,3 +150,4 @@ The harness tries to reduce these paths (example: lasso timing is end-to-end and
 ## License
 
 MIT © [Matin Mahmood](https://www.linkedin.com/in/matin-mahmood/) (X: [@MatinMnM](https://twitter.com/MatinMnM))
+

package.json

@@ -55,7 +55,7 @@
   },
   "devDependencies": {
     "@types/node": "^20.10.0",
-    "puppeteer": "^24.34.0",
+    "puppeteer": "^24.35.0",
     "tsx": "^4.7.0",
     "typescript": "^5.3.0",
     "vite": "^5.0.0"

src/benchmarks/run-browser-accuracy.ts

@@ -136,6 +136,28 @@ async function startDevServer(): Promise<{ proc: ChildProcess; url: string }> {
 }
 
 async function runAccuracy(page: Page): Promise<{ allPassed: boolean; summary: string; reports: any[] }> {
+	// Wait for VizBenchmark module to be loaded and available on window
+	// This is necessary because ES modules load asynchronously and networkidle0
+	// doesn't guarantee module execution is complete
+	try {
+		await page.waitForFunction(
+			() => typeof (window as any).VizBenchmark !== 'undefined' && 
+			      typeof (window as any).VizBenchmark.runAccuracyBenchmarks === 'function',
+			{ timeout: 30000 }  // Increased timeout to 30s for slower systems
+		);
+	} catch (err: any) {
+		// If wait times out, get more diagnostic info
+		const pageInfo = await page.evaluate(() => {
+			return {
+				vizBenchmarkExists: typeof (window as any).VizBenchmark !== 'undefined',
+				vizBenchmarkType: typeof (window as any).VizBenchmark,
+				runAccuracyBenchmarksExists: typeof (window as any).VizBenchmark?.runAccuracyBenchmarks !== 'undefined',
+				windowKeys: Object.keys(window).filter(k => k.includes('Viz') || k.includes('benchmark')),
+			};
+		});
+		throw new Error(`Failed to load VizBenchmark module: ${JSON.stringify(pageInfo)}\nOriginal error: ${err?.message || err}`);
+	}
+
 	return page.evaluate(async () => {
 		const canvas = document.getElementById('canvas') as HTMLCanvasElement | null;
 		if (!canvas) throw new Error('Canvas element not found');
@@ -185,6 +207,20 @@ async function main() {
 		});
 
 		const page = await browser.newPage();
+
+		// Capture console errors for debugging
+		page.on('console', msg => {
+			const type = msg.type();
+			if (type === 'error' || type === 'warn') {
+				console.log(`[Browser ${type}]:`, msg.text());
+			}
+		});
+
+		// Capture page errors
+		page.on('pageerror', (error) => {
+			console.error('[Page Error]:', error);
+		});
+
 		// tsx/esbuild may wrap serialized functions passed to page.evaluate() with
 		// __name(...) calls. Define a no-op __name helper in the page context.
 		try {

src/benchmarks/run-browser-bench.ts

@@ -175,6 +175,28 @@ async function runBenchmarks(
   page: Page,
   config: BenchConfig
 ): Promise<BenchmarkReport> {
+  // Wait for VizBenchmark module to be loaded and available on window
+  // This is necessary because ES modules load asynchronously and networkidle0
+  // doesn't guarantee module execution is complete
+  try {
+    await page.waitForFunction(
+      () => typeof (window as any).VizBenchmark !== 'undefined' && 
+            typeof (window as any).VizBenchmark.runBenchmarks === 'function',
+      { timeout: 30000 }  // Increased timeout to 30s for slower systems
+    );
+  } catch (err: any) {
+    // If wait times out, get more diagnostic info
+    const pageInfo = await page.evaluate(() => {
+      return {
+        vizBenchmarkExists: typeof (window as any).VizBenchmark !== 'undefined',
+        vizBenchmarkType: typeof (window as any).VizBenchmark,
+        runBenchmarksExists: typeof (window as any).VizBenchmark?.runBenchmarks !== 'undefined',
+        windowKeys: Object.keys(window).filter(k => k.includes('Viz') || k.includes('benchmark')),
+      };
+    });
+    throw new Error(`Failed to load VizBenchmark module: ${JSON.stringify(pageInfo)}\nOriginal error: ${err?.message || err}`);
+  }
+
   // Optionally override canvas CSS size before starting.
   // Width defaults to responsive container width; height defaults to 400px in benchmark.html.
   await page.evaluate((canvasCfg: { width?: number; height?: number }) => {
@@ -449,6 +471,19 @@ async function main() {
 
     const page = await browser.newPage();
 
+    // Capture console errors for debugging
+    page.on('console', msg => {
+      const type = msg.type();
+      if (type === 'error' || type === 'warn') {
+        console.log(`[Browser ${type}]:`, msg.text());
+      }
+    });
+
+    // Capture page errors
+    page.on('pageerror', (error) => {
+      console.error('[Page Error]:', error);
+    });
+
     // Some bundlers/transpilers (notably esbuild) may emit a `__name(fn, name)`
     // helper when serializing functions. Puppeteer executes `page.evaluate`
     // callbacks in the *page* context, where that helper is not defined.