feat: use abort controller to cancel out unused events

Author: logaretm

packages/browser-utils/src/metrics/web-vitals/getLCP.ts

@@ -17,7 +17,7 @@
 import { bindReporter } from './lib/bindReporter';
 import { getActivationStart } from './lib/getActivationStart';
 import { getVisibilityWatcher } from './lib/getVisibilityWatcher';
-import { addPageListener, removePageListener } from './lib/globalListeners';
+import { addPageListener } from './lib/globalListeners';
 import { initMetric } from './lib/initMetric';
 import { initUnique } from './lib/initUnique';
 import { LCPEntryManager } from './lib/LCPEntryManager';
@@ -80,12 +80,16 @@ export const onLCP = (onReport: (metric: LCPMetric) => void, opts: ReportOpts =
     if (po) {
       report = bindReporter(onReport, metric, LCPThresholds, opts.reportAllChanges);
 
+      // Uses an AbortController to cancel all event listeners whenever one of them is triggered.
+      const controller = new AbortController();
+
       // Ensure this logic only runs once, since it can be triggered from
       // any of three different event listeners below.
       const stopListening = runOnce(() => {
         handleEntries(po.takeRecords() as LCPMetric['entries']);
         po.disconnect();
         report(true);
+        controller.abort();
       });
 
       // Need a separate wrapper to ensure the `runOnce` function above is
@@ -96,9 +100,6 @@ export const onLCP = (onReport: (metric: LCPMetric) => void, opts: ReportOpts =
           // task to reduce potential INP impact.
           // https://github.com/GoogleChrome/web-vitals/issues/383
           whenIdleOrHidden(stopListening);
-          removePageListener(event.type, stopListeningWrapper, {
-            capture: true,
-          });
         }
       };
 
@@ -109,6 +110,11 @@ export const onLCP = (onReport: (metric: LCPMetric) => void, opts: ReportOpts =
       for (const type of ['keydown', 'click', 'visibilitychange']) {
         addPageListener(type, stopListeningWrapper, {
           capture: true,
+          // Effectively removes all event listeners when the controller is aborted
+          // This is supported in all browsers as of Sept 2021
+          // For older or non-compliant browsers, we fall back to using the once: true option
+          signal: controller.signal,
+          once: true,
         });
       }
     }