getsentry · Lms24 · Jul 17, 2025 · Jul 14, 2025 · Jul 14, 2025 · Jul 14, 2025
diff --git a/dev-packages/browser-integration-tests/suites/integrations/webWorker/assets/worker.js b/dev-packages/browser-integration-tests/suites/integrations/webWorker/assets/worker.js
@@ -0,0 +1,14 @@
+self._sentryDebugIds = {
+  'Error at http://sentry-test.io/worker.js': 'worker-debug-id-789',
+};
+
+self.postMessage({
+  _sentryMessage: true,
+  _sentryDebugIds: self._sentryDebugIds,
+});
+
+self.addEventListener('message', event => {
+  if (event.data.type === 'throw-error') {
+    throw new Error('Worker error for testing');
+  }
+});
diff --git a/dev-packages/browser-integration-tests/suites/integrations/webWorker/init.js b/dev-packages/browser-integration-tests/suites/integrations/webWorker/init.js
@@ -0,0 +1,27 @@
+import * as Sentry from '@sentry/browser';
+
+// Initialize Sentry with webWorker integration
+Sentry.init({
+  dsn: 'https://[email protected]/1337',
+  debug: true,
+  beforeSend(event) {
+    console.log('xx beforeSend', JSON.stringify(event.exception.values[0].stacktrace.frames, null, 2));
+    return event;
+  },
+});
+
+const worker = new Worker('/worker.js');
+
+worker.addEventListener('message', event => {
+  console.log('xx message', event);
+});
+
+Sentry.addIntegration(Sentry.webWorkerIntegration({ worker }));
+
+const btn = document.getElementById('errWorker');
+
+btn.addEventListener('click', () => {
+  worker.postMessage({
+    type: 'throw-error',
+  });
+});
diff --git a/dev-packages/browser-integration-tests/suites/integrations/webWorker/subject.js b/dev-packages/browser-integration-tests/suites/integrations/webWorker/subject.js
diff --git a/dev-packages/browser-integration-tests/suites/integrations/webWorker/template.html b/dev-packages/browser-integration-tests/suites/integrations/webWorker/template.html
@@ -0,0 +1,9 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+  </head>
+  <body>
+    <button id="errWorker">Throw error in worker</button>
+  </body>
+</html>
diff --git a/dev-packages/browser-integration-tests/suites/integrations/webWorker/test.ts b/dev-packages/browser-integration-tests/suites/integrations/webWorker/test.ts
@@ -0,0 +1,38 @@
+import { expect } from '@playwright/test';
+import type { Event } from '@sentry/core';
+import { sentryTest } from '../../../utils/fixtures';
+import { getFirstSentryEnvelopeRequest } from '../../../utils/helpers';
+
+sentryTest('Assigns web worker debug IDs when using webWorkerIntegration', async ({ getLocalTestUrl, page }) => {
+  const bundle = process.env.PW_BUNDLE as string | undefined;
+  if (bundle != null && !bundle.includes('esm') && !bundle.includes('cjs')) {
+    sentryTest.skip();
+  }
+
+  const url = await getLocalTestUrl({ testDir: __dirname });
+
+  const errorEventPromise = getFirstSentryEnvelopeRequest<Event>(page, url);
+
+  page.route('**/worker.js', route => {
+    route.fulfill({
+      path: `${__dirname}/assets/worker.js`,
+    });
+  });
+
+  const button = page.locator('#errWorker');
+  await button.click();
+
+  const errorEvent = await errorEventPromise;
+
+  expect(errorEvent.debug_meta?.images).toBeDefined();
+
+  const debugImages = errorEvent.debug_meta?.images || [];
+
+  expect(debugImages.length).toBe(1);
+
+  debugImages.forEach(image => {
+    expect(image.type).toBe('sourcemap');
+    expect(image.debug_id).toEqual('worker-debug-id-789');
+    expect(image.code_file).toEqual('http://sentry-test.io/worker.js');
+  });
+});
diff --git a/dev-packages/e2e-tests/test-applications/browser-webworker-vite/index.html b/dev-packages/e2e-tests/test-applications/browser-webworker-vite/index.html
@@ -0,0 +1,15 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + TS</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+    <button id="trigger-error" type="button" style="background-color: #dc3545; color: white">
+      Trigger Worker Error
+    </button>
+  </body>
+</html>
diff --git a/dev-packages/e2e-tests/test-applications/browser-webworker-vite/package.json b/dev-packages/e2e-tests/test-applications/browser-webworker-vite/package.json
@@ -0,0 +1,23 @@
+{
+  "name": "gh-sentry-javascript-bundler-plugins-755-vite-worker-bundles",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "rm -rf dist &&tsc && vite build",
+    "preview": "vite preview --port 3030",
+    "test:build": "pnpm install && pnpm build",
+    "test:assert": "pnpm test"
+  },
+  "devDependencies": {
+    "@playwright/test": "~1.53.2",
+    "@sentry-internal/test-utils": "link:../../../test-utils",
+    "typescript": "~5.8.3",
+    "vite": "^7.0.4"
+  },
+  "dependencies": {
+    "@sentry/browser": "^9.38.0",
+    "@sentry/vite-plugin": "^3.5.0"
+  }
+}
diff --git a/dev-packages/e2e-tests/test-applications/browser-webworker-vite/playwright.config.mjs b/dev-packages/e2e-tests/test-applications/browser-webworker-vite/playwright.config.mjs
@@ -0,0 +1,7 @@
+import { getPlaywrightConfig } from '@sentry-internal/test-utils';
+
+const config = getPlaywrightConfig({
+  startCommand: `pnpm preview`,
+});
+
+export default config;
diff --git a/dev-packages/e2e-tests/test-applications/browser-webworker-vite/src/main.ts b/dev-packages/e2e-tests/test-applications/browser-webworker-vite/src/main.ts
@@ -0,0 +1,27 @@
+import './style.css';
+import MyWorker from './worker.ts?worker';
+import * as Sentry from '@sentry/browser';
+
+Sentry.init({
+  dsn: import.meta.env.E2E_TEST_DSN,
+  environment: import.meta.env.MODE || 'development',
+  tracesSampleRate: 1.0,
+  debug: true,
+  integrations: [Sentry.browserTracingIntegration()],
+});
+
+const worker = new MyWorker();
+
+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);
+});
+
+document.querySelector<HTMLButtonElement>('#trigger-error')!.addEventListener('click', () => {
+  worker.postMessage({
+    type: 'TRIGGER_ERROR',
+    data: 'This message triggers an uncaught error!',
+  });
+});
diff --git a/dev-packages/e2e-tests/test-applications/browser-webworker-vite/src/vite-env.d.ts b/dev-packages/e2e-tests/test-applications/browser-webworker-vite/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/dev-packages/e2e-tests/test-applications/browser-webworker-vite/src/worker.ts b/dev-packages/e2e-tests/test-applications/browser-webworker-vite/src/worker.ts
@@ -0,0 +1,17 @@
+import * as Sentry from '@sentry/browser';
+
+// type cast necessary because TS thinks this file is part of the main
+// thread where self is of type `Window` instead of `Worker`
+Sentry.registerWebWorker({ self: self as unknown as Worker });
+
+// Let the main thread know the worker is ready
+self.postMessage({
+  msg: 'WORKER_READY',
+});
+
+self.addEventListener('message', event => {
+  if (event.data.msg === 'TRIGGER_ERROR') {
+    // This will throw an uncaught error in the worker
+    throw new Error(`Uncaught error in worker`);
+  }
+});
diff --git a/dev-packages/e2e-tests/test-applications/browser-webworker-vite/start-event-proxy.mjs b/dev-packages/e2e-tests/test-applications/browser-webworker-vite/start-event-proxy.mjs
@@ -0,0 +1,6 @@
+import { startEventProxyServer } from '@sentry-internal/test-utils';
+
+startEventProxyServer({
+  port: 3031,
+  proxyServerName: 'browser-webworker-vite',
+});
diff --git a/dev-packages/e2e-tests/test-applications/browser-webworker-vite/tests/errors.test.ts b/dev-packages/e2e-tests/test-applications/browser-webworker-vite/tests/errors.test.ts
@@ -0,0 +1,51 @@
+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 transactionPromise = waitForTransaction(E2E_TEST_APP_NAME, transactionEvent => {
+    return !!transactionEvent?.transaction && transactionEvent.contexts?.trace?.op === 'pageload';
+  });
+
+  await page.goto('/');
+
+  await page.locator('id=trigger-error').click();
+
+  const errorEvent = await errorEventPromise;
+  const transactionEvent = await transactionPromise;
+
+  const pageloadTraceId = transactionEvent.contexts?.trace?.trace_id;
+  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]?.stacktrace?.frames).toHaveLength(1);
+  expect(errorEvent.exception?.values?.[0]?.stacktrace?.frames?.[0]?.filename).toContain('worker.js');
+
+  expect(errorEvent.transaction).toBe('/');
+  expect(transactionEvent.transaction).toBe('/');
+
+  expect(errorEvent.request).toEqual({
+    url: 'http://localhost:4173/',
+    headers: expect.any(Object),
+  });
+
+  expect(errorEvent.contexts?.trace).toEqual({
+    trace_id: pageloadTraceId,
+    span_id: pageloadSpanId,
+  });
+
+  expect(errorEvent.debug_meta).toEqual({
+    sourcemaps: {
+      'worker.js': {
+        version: expect.any(String),
+        url: expect.any(String),
+      },
+    },
+  });
+});
diff --git a/dev-packages/e2e-tests/test-applications/browser-webworker-vite/tsconfig.json b/dev-packages/e2e-tests/test-applications/browser-webworker-vite/tsconfig.json
@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src"]
+}
diff --git a/dev-packages/e2e-tests/test-applications/browser-webworker-vite/vite.config.ts b/dev-packages/e2e-tests/test-applications/browser-webworker-vite/vite.config.ts
@@ -0,0 +1,26 @@
+import { sentryVitePlugin } from '@sentry/vite-plugin';
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+  build: {
+    sourcemap: 'hidden',
+  },
+
+  plugins: [
+    sentryVitePlugin({
+      org: process.env.E2E_TEST_SENTRY_ORG_SLUG,
+      project: process.env.E2E_TEST_SENTRY_PROJECT,
+      authToken: process.env.E2E_TEST_AUTH_TOKEN,
+    }),
+  ],
+
+  worker: {
+    plugins: () => [
+      ...sentryVitePlugin({
+        org: process.env.E2E_TEST_SENTRY_ORG_SLUG,
+        project: process.env.E2E_TEST_SENTRY_PROJECT,
+        authToken: process.env.E2E_TEST_AUTH_TOKEN,
+      }),
+    ],
+  },
+});
diff --git a/packages/browser/src/index.ts b/packages/browser/src/index.ts
@@ -73,3 +73,4 @@ export { openFeatureIntegration, OpenFeatureIntegrationHook } from './integratio
 export { unleashIntegration } from './integrations/featureFlags/unleash';
 export { statsigIntegration } from './integrations/featureFlags/statsig';
 export { diagnoseSdkConnectivity } from './diagnose-sdk';
+export { webWorkerIntegration, registerWebWorker } from './integrations/webWorker';