fix(wasm): match wasm:// frames on the name section only

- Drop the fetch-basename and `_bg.wasm` guess. V8 puts a name in the
  `wasm://wasm/<name>-<hash>` label only when the module has a name
  section, and that name is parsed at registration, so the guess could
  not fire
- Restore develop's response body tagging; the change was not needed for
  this fix
- Cover a worker that compiles a module from fetched bytes in the existing
  webWorker browser suite

Author: timfish

dev-packages/browser-integration-tests/suites/wasm/webWorker/assets/worker.js

@@ -3,6 +3,30 @@
 //  between worker and main thread independent of SDK implementation details
 // in production code you would do: registerWebWorkerWasm({ self });
 
+// Bytes-compiled modules carry no URL, so remember the fetch URL per buffer
+// like the SDK's Response patch does.
+const bufferUrls = new WeakMap();
+const origArrayBuffer = Response.prototype.arrayBuffer;
+Response.prototype.arrayBuffer = function arrayBuffer() {
+  return origArrayBuffer.call(this).then(buffer => {
+    if (this.url) {
+      bufferUrls.set(buffer, this.url);
+    }
+    return buffer;
+  });
+};
+
+const origInstantiate = WebAssembly.instantiate;
+WebAssembly.instantiate = function instantiate(source, importObject) {
+  return origInstantiate(source, importObject).then(result => {
+    const url = bufferUrls.get(source instanceof ArrayBuffer ? source : source.buffer);
+    if (url && result.module) {
+      registerModuleAndForward(result.module, url);
+    }
+    return result;
+  });
+};
+
 const origInstantiateStreaming = WebAssembly.instantiateStreaming;
 WebAssembly.instantiateStreaming = function instantiateStreaming(response, importObject) {
   return Promise.resolve(response).then(res => {
@@ -26,6 +50,10 @@ function registerModuleAndForward(module, url) {
       debug_file: null,
       debug_id: `${`${buildId}00000000000000000000000000000000`.slice(0, 32)}0`,
     };
+    const moduleName = getModuleName(module);
+    if (moduleName) {
+      image.moduleName = moduleName;
+    }
 
     self.postMessage({
       _sentryMessage: true,
@@ -46,6 +74,24 @@ function getBuildId(module) {
   return null;
 }
 
+// Read the module name from the `name` custom section. Chrome labels
+// bytes-compiled modules `wasm://wasm/<name>-<hash>`, and the main thread
+// links such frames to this image by that name.
+function getModuleName(module) {
+  const sections = WebAssembly.Module.customSections(module, 'name');
+  if (sections.length === 0) {
+    return null;
+  }
+  const bytes = new Uint8Array(sections[0]);
+  // Subsection id 0 is the module name: id, payload size, name length, name.
+  // Sizes are LEB128, but the fixture's fit in one byte each.
+  if (bytes[0] !== 0) {
+    return null;
+  }
+  const length = bytes[2];
+  return new TextDecoder().decode(bytes.subarray(3, 3 + length));
+}
+
 // Handle messages from the main thread
 self.addEventListener('message', async event => {
   if (event.origin !== '' && event.origin !== self.location.origin) {
@@ -56,15 +102,23 @@ self.addEventListener('message', async event => {
     throw new Error('WASM error from worker');
   }
 
-  if (event.data.type === 'load-wasm-and-crash') {
+  if (event.data.type === 'load-wasm-and-crash' || event.data.type === 'load-wasm-bytes-and-crash') {
     const wasmUrl = event.data.wasmUrl;
+    const imports = {
+      env: {
+        external_func: crash,
+      },
+    };
 
     try {
-      const { instance } = await WebAssembly.instantiateStreaming(fetch(wasmUrl), {
-        env: {
-          external_func: crash,
-        },
-      });
+      let instance;
+      if (event.data.type === 'load-wasm-bytes-and-crash') {
+        const response = await fetch(wasmUrl);
+        const buffer = await response.arrayBuffer();
+        ({ instance } = await WebAssembly.instantiate(new Uint8Array(buffer), imports));
+      } else {
+        ({ instance } = await WebAssembly.instantiateStreaming(fetch(wasmUrl), imports));
+      }
 
       instance.exports.internal_func();
     } catch (err) {

dev-packages/browser-integration-tests/suites/wasm/webWorker/subject.js

@@ -6,3 +6,10 @@ window.triggerWasmError = () => {
     wasmUrl: 'https://localhost:5887/simple.wasm',
   });
 };
+
+window.triggerWasmBufferError = () => {
+  window.wasmWorker.postMessage({
+    type: 'load-wasm-bytes-and-crash',
+    wasmUrl: 'https://localhost:5887/named.wasm',
+  });
+};

dev-packages/browser-integration-tests/suites/wasm/webWorker/test.ts

@@ -9,6 +9,7 @@ declare global {
   interface Window {
     wasmWorker: Worker;
     triggerWasmError: () => void;
+    triggerWasmBufferError: () => void;
   }
 }
 
@@ -137,3 +138,70 @@ sentryTest(
     );
   },
 );
+
+// `named.wasm` is `simple.wasm` plus a module-name subsection (`namedmodule`).
+// Chrome labels bytes-compiled modules with a name as `wasm://wasm/namedmodule-<hash>`,
+// not with the fetch URL, so the frame has to be linked to the image by that name.
+sentryTest(
+  'WASM frames from a module compiled from fetched bytes in a worker should map to its debug image',
+  async ({ getLocalTestUrl, page, browserName }) => {
+    if (shouldSkipWASMTests(browserName)) {
+      sentryTest.skip();
+    }
+
+    const url = await getLocalTestUrl({ testDir: __dirname });
+
+    await page.route('**/named.wasm', route => {
+      const wasmModule = fs.readFileSync(path.resolve(__dirname, '../named.wasm'));
+      return route.fulfill({
+        status: 200,
+        body: wasmModule,
+        headers: {
+          'Content-Type': 'application/wasm',
+        },
+      });
+    });
+
+    await page.route('**/worker.js', route => {
+      return route.fulfill({
+        path: `${__dirname}/assets/worker.js`,
+      });
+    });
+
+    const errorEventPromise = waitForErrorRequest(page, e => {
+      return e.exception?.values?.[0]?.value === 'WASM error from worker';
+    });
+
+    await page.goto(url);
+
+    await page.waitForFunction(() => window.wasmWorker !== undefined);
+
+    await page.evaluate(() => {
+      window.triggerWasmBufferError();
+    });
+
+    const errorEvent = envelopeRequestParser(await errorEventPromise);
+
+    expect(errorEvent.debug_meta?.images).toEqual([
+      {
+        type: 'wasm',
+        code_file: 'https://localhost:5887/named.wasm',
+        code_id: '0ba020cdd2444f7eafdd25999a8e9010',
+        debug_file: null,
+        debug_id: '0ba020cdd2444f7eafdd25999a8e90100',
+      },
+    ]);
+
+    expect(errorEvent.exception?.values?.[0]?.stacktrace?.frames).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({
+          filename: 'https://localhost:5887/named.wasm',
+          function: 'namedmodule.internal_func',
+          platform: 'native',
+          instruction_addr: '0x8c',
+          addr_mode: 'rel:0',
+        }),
+      ]),
+    );
+  },
+);

packages/wasm/src/matchSyntheticWasmFilename.ts

@@ -3,16 +3,13 @@ import type { RegisteredWasmImage } from './registry';
 /**
  * Maps Chrome `wasm://wasm/<name>-<hash>` frames to a registered `code_file`.
  *
- * V8 builds the label from the wasm `name` section, so an image with a parsed
- * `moduleName` matches on that name only. Images without one are guessed from
- * the fetch URL basename (including wasm-bindgen `_bg.wasm` → `.wasm`). Hits
- * are accepted only when every candidate shares one `debug_id`.
+ * V8 builds the label from the wasm `name` section, which is parsed into
+ * `moduleName` at registration. A hit is accepted only when every image with
+ * that name shares one `debug_id`, since a page and a worker can register the
+ * same binary under different URLs.
  *
  * Hash-only `wasm://wasm/<hash>` labels carry no name and are not mapped
  * (see #23781).
- *
- * Fetch-URL frames (`http://…/file.wasm:wasm-function[…]`) still use exact
- * `code_file` lookup in `patchFrames`, not this matcher.
  */
 
 export type SyntheticWasmImageHit = {
@@ -21,17 +18,6 @@ export type SyntheticWasmImageHit = {
   codeFile: string;
 };
 
-type Hit = SyntheticWasmImageHit & { debugId: string };
-
-/** Last path segment of a registered wasm URL (`http://…/demo_bg.wasm` → `demo_bg.wasm`). */
-export function fileBasename(url: string): string | undefined {
-  try {
-    return new URL(url).pathname.split('/').pop() || undefined;
-  } catch {
-    return url.split('/').pop();
-  }
-}
-
 /**
  * Module name from Chrome's label: `wasm://wasm/demo.wasm-000197f6` → `demo.wasm`.
  *
@@ -48,42 +34,6 @@ export function syntheticModuleName(filename: string): string | undefined {
   return name === body ? undefined : name;
 }
 
-/**
- * Fetch filename plus known packaging aliases.
- *
- * wasm-bindgen writes `foo_bg.wasm` next to `foo.js` but the stack label is often
- * `foo.wasm`. Used only for images without a parsed name section.
- */
-export function namesForRegisteredWasm(codeFile: string): string[] {
-  const basename = fileBasename(codeFile);
-  if (!basename) {
-    return [];
-  }
-
-  const names = [basename];
-  const withoutBindgenBg = basename.replace(/_bg\.wasm$/i, '.wasm');
-  if (withoutBindgenBg !== basename) {
-    names.push(withoutBindgenBg);
-  }
-  return names;
-}
-
-function imageMatchesSyntheticName(image: RegisteredWasmImage, syntheticName: string): boolean {
-  if (image.moduleName) {
-    return image.moduleName === syntheticName;
-  }
-  return namesForRegisteredWasm(image.code_file).includes(syntheticName);
-}
-
-/**
- * Multiple URLs may register the same binary. Only use a hit when every candidate
- * shares one `debug_id`. Different binaries with the same name stay unmatched.
- */
-export function uniqueHitByDebugId<T extends { debugId: string }>(hits: T[]): T | undefined {
-  const debugIds = new Set(hits.map(hit => hit.debugId));
-  return debugIds.size === 1 ? hits[0] : undefined;
-}
-
 export function uniqueImageForSyntheticFilename(
   filename: string,
   pageImages: ReadonlyArray<RegisteredWasmImage>,
@@ -94,18 +44,19 @@ export function uniqueImageForSyntheticFilename(
     return undefined;
   }
 
-  const hits: Hit[] = [];
+  const hits: Array<SyntheticWasmImageHit & { debugId: string }> = [];
   const consider = (images: ReadonlyArray<RegisteredWasmImage>, worker: boolean): void => {
     images.forEach((image, index) => {
-      if (imageMatchesSyntheticName(image, name)) {
+      if (image.moduleName === name) {
         hits.push({ index, worker, codeFile: image.code_file, debugId: image.debug_id });
       }
     });
   };
   consider(pageImages, false);
   consider(workerImages, true);
-  const hit = uniqueHitByDebugId(hits);
-  if (!hit) {
+
+  const hit = hits[0];
+  if (!hit || hits.some(other => other.debugId !== hit.debugId)) {
     return undefined;
   }
   return { index: hit.index, worker: hit.worker, codeFile: hit.codeFile };

packages/wasm/src/patchWasmResponse.ts

@@ -8,11 +8,6 @@ import { fill } from '@sentry/core';
  * This module patches `Response.prototype.arrayBuffer` and `bytes` so that when wasm is fetched
  * and then loaded from bytes, we can map the resulting `ArrayBuffer` back to the fetch URL via
  * `getWasmSourceUrl()` and register the module in `patchNonStreamingWebAssembly`.
- *
- * Every response body is tagged, not only the wasm-looking ones. A tag is read back solely after a
- * `WebAssembly` compile already succeeded, so tagging a non-wasm buffer can never be observed,
- * whereas guessing from content type or file extension would silently drop modules served as
- * `application/octet-stream` or from extension-less URLs.
  */
 const wasmSourceUrls = new WeakMap<ArrayBuffer, string>();
 
@@ -43,27 +38,25 @@ function toArrayBuffer(source: unknown): ArrayBuffer | undefined {
   return undefined;
 }
 
-/**
- * Synthetic responses (`new Response(...)`) have no URL and nothing to tag,
- * so their body reads are passed through untouched.
- */
-function responseUrl(response: Response): string | undefined {
-  try {
-    return response.url || undefined;
-  } catch {
-    return undefined;
+function looksLikeWasmResponse(response: Response): boolean {
+  const contentType = response.headers.get('content-type');
+  if (contentType?.includes('application/wasm')) {
+    return true;
   }
+
+  const { url } = response;
+  return Boolean(url && /\.wasm(?:\?|#|$)/i.test(url));
 }
 
 /**
  * Runs inside the caller's `arrayBuffer()` / `bytes()` promise chain, so it must never throw:
  * a failure here would reject a body read that has nothing to do with wasm.
  */
-function tagResponseSource(source: unknown, url: string): void {
+function tagResponseSource(response: Response, source: unknown): void {
   try {
     const buffer = toArrayBuffer(source);
-    if (buffer) {
-      wasmSourceUrls.set(buffer, url);
+    if (buffer && response.url && looksLikeWasmResponse(response)) {
+      wasmSourceUrls.set(buffer, response.url);
     }
   } catch {
     // see above
@@ -83,12 +76,8 @@ export function patchWasmResponseBodyReaders(): void {
   fill(Response.prototype, 'arrayBuffer', (original: (this: Response) => Promise<ArrayBuffer>) => {
     return function arrayBuffer(this: Response): Promise<ArrayBuffer> {
       const bufferPromise: Promise<ArrayBuffer> = original.call(this);
-      const url = responseUrl(this);
-      if (!url) {
-        return bufferPromise;
-      }
       return bufferPromise.then(buffer => {
-        tagResponseSource(buffer, url);
+        tagResponseSource(this, buffer);
         return buffer;
       });
     };
@@ -97,12 +86,8 @@ export function patchWasmResponseBodyReaders(): void {
   fill(Response.prototype, 'bytes', (original: (this: Response) => Promise<Uint8Array>) => {
     return function bytes(this: Response): Promise<Uint8Array> {
       const bytesPromise: Promise<Uint8Array> = original.call(this);
-      const url = responseUrl(this);
-      if (!url) {
-        return bytesPromise;
-      }
       return bytesPromise.then(bytes => {
-        tagResponseSource(bytes, url);
+        tagResponseSource(this, bytes);
         return bytes;
       });
     };