Fix bug

Author: Luca Forstner

packages/browser/src/helpers.ts

@@ -32,7 +32,8 @@ export function ignoreNextOnError(): void {
  * Instruments the given function and sends an event to Sentry every time the
  * function throws an exception.
  *
- * @param fn A function to wrap.
+ * @param fn A function to wrap. It is generally safe to pass an unbound function, because the returned wrapper always
+ * has a correct `this` context.
  * @returns The wrapped function.
  * @hidden
  */
@@ -75,8 +76,8 @@ export function wrap(
   }
 
   /* eslint-disable prefer-rest-params */
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const sentryWrapped: WrappedFunction = function (this: any): void {
+  // It is important that `sentryWrapped` is not an arrow function to preserve the context of `this`
+  const sentryWrapped: WrappedFunction = function (this: unknown): void {
     const args = Array.prototype.slice.call(arguments);
 
     try {

packages/browser/src/integrations/trycatch.ts

@@ -208,7 +208,13 @@ function _wrapEventTarget(target: string): void {
     ): (eventName: string, fn: EventListenerObject, capture?: boolean, secure?: boolean) => void {
       try {
         if (typeof fn.handleEvent === 'function') {
-          fn.handleEvent = wrap(fn.handleEvent.bind(fn), {
+          // ESlint disable explanation:
+          //  First, it is generally safe to call `wrap` with an unbound function. Furthermore, using `.bind()` would
+          //  introduce a bug here, because bind returns a new function that doesn't have our
+          //  flags(like __sentry_original__) attached. `wrap` checks for those flags to avoid unnecessary wrapping.
+          //  Without those flags, every call to addEventListener wraps the function again, causing a memory leak.
+          // eslint-disable-next-line @typescript-eslint/unbound-method
+          fn.handleEvent = wrap(fn.handleEvent, {
             mechanism: {
               data: {
                 function: 'handleEvent',