test(wasm): Move WASM test to Playwright and remove Puppeteer (#7217)

Move the integration test for our WASM integration to our Playwright browser integration test suite. With this change we finally get rid of Puppeteer in our monorepo.

Author: Lms24

packages/integration-tests/suites/wasm/init.js

@@ -0,0 +1,13 @@
+import * as Sentry from '@sentry/browser';
+import { Wasm } from '@sentry/wasm';
+
+window.Sentry = Sentry;
+
+Sentry.init({
+  dsn: 'https://public@dsn.ingest.sentry.io/1337',
+  integrations: [new Wasm()],
+  beforeSend: event => {
+    window.events.push(event);
+    return null;
+  },
+});

packages/wasm/test/public/simple.wasm …ntegration-tests/suites/wasm/simple.wasmpackages/wasm/test/public/simple.wasm renamed to packages/integration-tests/suites/wasm/simple.wasm packages/wasm/test/public/simple.wasm renamed to packages/integration-tests/suites/wasm/simple.wasm

@@ -0,0 +1,20 @@
+window.events = [];
+
+window.getEvent = async () => {
+  function crash() {
+    throw new Error('whoops');
+  }
+
+  const { instance } = await WebAssembly.instantiateStreaming(fetch('https://localhost:5887/simple.wasm'), {
+    env: {
+      external_func: crash,
+    },
+  });
+
+  try {
+    instance.exports.internal_func();
+  } catch (err) {
+    Sentry.captureException(err);
+    return window.events.pop();
+  }
+};

packages/integration-tests/suites/wasm/subject.js

@@ -0,0 +1,66 @@
+import { expect } from '@playwright/test';
+import fs from 'fs';
+import path from 'path';
+
+import { sentryTest } from '../../utils/fixtures';
+import { shouldSkipWASMTests } from '../../utils/wasmHelpers';
+
+sentryTest(
+  'captured exception should include modified frames and debug_meta attribute',
+  async ({ getLocalTestPath, page, browserName }) => {
+    if (shouldSkipWASMTests(browserName)) {
+      sentryTest.skip();
+    }
+
+    const url = await getLocalTestPath({ testDir: __dirname });
+
+    await page.route('**/simple.wasm', route => {
+      const wasmModule = fs.readFileSync(path.resolve(__dirname, 'simple.wasm'));
+
+      return route.fulfill({
+        status: 200,
+        body: wasmModule,
+        headers: {
+          'Content-Type': 'application/wasm',
+        },
+      });
+    });
+
+    await page.goto(url);
+
+    const event = await page.evaluate(async () => {
+      // @ts-ignore this function exists
+      return window.getEvent();
+    });
+
+    expect(event.exception.values[0].stacktrace.frames).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({
+          filename: expect.stringMatching(/simple\.wasm$/),
+          function: '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: expect.stringMatching(/simple\.wasm$/),
+          code_id: '0ba020cdd2444f7eafdd25999a8e9010',
+          debug_file: null,
+          debug_id: '0ba020cdd2444f7eafdd25999a8e90100',
+          type: 'wasm',
+        },
+      ],
+    });
+  },
+);

packages/integration-tests/suites/wasm/test.ts

@@ -47,6 +47,14 @@ const BUNDLE_PATHS: Record<string, Record<string, string>> = {
     bundle_replay_es6: 'build/bundles/[INTEGRATION_NAME].js',
     bundle_replay_es6_min: 'build/bundles/[INTEGRATION_NAME].min.js',
   },
+  wasm: {
+    cjs: 'build/npm/cjs/index.js',
+    esm: 'build/npm/esm/index.js',
+    bundle_es6: 'build/bundles/wasm.js',
+    bundle_es6_min: 'build/bundles/wasm.min.js',
+    bundle_replay_es6: 'build/bundles/wasm.js',
+    bundle_replay_es6_min: 'build/bundles/wasm.min.js',
+  },
 };
 
 /*
@@ -94,6 +102,7 @@ function generateSentryAlias(): Record<string, string> {
 class SentryScenarioGenerationPlugin {
   public requiresTracing: boolean = false;
   public requiredIntegrations: string[] = [];
+  public requiresWASMIntegration: boolean = false;
 
   private _name: string = 'SentryScenarioGenerationPlugin';
 
@@ -107,6 +116,7 @@ class SentryScenarioGenerationPlugin {
             '@sentry/tracing': 'Sentry',
             '@sentry/integrations': 'Sentry.Integrations',
             '@sentry/replay': 'Sentry',
+            '@sentry/wasm': 'Sentry.Integrations',
           }
         : {};
 
@@ -121,6 +131,8 @@ class SentryScenarioGenerationPlugin {
               this.requiresTracing = true;
             } else if (source === '@sentry/integrations') {
               this.requiredIntegrations.push(statement.specifiers[0].imported.name.toLowerCase());
+            } else if (source === '@sentry/wasm') {
+              this.requiresWASMIntegration = true;
             }
           },
         );
@@ -148,6 +160,14 @@ class SentryScenarioGenerationPlugin {
             data.assetTags.scripts.unshift(integrationObject);
           });
 
+          if (this.requiresWASMIntegration && BUNDLE_PATHS['wasm'][bundleKey]) {
+            const wasmObject = createHtmlTagObject('script', {
+              src: path.resolve(PACKAGES_DIR, 'wasm', BUNDLE_PATHS['wasm'][bundleKey]),
+            });
+
+            data.assetTags.scripts.unshift(wasmObject);
+          }
+
           data.assetTags.scripts.unshift(bundleObject);
         }
 

packages/integration-tests/utils/generatePlugin.ts

@@ -0,0 +1,15 @@
+/**
+ * We can only test WASM tests in certain bundles/packages:
+ * - NPM (ESM, CJS)
+ * - ES6 CDN bundles
+ * - On browsers other than WebKit
+ *
+ * @returns `true` if we should skip the replay test
+ */
+export function shouldSkipWASMTests(browser: string): boolean {
+  if (browser === 'webkit') {
+    return true;
+  }
+  const bundle = process.env.PW_BUNDLE as string | undefined;
+  return bundle != null && bundle.includes('es5');
+}

packages/integration-tests/utils/wasmHelpers.ts

@@ -21,13 +21,6 @@
     "@sentry/utils": "7.38.0",
     "tslib": "^1.9.3"
   },
-  "devDependencies": {
-    "@types/jest-environment-puppeteer": "^4.4.0",
-    "cross-env": "^7.0.3",
-    "express": "^4.17.1",
-    "jest-puppeteer": "^4.4.0",
-    "puppeteer": "18.2.1"
-  },
   "scripts": {
     "build": "run-p build:transpile build:bundle build:types",
     "build:bundle": "rollup --config rollup.bundle.config.js",
@@ -47,9 +40,7 @@
     "fix:prettier": "prettier --write \"{src,test,scripts}/**/**.ts\"",
     "lint": "run-s lint:prettier lint:eslint",
     "lint:eslint": "eslint . --format stylish",
-    "lint:prettier": "prettier --check \"{src,test,scripts}/**/**.ts\"",
-    "test": "node test/scripts/ensure-bundles.js && cross-env PORT=1337 jest",
-    "test:watch": "jest --watch"
+    "lint:prettier": "prettier --check \"{src,test,scripts}/**/**.ts\""
   },
   "volta": {
     "extends": "../../package.json"