fix(browser-utils): Remove DOM instrumentation click listeners with stable capture flag

Fixes #24702

Co-Authored-By: Cursor Agent <cursoragent@cursor.com>

Co-authored-by: lamberto <macuzi@users.noreply.github.com>

Author: cursoragent

packages/browser-utils/src/instrumentation/dom.ts

@@ -19,6 +19,7 @@ type InstrumentedElement = Element & {
   __sentry_instrumentation_handlers__?: {
     [key in 'click' | 'keypress']?: {
       handler?: unknown;
+      capture?: boolean;
       /** The number of custom listeners attached to this element */
       refCount: number;
     };
@@ -82,7 +83,8 @@ export function instrumentDOM(): void {
             if (!handlerForType.handler) {
               const handler = makeDOMEventHandler(triggerDOMHandler);
               handlerForType.handler = handler;
-              originalAddEventListener.call(this, type, handler, options);
+              handlerForType.capture = typeof options === 'boolean' ? options : !!options?.capture;
+              originalAddEventListener.call(this, type, handler, handlerForType.capture);
             }
 
             handlerForType.refCount++;
@@ -110,7 +112,7 @@ export function instrumentDOM(): void {
                 handlerForType.refCount--;
                 // If there are no longer any custom handlers of the current type on this element, we can remove ours, too.
                 if (handlerForType.refCount <= 0) {
-                  originalRemoveEventListener.call(this, type, handlerForType.handler, options);
+                  originalRemoveEventListener.call(this, type, handlerForType.handler, handlerForType.capture);
                   handlerForType.handler = undefined;
                   delete handlers[type]; // eslint-disable-line @typescript-eslint/no-dynamic-delete
                 }

packages/browser-utils/test/instrumentation/dom.test.ts

@@ -1,12 +1,73 @@
-import { describe, expect, it } from 'vitest';
+/**
+ * @vitest-environment jsdom
+ */
+import { afterEach, describe, expect, it } from 'vitest';
 import { instrumentDOM } from '../../src/instrumentation/dom';
 import { WINDOW } from '../../src/types';
 
 // @ts-expect-error - idk
 WINDOW.XMLHttpRequest = undefined;
 
-describe('instrumentXHR', () => {
-  it('it does not throw if XMLHttpRequest is a key on window but not defined', () => {
+describe('instrumentDOM', () => {
+  afterEach(() => {
+    // @ts-expect-error - idk
+    WINDOW.XMLHttpRequest = undefined;
+  });
+
+  it('does not throw if XMLHttpRequest is a key on window but not defined', () => {
     expect(instrumentDOM).not.toThrow();
   });
+
+  it('does not leak document click listeners when removeEventListener uses mismatched capture options', () => {
+    instrumentDOM();
+
+    const live = {
+      capture: new Set<EventListenerOrEventListenerObject>(),
+      bubble: new Set<EventListenerOrEventListenerObject>(),
+    };
+    const patchedAdd = EventTarget.prototype.addEventListener;
+    const patchedRemove = EventTarget.prototype.removeEventListener;
+
+    const captureFlag = (options?: boolean | AddEventListenerOptions | EventListenerOptions): boolean =>
+      typeof options === 'boolean' ? options : !!options?.capture;
+
+    EventTarget.prototype.addEventListener = function (
+      type: string,
+      listener: EventListenerOrEventListenerObject,
+      options?: boolean | AddEventListenerOptions,
+    ) {
+      if (this === document && type === 'click') {
+        (captureFlag(options) ? live.capture : live.bubble).add(listener);
+      }
+      return patchedAdd.call(this, type, listener, options);
+    };
+
+    EventTarget.prototype.removeEventListener = function (
+      type: string,
+      listener: EventListenerOrEventListenerObject,
+      options?: boolean | EventListenerOptions,
+    ) {
+      if (this === document && type === 'click') {
+        (captureFlag(options) ? live.capture : live.bubble).delete(listener);
+      }
+      return patchedRemove.call(this, type, listener, options);
+    };
+
+    const baseline = live.capture.size + live.bubble.size;
+
+    const never = () => {};
+    const onCapture = () => {};
+    const onBubble = () => {};
+
+    for (let i = 0; i < 20; i++) {
+      document.addEventListener('click', onCapture, true);
+      document.addEventListener('click', onBubble);
+      document.removeEventListener('click', never);
+      document.removeEventListener('click', never);
+      document.removeEventListener('click', onCapture, true);
+      document.removeEventListener('click', onBubble);
+    }
+
+    expect(live.capture.size + live.bubble.size - baseline).toBe(0);
+  });
 });