fix(browser): Cancel the worker error event once it is forwarded

The page received every uncaught worker error twice: once forwarded with
its stack and once bubbled to window.onerror without one. The worker now
cancels its error event when, and only when, the forward succeeded, so
the message-only copy never leaves the worker and nothing on the page has
to correlate the two. A failed forward, a stopped listener or an older
SDK all leave the bubbled report in place.

A cancelled error prints nothing, so the worker logs it to keep it in
DevTools. Cancelling also silences error listeners on the Worker object
in the page, so the page replays the event for them with the error
object attached. A dispatched event does not reach window.onerror.

The e2e app also throws a primitive in the worker to show that the
ErrorEvent position gives such an error a usable frame.

Author: timfish

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

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

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

@@ -23,6 +23,14 @@ const worker2 = new MyWorker2();
 const webWorkerIntegration = Sentry.webWorkerIntegration({ worker: [worker, worker2] });
 Sentry.addIntegration(webWorkerIntegration);
 
+worker.addEventListener('error', event => {
+  // this is part of the test, do not delete
+  (window as any).workerErrorEvents = [
+    ...((window as any).workerErrorEvents ?? []),
+    { message: event.message, hasError: !!event.error },
+  ];
+});
+
 worker.addEventListener('message', event => {
   // this is part of the test, do not delete
   console.log('received message from worker:', event.data.msg);
@@ -34,6 +42,12 @@ document.querySelector<HTMLButtonElement>('#trigger-error')!.addEventListener('c
   });
 });
 
+document.querySelector<HTMLButtonElement>('#trigger-primitive-error')!.addEventListener('click', () => {
+  worker.postMessage({
+    msg: 'TRIGGER_PRIMITIVE_ERROR',
+  });
+});
+
 document.querySelector<HTMLButtonElement>('#trigger-error-2')!.addEventListener('click', () => {
   worker2.postMessage({
     msg: 'TRIGGER_ERROR',

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

@@ -12,4 +12,9 @@ self.addEventListener('message', event => {
     // This will throw an uncaught error in the worker
     throw new Error(`Uncaught error in worker`);
   }
+
+  if (event.data.msg === 'TRIGGER_PRIMITIVE_ERROR') {
+    // A thrown primitive has no stack, so only the ErrorEvent knows where it came from
+    throw 'Primitive thrown in worker';
+  }
 });

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

@@ -87,15 +87,46 @@ test('emits exactly one event for an uncaught worker error', async ({ page }) =>
   await page.locator('#trigger-error').click();
   await firstErrorPromise;
 
-  // The bubbled copy of the first throw is queued right behind the forwarded
-  // one, so the second worker's event arriving without it in between is the
-  // signal that it was suppressed.
+  // The worker cancels the native error event, so page listeners on the
+  // worker object only see the replayed one, which carries the error object.
+  expect(await page.evaluate(() => (window as any).workerErrorEvents)).toEqual([
+    { message: 'Uncaught Error: Uncaught error in worker', hasError: true },
+  ]);
+
+  // A bubbled copy of the first throw would have been reported before the
+  // second worker's event, so its absence here shows it never happened.
   await page.locator('#trigger-error-2').click();
   await secondErrorPromise;
 
   expect(mechanisms).toEqual([WORKER_MECHANISM, WORKER_MECHANISM]);
 });
 
+test('locates a thrown primitive by its ErrorEvent position', async ({ page }) => {
+  const errorEventPromise = waitForError('browser-webworker-vite', event => {
+    return event.exception?.values?.[0]?.value === 'Primitive thrown in worker';
+  });
+
+  await page.goto('/');
+
+  await page.locator('#trigger-primitive-error').click();
+
+  const errorEvent = await errorEventPromise;
+  const exception = errorEvent.exception?.values?.[0];
+
+  expect(exception?.mechanism?.type).toBe(WORKER_MECHANISM);
+  expect(exception?.stacktrace?.frames).toEqual([
+    {
+      filename: expect.stringMatching(/worker-.+\.js$/),
+      lineno: expect.any(Number),
+      colno: expect.any(Number),
+      function: '?',
+      in_app: true,
+    },
+  ]);
+  expect(exception?.stacktrace?.frames?.[0]?.lineno).toBeGreaterThan(0);
+  expect(exception?.stacktrace?.frames?.[0]?.colno).toBeGreaterThan(0);
+});
+
 test("user worker message handlers don't trigger for sentry messages", async ({ page }) => {
   const workerReadyPromise = new Promise<number>(resolve => {
     let workerMessageCount = 0;

packages/browser/src/integrations/webWorker.ts

@@ -2,6 +2,7 @@ import type { DebugImage, Integration, IntegrationFn } from '@sentry/core';
 import {
   addNonEnumerableProperty,
   captureEvent,
+  consoleSandbox,
   debug,
   defineIntegration,
   getClient,
@@ -12,7 +13,7 @@ import {
 } from '@sentry/core';
 import { DEBUG_BUILD } from '../debug-build';
 import { eventFromUnknownInput, extractMessage, extractType } from '../eventbuilder';
-import { ignoreNextOnError, WINDOW } from '../helpers';
+import { WINDOW } from '../helpers';
 import {
   _enhanceEventWithInitialFrame,
   _eventFromRejectionWithPrimitive,
@@ -27,8 +28,6 @@ interface WebWorkerMessage {
   _sentryModuleMetadata?: Record<string, any>; // eslint-disable-line @typescript-eslint/no-explicit-any
   _sentryWorkerError?: SerializedWorkerError;
   _sentryWasmImages?: Array<DebugImage>;
-  /** Sent by workers that forward uncaught errors, not only rejections. */
-  _sentryForwardsErrors?: boolean;
 }
 
 type WorkerErrorKind = 'error' | 'unhandledrejection';
@@ -40,6 +39,8 @@ interface SerializedWorkerError {
   kind?: WorkerErrorKind;
   /** Structured clone resets any name outside the built-in set to `Error`. */
   name?: string;
+  /** The `ErrorEvent` message, replayed on the worker object for page listeners. */
+  message?: string;
   /** Script the error was thrown in, which can differ from the worker script. */
   url?: string;
   lineno?: number;
@@ -138,27 +139,10 @@ export const webWorkerIntegration = defineIntegration(({ worker }: WebWorkerInte
 })) as IntegrationFn<WebWorkerIntegration>;
 
 function listenForSentryMessages(worker: Worker): void {
-  let forwardsErrors = false;
-
-  // An uncaught worker error fires `error` on the worker object and, unless
-  // cancelled, is then reported to `window.onerror` in the same task. The
-  // worker already forwarded it with a real stack, so the global handler
-  // must skip the message-only copy. Not cancelling keeps the browser's own
-  // console report.
-  worker.addEventListener('error', () => {
-    if (forwardsErrors) {
-      ignoreNextOnError();
-    }
-  });
-
   worker.addEventListener('message', event => {
     if (isSentryMessage(event.data)) {
       event.stopImmediatePropagation(); // other listeners should not receive this message
 
-      if (event.data._sentryForwardsErrors) {
-        forwardsErrors = true;
-      }
-
       // Handle debug IDs
       if (event.data._sentryDebugIds) {
         DEBUG_BUILD && debug.log('Sentry debugId web worker message received', event.data);
@@ -201,21 +185,14 @@ function listenForSentryMessages(worker: Worker): void {
       // Handle errors and unhandled rejections forwarded from worker
       if (event.data._sentryWorkerError) {
         DEBUG_BUILD && debug.log('Sentry worker error message received', event.data._sentryWorkerError);
-        handleForwardedWorkerError(event.data._sentryWorkerError);
+        handleForwardedWorkerError(worker, event.data._sentryWorkerError);
       }
     }
   });
 }
 
-function handleForwardedWorkerError(workerError: SerializedWorkerError): void {
-  const client = getClient();
-  if (!client) {
-    return;
-  }
-
-  const { stackParser, attachStacktrace } = client.getOptions();
-
-  const { reason, kind, name, filename, url, lineno, colno, plainError } = workerError;
+function handleForwardedWorkerError(worker: Worker, workerError: SerializedWorkerError): void {
+  const { reason, kind, name, filename, url, lineno, colno, plainError, message } = workerError;
   // Older workers only ever forwarded rejections and send no `kind`.
   const isUnhandledRejection = kind !== 'error';
 
@@ -225,6 +202,21 @@ function handleForwardedWorkerError(workerError: SerializedWorkerError): void {
     addNonEnumerableProperty(error, 'name', name);
   }
 
+  // The worker cancelled its native error event, which also silences
+  // `error` listeners on the worker object in the page. Replay it for them
+  // with the error object the native event never carries. A dispatched
+  // event has no default action, so it does not reach `window.onerror`.
+  if (!isUnhandledRejection && typeof ErrorEvent === 'function') {
+    worker.dispatchEvent(new ErrorEvent('error', { message, filename: url || filename, lineno, colno, error }));
+  }
+
+  const client = getClient();
+  if (!client) {
+    return;
+  }
+
+  const { stackParser, attachStacktrace } = client.getOptions();
+
   // Follow same pattern as globalHandlers for each source.
   // A thrown primitive is not a rejection, so the rejection-specific wording must not apply to it.
   const event =
@@ -319,33 +311,46 @@ export function registerWebWorker({ self }: RegisterWebWorkerOptions): void {
     _sentryMessage: true,
     _sentryDebugIds: self._sentryDebugIds ?? undefined,
     _sentryModuleMetadata: self._sentryModuleMetadata ?? undefined,
-    _sentryForwardsErrors: true,
   });
 
-  const forward = (serializedError: Omit<SerializedWorkerError, 'filename' | 'name'>): void => {
+  const forward = (serializedError: Omit<SerializedWorkerError, 'filename' | 'name'>): boolean => {
     const { reason } = serializedError;
 
-    postSerializedWorkerError(self, {
+    DEBUG_BUILD && debug.log(`[Sentry Worker] Forwarding ${serializedError.kind} to parent`, serializedError);
+
+    return postSerializedWorkerError(self, {
       ...serializedError,
       filename: self.location?.href,
       name: isError(reason) ? extractType(reason) : undefined,
     });
-
-    DEBUG_BUILD && debug.log(`[Sentry Worker] Forwarding ${serializedError.kind} to parent`, serializedError);
   };
 
   // Uncaught errors bubble to the parent, but the propagated ErrorEvent
   // carries no error object. Forwarding the object keeps the real stack.
   self.addEventListener('error', (event: unknown) => {
-    const { error, message, filename, lineno, colno } = event as {
+    const errorEvent = event as {
       error?: unknown;
       message?: string;
       filename?: string;
       lineno?: number;
       colno?: number;
+      preventDefault?: () => void;
     };
+    const { error, message, filename, lineno, colno } = errorEvent;
+    const reason = error ?? message;
+
+    if (!forward({ kind: 'error', reason, message, url: filename, lineno, colno })) {
+      return;
+    }
 
-    forward({ kind: 'error', reason: error ?? message, url: filename, lineno, colno });
+    // The page now has the error with its stack, so the message-only copy
+    // must not bubble there as well. A cancelled error prints nothing, so
+    // log it to keep it visible in DevTools.
+    errorEvent.preventDefault?.();
+    consoleSandbox(() => {
+      // eslint-disable-next-line no-console
+      console.error(reason);
+    });
   });
 
   // Unhandled rejections do not bubble to the parent thread at all.
@@ -359,20 +364,19 @@ export function registerWebWorker({ self }: RegisterWebWorkerOptions): void {
 /**
  * `postMessage` structured-clones the reason. A `DataCloneError` must never
  * escape the worker's own error handler, so the forward is retried with
- * plain data. The page suppresses the bubbled copy of every error once the
- * worker has announced itself, so the retry must clone in every browser,
- * including ones that cannot clone `Error` at all.
+ * plain data that clones in every browser, including ones that cannot clone
+ * `Error` at all. Returns whether the page received the error.
  */
 function postSerializedWorkerError(
   self: MinimalDedicatedWorkerGlobalScope,
   serializedError: SerializedWorkerError,
-): void {
+): boolean {
   try {
     self.postMessage({
       _sentryMessage: true,
       _sentryWorkerError: serializedError,
     });
-    return;
+    return true;
   } catch {
     // Not cloneable, fall through and send plain data instead.
   }
@@ -386,8 +390,10 @@ function postSerializedWorkerError(
       _sentryMessage: true,
       _sentryWorkerError: { ...serializedError, reason: plainReason, plainError },
     });
+    return true;
   } catch {
     // Dropping the forward is better than throwing out of the worker's error handler.
+    return false;
   }
 }