add working e2e tests

Author: Lms24

dev-packages/e2e-tests/lib/copyToTemp.ts

@@ -28,7 +28,7 @@ function fixPackageJson(cwd: string): void {
 
   // 2. Fix volta extends
   if (!packageJson.volta) {
-    throw new Error('No volta config found, please provide one!');
+    throw new Error("No volta config found, please add one to the test app's package.json!");
   }
 
   if (typeof packageJson.volta.extends === 'string') {

dev-packages/e2e-tests/test-applications/browser-webworker-vite/.npmrc

@@ -0,0 +1,2 @@
+@sentry:registry=http://127.0.0.1:4873
+@sentry-internal:registry=http://127.0.0.1:4873

dev-packages/e2e-tests/test-applications/browser-webworker-vite/package.json

@@ -1,12 +1,13 @@
 {
-  "name": "gh-sentry-javascript-bundler-plugins-755-vite-worker-bundles",
+  "name": "browser-webworker-vite",
   "private": true,
   "version": "0.0.0",
   "type": "module",
   "scripts": {
     "dev": "vite",
-    "build": "rm -rf dist &&tsc && vite build",
+    "build": "rm -rf dist && tsc && vite build",
     "preview": "vite preview --port 3030",
+    "test": "playwright test",
     "test:build": "pnpm install && pnpm build",
     "test:assert": "pnpm test"
   },
@@ -17,7 +18,12 @@
     "vite": "^7.0.4"
   },
   "dependencies": {
-    "@sentry/browser": "^9.38.0",
+    "@sentry/browser": "latest || *",
     "@sentry/vite-plugin": "^3.5.0"
+  },
+  "volta": {
+    "node": "20.19.2",
+    "yarn": "1.22.22",
+    "pnpm": "9.15.9"
   }
 }

dev-packages/e2e-tests/test-applications/browser-webworker-vite/playwright.config.mjs

@@ -2,6 +2,9 @@ import { getPlaywrightConfig } from '@sentry-internal/test-utils';
 
 const config = getPlaywrightConfig({
   startCommand: `pnpm preview`,
+  eventProxyFile: 'start-event-proxy.mjs',
+  eventProxyPort: 3031,
+  port: 3030,
 });
 
 export default config;

dev-packages/e2e-tests/test-applications/browser-webworker-vite/src/main.ts

@@ -1,13 +1,13 @@
-import './style.css';
 import MyWorker from './worker.ts?worker';
 import * as Sentry from '@sentry/browser';
 
 Sentry.init({
-  dsn: import.meta.env.E2E_TEST_DSN,
+  dsn: import.meta.env.PUBLIC_E2E_TEST_DSN,
   environment: import.meta.env.MODE || 'development',
   tracesSampleRate: 1.0,
   debug: true,
   integrations: [Sentry.browserTracingIntegration()],
+  tunnel: 'http://localhost:3031/', // proxy server
 });
 
 const worker = new MyWorker();
@@ -16,12 +16,11 @@ Sentry.addIntegration(Sentry.webWorkerIntegration({ worker }));
 
 worker.addEventListener('message', event => {
   // this is part of the test, do not delete
-  console.log('xx received message from worker', event);
+  console.log('received message from worker:', event.data.msg);
 });
 
 document.querySelector<HTMLButtonElement>('#trigger-error')!.addEventListener('click', () => {
   worker.postMessage({
-    type: 'TRIGGER_ERROR',
-    data: 'This message triggers an uncaught error!',
+    msg: 'TRIGGER_ERROR',
   });
 });

dev-packages/e2e-tests/test-applications/browser-webworker-vite/tests/errors.test.ts

@@ -1,20 +1,20 @@
 import { expect, test } from '@playwright/test';
 import { waitForError, waitForTransaction } from '@sentry-internal/test-utils';
 
-const E2E_TEST_APP_NAME = 'browser-webworker-vite';
-
 test('captures an error with debug ids and pageload trace context', async ({ page }) => {
-  const errorEventPromise = waitForError(E2E_TEST_APP_NAME, event => {
-    return !event.type && event.exception?.values?.[0]?.value === 'Uncaught error in worker';
+  const errorEventPromise = waitForError('browser-webworker-vite', async event => {
+    return !event.type && !!event.exception?.values?.[0];
   });
 
-  const transactionPromise = waitForTransaction(E2E_TEST_APP_NAME, transactionEvent => {
+  const transactionPromise = waitForTransaction('browser-webworker-vite', transactionEvent => {
     return !!transactionEvent?.transaction && transactionEvent.contexts?.trace?.op === 'pageload';
   });
 
   await page.goto('/');
 
-  await page.locator('id=trigger-error').click();
+  await page.locator('#trigger-error').click();
+
+  await page.waitForTimeout(1000);
 
   const errorEvent = await errorEventPromise;
   const transactionEvent = await transactionPromise;
@@ -23,15 +23,15 @@ test('captures an error with debug ids and pageload trace context', async ({ pag
   const pageloadSpanId = transactionEvent.contexts?.trace?.span_id;
 
   expect(errorEvent.exception?.values).toHaveLength(1);
-  expect(errorEvent.exception?.values?.[0]?.value).toBe('Uncaught error in worker');
+  expect(errorEvent.exception?.values?.[0]?.value).toBe('Uncaught Error: Uncaught error in worker');
   expect(errorEvent.exception?.values?.[0]?.stacktrace?.frames).toHaveLength(1);
-  expect(errorEvent.exception?.values?.[0]?.stacktrace?.frames?.[0]?.filename).toContain('worker.js');
+  expect(errorEvent.exception?.values?.[0]?.stacktrace?.frames?.[0]?.filename).toMatch(/worker-.+\.js$/);
 
   expect(errorEvent.transaction).toBe('/');
   expect(transactionEvent.transaction).toBe('/');
 
   expect(errorEvent.request).toEqual({
-    url: 'http://localhost:4173/',
+    url: 'http://localhost:3030/',
     headers: expect.any(Object),
   });
 
@@ -41,11 +41,33 @@ test('captures an error with debug ids and pageload trace context', async ({ pag
   });
 
   expect(errorEvent.debug_meta).toEqual({
-    sourcemaps: {
-      'worker.js': {
-        version: expect.any(String),
-        url: expect.any(String),
+    images: [
+      {
+        code_file: expect.stringMatching(/http:\/\/localhost:3030\/assets\/worker-.+\.js/),
+        debug_id: expect.stringMatching(/[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}/),
+        type: 'sourcemap',
       },
-    },
+    ],
+  });
+});
+
+test("user worker message handlers don't trigger for sentry messages", async ({ page }) => {
+  const workerReadyPromise = new Promise<number>(resolve => {
+    let workerMessageCount = 0;
+    page.on('console', msg => {
+      if (msg.text().startsWith('received message from worker:')) {
+        workerMessageCount++;
+      }
+
+      if (msg.text() === 'received message from worker: WORKER_READY') {
+        resolve(workerMessageCount);
+      }
+    });
   });
+
+  await page.goto('/');
+
+  const workerMessageCount = await workerReadyPromise;
+
+  expect(workerMessageCount).toBe(1);
 });

dev-packages/e2e-tests/test-applications/browser-webworker-vite/vite.config.ts

@@ -4,6 +4,7 @@ import { defineConfig } from 'vite';
 export default defineConfig({
   build: {
     sourcemap: 'hidden',
+    envPrefix: ['PUBLIC_'],
   },
 
   plugins: [
@@ -23,4 +24,6 @@ export default defineConfig({
       }),
     ],
   },
+
+  envPrefix: ['PUBLIC_'],
 });