feat(browser): Add unregisterOriginalCallbacks option to browserApiErrorsIntegration

[Lms24]

This PR adds an option to fix a very unfortunate, effective double invocation of callbacks on objects inheriting from our EventTarget.addEventListener instrumentation (to be found in browserApiErrorsIntegration.

By default (without the SDK), adding the same listener to an event target twice results in the listener only being added once and hence only being invoked once:

const myClickListener = () => {
  console.log('clicked');
};

btn.addEventListener('click', myClickListener);
btn.addEventListener('click', myClickListener);

If however, the SDK is initialized between the two calls, the second call doesn't actually register myClickListener but a wrapped version of the listener. Hence, the identities of the listeners differ and they're added twice, resulting in them being invoked twice:

const myClickListener = () => {
  console.log('clicked');
};

btn.addEventListener('click', myClickListener);

Sentry.init(...)

btn.addEventListener('click', myClickListener);

This is the reason why sometimes, our SDK can indeed cause for example double button clicks, as reported in #16398.

To fix this, this PR introduces an unregisterOriginalCallbacks option to the browserApiErrorsIntegration which affected users can switch on. Doing so will make our instrumentation of addEventListener also call removeEventListener on for the original callback. Applied to the example above, it will essentially restore the idempotency of addEventListener. At the same time, it feels very risky to do this so for the time being, we'll keep this (and document it as) opt-in.

Usage:

Sentry.init({
  // ...
  integrations: [
    Sentry.browserApiErrorsIntegration({
      unregisterOriginalCallbacks: true,
    }),
  ],
});

Docs PR: getsentry/sentry-docs#13859

fixes #16398

[github-actions]

size-limit report 📦

Path	Size	% Change	Change
@sentry/browser	23.99 kB	+0.26%	+60 B 🔺
@sentry/browser - with treeshaking flags	23.76 kB	+0.25%	+59 B 🔺
@sentry/browser (incl. Tracing)	38.29 kB	+0.16%	+61 B 🔺
@sentry/browser (incl. Tracing, Replay)	76.43 kB	+0.08%	+56 B 🔺
@sentry/browser (incl. Tracing, Replay) - with treeshaking flags	69.55 kB	+0.1%	+64 B 🔺
@sentry/browser (incl. Tracing, Replay with Canvas)	81.19 kB	+0.08%	+57 B 🔺
@sentry/browser (incl. Tracing, Replay, Feedback)	93.27 kB	+0.06%	+51 B 🔺
@sentry/browser (incl. Feedback)	40.73 kB	+0.13%	+50 B 🔺
@sentry/browser (incl. sendFeedback)	28.7 kB	+0.21%	+60 B 🔺
@sentry/browser (incl. FeedbackAsync)	33.59 kB	+0.17%	+55 B 🔺
@sentry/react	25.76 kB	+0.18%	+46 B 🔺
@sentry/react (incl. Tracing)	40.29 kB	+0.15%	+57 B 🔺
@sentry/vue	28.34 kB	+0.27%	+74 B 🔺
@sentry/vue (incl. Tracing)	40.13 kB	+0.21%	+84 B 🔺
@sentry/svelte	24.01 kB	+0.27%	+64 B 🔺
CDN Bundle	25.31 kB	+0.24%	+60 B 🔺
CDN Bundle (incl. Tracing)	38.47 kB	+0.16%	+58 B 🔺
CDN Bundle (incl. Tracing, Replay)	74.33 kB	+0.09%	+60 B 🔺
CDN Bundle (incl. Tracing, Replay, Feedback)	79.75 kB	+0.06%	+47 B 🔺
CDN Bundle - uncompressed	73.9 kB	+0.3%	+215 B 🔺
CDN Bundle (incl. Tracing) - uncompressed	113.88 kB	+0.19%	+215 B 🔺
CDN Bundle (incl. Tracing, Replay) - uncompressed	227.85 kB	+0.1%	+215 B 🔺
CDN Bundle (incl. Tracing, Replay, Feedback) - uncompressed	240.67 kB	+0.09%	+215 B 🔺
@sentry/nextjs (client)	41.96 kB	+0.11%	+46 B 🔺
@sentry/sveltekit (client)	38.79 kB	+0.16%	+61 B 🔺
@sentry/node	149.87 kB	-	-
@sentry/node - without tracing	98.12 kB	-	-
@sentry/aws-serverless	123.88 kB	-	-

View base workflow run