fix(wasm): match wasm:// frames on the name section and cover it end to end

- Match on the parsed name-section module name only; guess from the fetch
  basename only for images without one
- Treat a label as hash-only when no `-<hash>` suffix was stripped, so
  hex-looking module names such as `ed25519` still map
- Drop the unreachable bare `wasm://` branch in patchFrames; Chrome always
  keeps `:wasm-function[N]:0xADDR` in the filename
- Skip tagging body reads of responses without a URL
- Feed unit tests the real Chrome frame shape and add a browser test that
  loads a module from fetched bytes and asserts the frame maps to its image

Author: timfish

dev-packages/browser-integration-tests/suites/wasm/instantiateBufferRegistration/init.js

@@ -1,20 +1,15 @@
 import * as Sentry from '@sentry/browser';
-import { registerWebWorkerWasm } from '@sentry/wasm';
+import { wasmIntegration } from '@sentry/wasm';
 
 window.Sentry = Sentry;
 
 Sentry.init({
   traceLifecycle: 'static',
   dsn: 'https://public@dsn.ingest.sentry.io/1337',
-});
-
-// `registerWebWorkerWasm` installs the same patches a worker would, and reports
-// every registered module to the scope it is given. Collecting them here is the
-// only way to observe registration from the page, since main-thread images stay
-// module-internal until a frame matches one.
-window.registeredImages = [];
-registerWebWorkerWasm({
-  self: {
-    postMessage: message => window.registeredImages.push(...(message._sentryWasmImages || [])),
+  integrations: [wasmIntegration()],
+  beforeSend: event => {
+    window.events.push(event);
+    return null;
   },
 });
+window.events = [];

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

@@ -1,12 +1,20 @@
-window.loadWasmFromBuffer = async () => {
-  const response = await fetch('https://localhost:5887/simple.wasm');
-  const buffer = await response.arrayBuffer();
+window.getEvent = async () => {
+  function crash() {
+    throw new Error('whoops');
+  }
 
-  await WebAssembly.instantiate(new Uint8Array(buffer), {
+  const response = await fetch('https://localhost:5887/named.wasm');
+  const buffer = await response.arrayBuffer();
+  const { instance } = await WebAssembly.instantiate(new Uint8Array(buffer), {
     env: {
-      external_func: () => {},
+      external_func: crash,
     },
   });
 
-  return window.registeredImages;
+  try {
+    instance.exports.internal_func();
+  } catch (err) {
+    Sentry.captureException(err);
+    return window.events.pop();
+  }
 };

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

@@ -1,48 +1,68 @@
-import type { Page, Route } from '@playwright/test';
 import { expect } from '@playwright/test';
 import fs from 'fs';
 import path from 'path';
 import { sentryTest } from '../../../utils/fixtures';
 import { shouldSkipWASMTests } from '../../../utils/wasmHelpers';
 
-function serveWasmFixture(page: Page): Promise<void> {
-  return page.route('**/simple.wasm', (route: Route) => {
-    const wasmModule = fs.readFileSync(path.resolve(__dirname, '..', 'simple.wasm'));
-
-    return route.fulfill({
-      status: 200,
-      body: wasmModule,
-      headers: {
-        'Content-Type': 'application/wasm',
-      },
-    });
-  });
-}
-
+// `named.wasm` is `../simple.wasm` plus a module-name subsection (`namedmodule`)
+// in its `name` section. Chrome labels bytes-compiled modules with that name
+// as `wasm://wasm/namedmodule-<hash>`, not with the fetch URL.
 sentryTest(
-  'registers a module loaded via fetch, arrayBuffer and instantiate under its response url',
+  'maps frames of a module compiled from fetched bytes to its debug image',
   async ({ getLocalTestUrl, page, browserName }) => {
     if (shouldSkipWASMTests(browserName)) {
       sentryTest.skip();
     }
 
     const url = await getLocalTestUrl({ testDir: __dirname });
-    await serveWasmFixture(page);
+
+    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.goto(url);
 
-    const images = await page.evaluate(async () => {
+    const event = await page.evaluate(async () => {
       // @ts-expect-error this function exists
-      return window.loadWasmFromBuffer();
+      return window.getEvent();
     });
 
-    expect(images).toEqual([
-      {
-        type: 'wasm',
-        code_file: 'https://localhost:5887/simple.wasm',
-        code_id: '0ba020cdd2444f7eafdd25999a8e9010',
-        debug_file: null,
-        debug_id: '0ba020cdd2444f7eafdd25999a8e90100',
-      },
-    ]);
+    expect(event.exception.values[0].stacktrace.frames).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({
+          filename: 'https://localhost:5887/named.wasm',
+          function: 'namedmodule.internal_func',
+          in_app: true,
+          instruction_addr: '0x8c',
+          addr_mode: 'rel:0',
+          platform: 'native',
+        }),
+        expect.objectContaining({
+          filename: expect.stringMatching(/subject\.bundle\.js$/),
+          function: 'crash',
+          in_app: true,
+        }),
+      ]),
+    );
+
+    expect(event.debug_meta).toMatchObject({
+      images: [
+        {
+          code_file: 'https://localhost:5887/named.wasm',
+          code_id: '0ba020cdd2444f7eafdd25999a8e9010',
+          debug_file: null,
+          debug_id: '0ba020cdd2444f7eafdd25999a8e90100',
+          type: 'wasm',
+        },
+      ],
+    });
   },
 );

dev-packages/browser-integration-tests/suites/wasm/named.wasm

@@ -110,8 +110,8 @@ export function patchFrames(
       match = frame.filename.match(PARSER_REGEX) as null | [string, string, string];
     }
 
-    // `<url>:wasm-function[N]:0xADDR` — address is still in filename (JS parser did not split it).
-    // `<url>` is usually the fetch URL (`http://…/app.wasm`); Chrome may instead use `wasm://wasm/<file>-<hash>`.
+    // `<url>` is the fetch URL, or `wasm://wasm/<name>-<hash>` when Chrome
+    // compiled the module from bytes.
     if (match) {
       let index = getImage(match[1]);
       let workerImageIndex = getWorkerImage(match[1]);
@@ -147,23 +147,6 @@ export function patchFrames(
         frame.addr_mode = `rel:${existingImagesOffset + mainThreadImagesCount + workerImageIndex}`;
         hasAtLeastOneWasmFrameWithImage = true;
       }
-    } else {
-      // Bare `wasm://wasm/<file>-<hash>` — JS parser already set `instruction_addr`.
-      const unique = uniqueImageForSyntheticFilename(frame.filename, getImages(), WINDOW._sentryWasmImages || []);
-      if (unique && frame.instruction_addr) {
-        frame.filename = unique.codeFile;
-        frame.platform = 'native';
-        if (applicationKey) {
-          frame.module_metadata = {
-            ...frame.module_metadata,
-            [`${BUNDLER_PLUGIN_APP_KEY_PREFIX}${applicationKey}`]: true,
-          };
-        }
-        frame.addr_mode = unique.worker
-          ? `rel:${existingImagesOffset + getImages().length + unique.index}`
-          : `rel:${existingImagesOffset + unique.index}`;
-        hasAtLeastOneWasmFrameWithImage = true;
-      }
     }
   });
 

packages/wasm/src/index.ts

@@ -1,15 +1,15 @@
-import type { DebugImage } from '@sentry/core';
 import type { RegisteredWasmImage } from './registry';
 
 /**
  * Maps Chrome `wasm://wasm/<name>-<hash>` frames to a registered `code_file`.
  *
- * Prefer the wasm `name` section (`moduleName`). If that section is missing or
- * does not match the stack label, guess 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, 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`.
  *
- * Hash-only `wasm://wasm/<id>` is not mapped (see #23781).
+ * 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.
@@ -33,22 +33,26 @@ export function fileBasename(url: string): string | undefined {
 }
 
 /**
- * Chrome's module label without the `wasm://wasm/` prefix or trailing isolate hash.
- * `wasm://wasm/demo.wasm-000197f6` → `demo.wasm`. Hash-only `wasm://wasm/0bee4c4e` → `0bee4c4e`.
+ * Module name from Chrome's label: `wasm://wasm/demo.wasm-000197f6` → `demo.wasm`.
+ *
+ * V8 appends the `-<hash>` suffix only after a module name. A label without
+ * it is hash-only and yields `undefined`, so a hex-looking module name such
+ * as `ed25519` is still returned.
  */
 export function syntheticModuleName(filename: string): string | undefined {
   const body = filename.match(/^wasm:\/\/wasm\/(.+)$/i)?.[1];
   if (!body) {
     return undefined;
   }
-  return body.replace(/-[0-9a-fA-F]{6,16}$/, '');
+  const name = body.replace(/-[0-9a-fA-F]{6,16}$/, '');
+  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 when the name section is missing or does not match.
+ * `foo.wasm`. Used only for images without a parsed name section.
  */
 export function namesForRegisteredWasm(codeFile: string): string[] {
   const basename = fileBasename(codeFile);
@@ -64,20 +68,11 @@ export function namesForRegisteredWasm(codeFile: string): string[] {
   return names;
 }
 
-export function registeredWasmMatchesSyntheticName(codeFile: string, syntheticName: string): boolean {
-  return namesForRegisteredWasm(codeFile).includes(syntheticName);
-}
-
-function wasmNameSectionName(image: DebugImage): string | undefined {
-  const moduleName = (image as RegisteredWasmImage).moduleName;
-  return typeof moduleName === 'string' && moduleName.length > 0 ? moduleName : undefined;
-}
-
-export function imageMatchesSyntheticName(image: DebugImage, syntheticName: string): boolean {
-  if (wasmNameSectionName(image) === syntheticName) {
-    return true;
+function imageMatchesSyntheticName(image: RegisteredWasmImage, syntheticName: string): boolean {
+  if (image.moduleName) {
+    return image.moduleName === syntheticName;
   }
-  return typeof image.code_file === 'string' && registeredWasmMatchesSyntheticName(image.code_file, syntheticName);
+  return namesForRegisteredWasm(image.code_file).includes(syntheticName);
 }
 
 /**
@@ -89,28 +84,20 @@ export function uniqueHitByDebugId<T extends { debugId: string }>(hits: T[]): T
   return debugIds.size === 1 ? hits[0] : undefined;
 }
 
-/**
- * Chrome's isolate hash is not a debug_id and is not on `WebAssembly.Module`.
- * `wasm://wasm/<hex>` with no module name must not pick an image (see #23781).
- */
-function isHashOnlySyntheticName(name: string): boolean {
-  return /^[0-9a-fA-F]{6,16}$/.test(name);
-}
-
 export function uniqueImageForSyntheticFilename(
   filename: string,
-  pageImages: ReadonlyArray<DebugImage>,
-  workerImages: ReadonlyArray<DebugImage>,
+  pageImages: ReadonlyArray<RegisteredWasmImage>,
+  workerImages: ReadonlyArray<RegisteredWasmImage>,
 ): SyntheticWasmImageHit | undefined {
   const name = syntheticModuleName(filename);
-  if (!name || isHashOnlySyntheticName(name)) {
+  if (!name) {
     return undefined;
   }
 
   const hits: Hit[] = [];
-  const consider = (images: ReadonlyArray<DebugImage>, worker: boolean): void => {
+  const consider = (images: ReadonlyArray<RegisteredWasmImage>, worker: boolean): void => {
     images.forEach((image, index) => {
-      if (image.type === 'wasm' && typeof image.code_file === 'string' && imageMatchesSyntheticName(image, name)) {
+      if (imageMatchesSyntheticName(image, name)) {
         hits.push({ index, worker, codeFile: image.code_file, debugId: image.debug_id });
       }
     });

packages/wasm/src/matchSyntheticWasmFilename.ts

@@ -43,15 +43,27 @@ 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;
+  }
+}
+
 /**
  * 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(response: Response, source: unknown): void {
+function tagResponseSource(source: unknown, url: string): void {
   try {
     const buffer = toArrayBuffer(source);
-    if (buffer && response.url) {
-      wasmSourceUrls.set(buffer, response.url);
+    if (buffer) {
+      wasmSourceUrls.set(buffer, url);
     }
   } catch {
     // see above
@@ -71,8 +83,12 @@ 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(this, buffer);
+        tagResponseSource(buffer, url);
         return buffer;
       });
     };
@@ -81,8 +97,12 @@ 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(this, bytes);
+        tagResponseSource(bytes, url);
         return bytes;
       });
     };