feat(browser): Add unregisterOriginalCallbacks option to browserApiErrorsIntegration

Author: Lms24

dev-packages/browser-integration-tests/suites/integrations/browserApiErrors/unregisterOriginalCallbacks/init.js

@@ -0,0 +1,23 @@
+import * as Sentry from '@sentry/browser';
+
+window.Sentry = Sentry;
+
+const btn = document.getElementById('btn');
+
+const myClickListener = () => {
+  // eslint-disable-next-line no-console
+  console.log('clicked');
+};
+
+btn.addEventListener('click', myClickListener);
+
+Sentry.init({
+  dsn: 'https://public@dsn.ingest.sentry.io/1337',
+  integrations: [
+    Sentry.browserApiErrorsIntegration({
+      unregisterOriginalCallbacks: true,
+    }),
+  ],
+});
+
+btn.addEventListener('click', myClickListener);

dev-packages/browser-integration-tests/suites/integrations/browserApiErrors/unregisterOriginalCallbacks/test.ts

@@ -0,0 +1,25 @@
+import { expect } from '@playwright/test';
+import { sentryTest } from '../../../../utils/fixtures';
+
+/**
+ * By setting `unregisterOriginalCallbacks` to `true`, we can avoid the issue of double-invocations
+ * (see other test for more details).
+ */
+sentryTest(
+  'causes listeners to be invoked twice if registered before and after Sentry initialization',
+  async ({ getLocalTestUrl, page }) => {
+    const consoleLogs: string[] = [];
+    page.on('console', msg => {
+      consoleLogs.push(msg.text());
+    });
+
+    await page.goto(await getLocalTestUrl({ testDir: __dirname }));
+
+    await page.waitForFunction('window.Sentry');
+
+    await page.locator('#btn').click();
+
+    expect(consoleLogs).toHaveLength(1);
+    expect(consoleLogs).toEqual(['clicked']);
+  },
+);

packages/browser/src/integrations/browserapierrors.ts

@@ -1,6 +1,7 @@
 import type { IntegrationFn, WrappedFunction } from '@sentry/core';
 import { defineIntegration, fill, getFunctionName, getOriginalFunction } from '@sentry/core';
 import { WINDOW, wrap } from '../helpers';
+import { __propKey } from 'tslib';
 
 const DEFAULT_EVENT_TARGET = [
   'EventTarget',
@@ -46,6 +47,15 @@ interface BrowserApiErrorsOptions {
   requestAnimationFrame: boolean;
   XMLHttpRequest: boolean;
   eventTarget: boolean | string[];
+
+  /**
+   * If you experience issues with this integration causing double-invocations of event listeners,
+   * try setting this option to `true`. It will unregister the original callbacks from the event targets
+   * before adding the instrumented callback.
+   *
+   * @default false
+   */
+  unregisterOriginalCallbacks: boolean;
 }
 
 const _browserApiErrorsIntegration = ((options: Partial<BrowserApiErrorsOptions> = {}) => {
@@ -55,6 +65,7 @@ const _browserApiErrorsIntegration = ((options: Partial<BrowserApiErrorsOptions>
     requestAnimationFrame: true,
     setInterval: true,
     setTimeout: true,
+    unregisterOriginalCallbacks: false,
     ...options,
   };
 
@@ -82,7 +93,7 @@ const _browserApiErrorsIntegration = ((options: Partial<BrowserApiErrorsOptions>
       const eventTargetOption = _options.eventTarget;
       if (eventTargetOption) {
         const eventTarget = Array.isArray(eventTargetOption) ? eventTargetOption : DEFAULT_EVENT_TARGET;
-        eventTarget.forEach(_wrapEventTarget);
+        eventTarget.forEach(target => _wrapEventTarget(target, _options));
       }
     },
   };
@@ -160,7 +171,7 @@ function _wrapXHR(originalSend: () => void): () => void {
   };
 }
 
-function _wrapEventTarget(target: string): void {
+function _wrapEventTarget(target: string, integrationOptions: BrowserApiErrorsOptions): void {
   const globalObject = WINDOW as unknown as Record<string, { prototype?: object }>;
   const proto = globalObject[target]?.prototype;
 
@@ -197,6 +208,10 @@ function _wrapEventTarget(target: string): void {
         // can sometimes get 'Permission denied to access property "handle Event'
       }
 
+      if (integrationOptions.unregisterOriginalCallbacks) {
+        unregisterOriginalCallback(this, eventName, fn);
+      }
+
       return original.apply(this, [
         eventName,
         wrap(fn, {
@@ -253,3 +268,14 @@ function _wrapEventTarget(target: string): void {
 function isEventListenerObject(obj: unknown): obj is EventListenerObject {
   return typeof (obj as EventListenerObject).handleEvent === 'function';
 }
+
+function unregisterOriginalCallback(target: unknown, eventName: string, fn: EventListenerOrEventListenerObject): void {
+  if (
+    target &&
+    typeof target === 'object' &&
+    'removeEventListener' in target &&
+    typeof target.removeEventListener === 'function'
+  ) {
+    target.removeEventListener(eventName, fn);
+  }
+}