support multiple workers

Author: Lms24

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

@@ -11,5 +11,11 @@
     <button id="trigger-error" type="button" style="background-color: #dc3545; color: white">
       Trigger Worker Error
     </button>
+    <button id="trigger-error-2" type="button" style="background-color: #dc3545; color: white">
+      Trigger Worker 2 Error
+    </button>
+    <button id="trigger-error-3" type="button" style="background-color: #dc3545; color: white">
+      Trigger Worker 3 (lazily added) Error
+    </button>
   </body>
 </html>

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

@@ -1,4 +1,5 @@
 import MyWorker from './worker.ts?worker';
+import MyWorker2 from './worker2.ts?worker';
 import * as Sentry from '@sentry/browser';
 
 Sentry.init({
@@ -11,8 +12,10 @@ Sentry.init({
 });
 
 const worker = new MyWorker();
+const worker2 = new MyWorker2();
 
-Sentry.addIntegration(Sentry.webWorkerIntegration({ worker }));
+const webWorkerIntegration = Sentry.webWorkerIntegration({ worker: [worker, worker2] });
+Sentry.addIntegration(webWorkerIntegration);
 
 worker.addEventListener('message', event => {
   // this is part of the test, do not delete
@@ -24,3 +27,18 @@ document.querySelector<HTMLButtonElement>('#trigger-error')!.addEventListener('c
     msg: 'TRIGGER_ERROR',
   });
 });
+
+document.querySelector<HTMLButtonElement>('#trigger-error-2')!.addEventListener('click', () => {
+  worker2.postMessage({
+    msg: 'TRIGGER_ERROR',
+  });
+});
+
+document.querySelector<HTMLButtonElement>('#trigger-error-3')!.addEventListener('click', async () => {
+  const Worker3 = await import('./worker3.ts?worker');
+  const worker3 = new Worker3.default();
+  webWorkerIntegration.addWorker(worker3);
+  worker3.postMessage({
+    msg: 'TRIGGER_ERROR',
+  });
+});

dev-packages/e2e-tests/test-applications/browser-webworker-vite/src/worker2.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_2_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 2`);
+  }
+});

dev-packages/e2e-tests/test-applications/browser-webworker-vite/src/worker3.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_3_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 3`);
+  }
+});

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

@@ -71,3 +71,103 @@ test("user worker message handlers don't trigger for sentry messages", async ({
 
   expect(workerMessageCount).toBe(1);
 });
+
+test('captures an error from the second eagerly added worker', async ({ page }) => {
+  const errorEventPromise = waitForError('browser-webworker-vite', async event => {
+    return !event.type && !!event.exception?.values?.[0];
+  });
+
+  const transactionPromise = waitForTransaction('browser-webworker-vite', transactionEvent => {
+    return !!transactionEvent?.transaction && transactionEvent.contexts?.trace?.op === 'pageload';
+  });
+
+  await page.goto('/');
+
+  await page.locator('#trigger-error-2').click();
+
+  await page.waitForTimeout(1000);
+
+  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: Uncaught error in worker 2');
+  expect(errorEvent.exception?.values?.[0]?.stacktrace?.frames).toHaveLength(1);
+  expect(errorEvent.exception?.values?.[0]?.stacktrace?.frames?.[0]?.filename).toMatch(/worker2-.+\.js$/);
+
+  expect(errorEvent.transaction).toBe('/');
+  expect(transactionEvent.transaction).toBe('/');
+
+  expect(errorEvent.request).toEqual({
+    url: 'http://localhost:3030/',
+    headers: expect.any(Object),
+  });
+
+  expect(errorEvent.contexts?.trace).toEqual({
+    trace_id: pageloadTraceId,
+    span_id: pageloadSpanId,
+  });
+
+  expect(errorEvent.debug_meta).toEqual({
+    images: [
+      {
+        code_file: expect.stringMatching(/http:\/\/localhost:3030\/assets\/worker2-.+\.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('captures an error from the third lazily added worker', async ({ page }) => {
+  const errorEventPromise = waitForError('browser-webworker-vite', async event => {
+    return !event.type && !!event.exception?.values?.[0];
+  });
+
+  const transactionPromise = waitForTransaction('browser-webworker-vite', transactionEvent => {
+    return !!transactionEvent?.transaction && transactionEvent.contexts?.trace?.op === 'pageload';
+  });
+
+  await page.goto('/');
+
+  await page.locator('#trigger-error-3').click();
+
+  await page.waitForTimeout(1000);
+
+  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: Uncaught error in worker 3');
+  expect(errorEvent.exception?.values?.[0]?.stacktrace?.frames).toHaveLength(1);
+  expect(errorEvent.exception?.values?.[0]?.stacktrace?.frames?.[0]?.filename).toMatch(/worker3-.+\.js$/);
+
+  expect(errorEvent.transaction).toBe('/');
+  expect(transactionEvent.transaction).toBe('/');
+
+  expect(errorEvent.request).toEqual({
+    url: 'http://localhost:3030/',
+    headers: expect.any(Object),
+  });
+
+  expect(errorEvent.contexts?.trace).toEqual({
+    trace_id: pageloadTraceId,
+    span_id: pageloadSpanId,
+  });
+
+  expect(errorEvent.debug_meta).toEqual({
+    images: [
+      {
+        code_file: expect.stringMatching(/http:\/\/localhost:3030\/assets\/worker3-.+\.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',
+      },
+    ],
+  });
+});

packages/browser/src/integrations/webWorker.ts

@@ -1,3 +1,4 @@
+import type { Integration, IntegrationFn } from '@sentry/core';
 import { debug, defineIntegration, isPlainObject } from '@sentry/core';
 import { DEBUG_BUILD } from '../debug-build';
 import { WINDOW } from '../helpers';
@@ -10,21 +11,25 @@ interface WebWorkerMessage {
 }
 
 interface WebWorkerIntegrationOptions {
-  worker: Worker;
+  worker: Worker | Array<Worker>;
+}
+
+interface WebWorkerIntegration extends Integration {
+  addWorker: (worker: Worker) => void;
 }
 
 /**
  * Use this integration to set up Sentry with web workers.
  *
  * IMPORTANT: This integration must be added **before** you start listening to
  * any messages from the worker. Otherwise, your message handlers will receive
- * messages from Sentry which you need to ignore.
+ * messages from the Sentry SDK which you need to ignore.
  *
  * This integration only has an effect, if you call `Sentry.registerWorker(self)`
- * from within the worker you're adding to the integration.
+ * from within the worker(s) you're adding to the integration.
  *
  * Given that you want to initialize the SDK as early as possible, you most likely
- * want to add the integration after initializing the SDK:
+ * want to add this integration **after** initializing the SDK:
  *
  * @example:
  * ```ts filename={main.js}
@@ -37,14 +42,34 @@ interface WebWorkerIntegrationOptions {
  * const worker = new Worker(new URL('./worker.ts', import.meta.url));
  *
  * // 2. Add the integration
- * Sentry.addIntegration(Sentry.webWorkerIntegration({ worker }));
+ * const webWorkerIntegration = Sentry.webWorkerIntegration({ worker });
+ * Sentry.addIntegration(webWorkerIntegration);
  *
  * // 3. Register message listeners on the worker
  * worker.addEventListener('message', event => {
  *  // ...
  * });
  * ```
  *
+ * If you initialize multiple workers at the same time, you can also pass an array of workers
+ * to the integration:
+ *
+ * ```ts filename={main.js}
+ * const webWorkerIntegration = Sentry.webWorkerIntegration({ worker: [worker1, worker2] });
+ * Sentry.addIntegration(webWorkerIntegration);
+ * ```
+ *
+ * If you have any additional workers that you initialize at a later point,
+ * you can add them to the integration as follows:
+ *
+ * ```ts filename={main.js}
+ * const webWorkerIntegration = Sentry.webWorkerIntegration({ worker: worker1 });
+ * Sentry.addIntegration(webWorkerIntegration);
+ *
+ * // sometime later:
+ * webWorkerIntegration.addWorker(worker2);
+ * ```
+ *
  * Of course, you can also directly add the integration in Sentry.init:
  * ```ts filename={main.js}
  * import * as Sentry from '@sentry/<your-sdk>';
@@ -69,19 +94,24 @@ interface WebWorkerIntegrationOptions {
 export const webWorkerIntegration = defineIntegration(({ worker }: WebWorkerIntegrationOptions) => ({
   name: INTEGRATION_NAME,
   setupOnce: () => {
-    worker.addEventListener('message', event => {
-      if (isSentryDebugIdMessage(event.data)) {
-        event.stopImmediatePropagation(); // other listeners should not receive this message
-        DEBUG_BUILD && debug.log('Sentry debugId web worker message received', event.data);
-        WINDOW._sentryDebugIds = {
-          ...event.data._sentryDebugIds,
-          // debugIds of the main thread have precedence over the worker's in case of a collision.
-          ...WINDOW._sentryDebugIds,
-        };
-      }
-    });
+    (Array.isArray(worker) ? worker : [worker]).forEach(w => listenForSentryDebugIdMessages(w));
   },
-}));
+  addWorker: (worker: Worker) => listenForSentryDebugIdMessages(worker),
+})) as IntegrationFn<WebWorkerIntegration>;
+
+function listenForSentryDebugIdMessages(worker: Worker): void {
+  worker.addEventListener('message', event => {
+    if (isSentryDebugIdMessage(event.data)) {
+      event.stopImmediatePropagation(); // other listeners should not receive this message
+      DEBUG_BUILD && debug.log('Sentry debugId web worker message received', event.data);
+      WINDOW._sentryDebugIds = {
+        ...event.data._sentryDebugIds,
+        // debugIds of the main thread have precedence over the worker's in case of a collision.
+        ...WINDOW._sentryDebugIds,
+      };
+    }
+  });
+}
 
 interface RegisterWebWorkerOptions {
   self: Worker & { _sentryDebugIds?: Record<string, string> };