tracing working!

source-map added to detect api calls in stacktraces

Refs: #7

package.json

@@ -70,6 +70,7 @@
     "process": "^0.11.10",
     "readable-stream": "^4.4.2",
     "setimmediate": "^1.0.5",
+    "source-map": "^0.7.4",
     "stream-http": "^3.2.0",
     "string_decoder": "^1.3.0",
     "test-utils-bundle": "file:./playwright/packages/playwright/bundles/utils",

playwright/packages/playwright-core/src/utils/stackTrace.ts

@@ -28,7 +28,7 @@ export function rewriteErrorMessage<E extends Error>(e: E, newMessage: string):
   return e;
 }
 
-const CORE_DIR = path.resolve(__dirname, '..', '..');
+const CORE_DIR = '/playwright/packages/playwright-core';
 const COVERAGE_PATH = path.join(CORE_DIR, '..', '..', 'tests', 'config', 'coverage.js');
 
 const internalStackPrefixes = [
@@ -48,7 +48,9 @@ export function captureRawStack(): RawStack {
 }
 
 export function captureLibraryStackTrace(rawStack?: RawStack): { frames: StackFrame[], apiName: string } {
-  const stack = rawStack || captureRawStack();
+  rawStack = rawStack || captureRawStack();
+  const stacktraceSourcemap = (self as any)?._stacktraceSourcemap;
+  const stack: string[] = stacktraceSourcemap?.processSourceMaps(rawStack) ?? rawStack;
 
   const isTesting = isUnderTest();
   type ParsedFrame = {

src/shims/global.ts

@@ -18,9 +18,12 @@ import './process';
 import './setImmediate';
 import './buffer';
 import { fs } from 'memfs';
+import { stacktraceSourcemap } from '../utils/stacktraceSourcemap';
 
 fs.mkdirSync('/tmp');
 fs.mkdirSync('/crx');
 
 self.global = self;
 self.__dirname = '/crx';
+// @ts-ignore
+self._stacktraceSourcemap = stacktraceSourcemap;

src/shims/source-map/read-wasm.ts

@@ -0,0 +1,15 @@
+// @ts-ignore
+import mappingsUrl from './mappings.wasm?url';
+
+export default async function readWasm() {
+  if (mappingsUrl.startsWith('data:')) {
+    const [,base64] = mappingsUrl.split(',');
+    return Buffer.from(base64, 'base64').buffer;
+  }
+  const response = await fetch(mappingsUrl);
+  return await response.arrayBuffer();
+};
+
+export const initialize = () => {
+  // nothing to do
+};

src/utils/stacktraceSourcemap.ts

@@ -0,0 +1,74 @@
+// @ts-ignore
+import { SourceMapConsumer } from 'source-map/lib/source-map-consumer';
+
+const regex = /^ +at.+\((.*):([0-9]+):([0-9]+)/;
+
+class StacktraceSourcemap {
+
+  _mapForUri = new Map<string, SourceMapConsumer | undefined>();
+
+  async register(uri: string) {
+    if (this._mapForUri.has(uri)) return;
+    this._mapForUri.set(uri, undefined);
+    await new Promise<void>(async resolve => {
+      try {
+        const result = await fetch(`${uri}.map`);
+        const sourceMap = await result.json();
+        const sourceMapConsumer = result.ok ? await new SourceMapConsumer(sourceMap) : undefined;
+        this._mapForUri.set(uri, sourceMapConsumer);
+      } catch (e) {
+        console.error(e);
+      } finally {
+        resolve();
+      }
+    });
+  }
+
+  processSourceMaps([firstLine, ...stack]: string[]): string[] {
+    const result = [firstLine];
+
+    for (const line of stack) {
+      const [_, uri, lineNumberStr, columnStr] = line.match(regex) ?? [];
+      if (uri) {
+        const lineNumber = parseInt(lineNumberStr, 10);
+        const column = parseInt(columnStr, 10);
+        const map = this._mapForUri.get(uri);
+
+        if (map) {
+          // we think we have a map for that uri. call source-map library
+          var origPos = map.originalPositionFor({ line: lineNumber, column });
+          if (origPos.source && origPos.line && origPos.column) {
+            result.push(this._formatOriginalPosition(
+              origPos.source,
+              origPos.line,
+              origPos.column,
+              origPos.name || this._origName(line)
+            ));
+          }
+        } else {
+          // we can't find a map for that url, but we parsed the row.
+          // reformat unchanged line for consistency with the sourcemapped
+          // lines.
+          result.push(this._formatOriginalPosition(uri, lineNumber, column, this._origName(line)));
+        }
+      } else {
+        // we weren't able to parse the row, push back what we were given
+        result.push(line);
+      }
+    }
+
+    return result;
+  }
+
+  _origName(origLine: string) {
+    const [, name] = / +at +([^ ]*).*/.exec(origLine) ?? [];
+    return name;
+  }
+
+  _formatOriginalPosition(source: string, line: number, column: number, name?: string) {
+    // mimic chrome's format
+    return `    at ${name ?? "(unknown)"} (${source}:${line}:${column})`;
+  };
+}
+
+export const stacktraceSourcemap = new StacktraceSourcemap();

tests/crx/api.spec.ts

@@ -162,3 +162,25 @@ test('should not block on pages with service workers', async ({ runCrxTest }) =>
     await expect(page.evaluate(() => window['registrationPromise'])).resolves.toBeTruthy();
   });
 });
+
+test('should trace', async ({ runCrxTest, _extensionServiceWorkerDevtools }) => {
+  await runCrxTest(async ({ crxApp, page, context }) => {
+    await context.tracing.start({ snapshots: true, screenshots: true, sources: true });
+    await page.goto('https://demo.playwright.dev/todomvc/#/');
+    await page.getByPlaceholder('What needs to be done?').fill('Playwright CRX rocks!');
+    await page.getByPlaceholder('What needs to be done?').press('Enter');
+    await page.getByLabel('Toggle Todo').click();
+    await page.getByRole('button', { name: 'Clear completed' }).click();
+    await context.tracing.stop({ path: '/crx/trace.zip' });
+
+    const tracePage = await crxApp.newPage();
+    await tracePage.goto('https://trace.playwright.dev');
+
+    const [chooser] = await Promise.all([
+      tracePage.waitForEvent('filechooser'),
+      tracePage.getByRole('button', { name: 'Select file(s)' }).click(),
+    ]);
+    await chooser.setFiles('/crx/trace.zip');
+    debugger;
+  });
+});

tests/test-extension/public/manifest.json

@@ -3,8 +3,11 @@
   "version": "0.1.0",
   "manifest_version": 3,
   "background": {
-    "service_worker": "background.js",
+    "service_worker": "sw.js",
     "type": "module"
   },
-  "permissions": ["debugger", "tabs"]
+  "permissions": ["debugger", "tabs"],
+  "content_security_policy": {
+    "extension_pages": "default-src 'wasm-unsafe-eval'"
+  }
 }

tests/test-extension/public/sw.js

@@ -0,0 +1,3 @@
+import './background.js';
+
+self._stacktraceSourcemap.register(chrome.runtime.getURL('background.js')).catch(() => {});

vite.config.ts

@@ -91,6 +91,9 @@ export default defineConfig({
       'node:events': path.resolve(__dirname, './node_modules/events'),
       'node:stream': path.resolve(__dirname, './node_modules/readable-stream'),
       'node:string_decoder': path.resolve(__dirname, './node_modules/string_decoder'),
+
+      // to work with service workers
+      '../lib/read-wasm': path.resolve(__dirname, './src/shims/source-map/read-wasm'),
     },
   },
   define: {