feat: remove document prefix to match web-vitals 5.1.0

Author: logaretm

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

@@ -14,10 +14,10 @@
  * limitations under the License.
  */
 
-import { WINDOW } from '../../types';
 import { bindReporter } from './lib/bindReporter';
 import { getActivationStart } from './lib/getActivationStart';
 import { getVisibilityWatcher } from './lib/getVisibilityWatcher';
+import { addPageListener, removePageListener } from './lib/globalListeners';
 import { initMetric } from './lib/initMetric';
 import { initUnique } from './lib/initUnique';
 import { LCPEntryManager } from './lib/LCPEntryManager';
@@ -96,11 +96,9 @@ 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);
-          if (WINDOW.document) {
-            removeEventListener(event.type, stopListeningWrapper, {
-              capture: true,
-            });
-          }
+          removePageListener(event.type, stopListeningWrapper, {
+            capture: true,
+          });
         }
       };
 
@@ -109,11 +107,9 @@ export const onLCP = (onReport: (metric: LCPMetric) => void, opts: ReportOpts =
       // unreliable since it can be programmatically generated.
       // See: https://github.com/GoogleChrome/web-vitals/issues/75
       for (const type of ['keydown', 'click', 'visibilitychange']) {
-        if (WINDOW.document) {
-          addEventListener(type, stopListeningWrapper, {
-            capture: true,
-          });
-        }
+        addPageListener(type, stopListeningWrapper, {
+          capture: true,
+        });
       }
     }
   });

packages/browser-utils/src/metrics/web-vitals/lib/getVisibilityWatcher.ts

@@ -16,6 +16,7 @@
 
 import { WINDOW } from '../../../types';
 import { getActivationStart } from './getActivationStart';
+import { addPageListener, removePageListener } from './globalListeners';
 
 let firstHiddenTime = -1;
 const onHiddenFunctions: Set<() => void> = new Set();
@@ -53,7 +54,7 @@ const onVisibilityUpdate = (event: Event) => {
       // We no longer need the `prerenderingchange` event listener now we've
       // set an initial init time so remove that
       // (we'll keep the visibilitychange one for onHiddenFunction above)
-      WINDOW.document?.removeEventListener('prerenderingchange', onVisibilityUpdate, true);
+      removePageListener('prerenderingchange', onVisibilityUpdate, true);
     }
   }
 };
@@ -76,17 +77,17 @@ export const getVisibilityWatcher = () => {
     // Listen for visibility changes so we can handle things like bfcache
     // restores and/or prerender without having to examine individual
     // timestamps in detail and also for onHidden function calls.
-    WINDOW.document?.addEventListener('visibilitychange', onVisibilityUpdate, true);
+    addPageListener('visibilitychange', onVisibilityUpdate, true);
 
-    // Some browsers have buggy implementations of visibilitychange,
-    // so we use pagehide in addition, just to be safe.
-    WINDOW.document?.addEventListener('pagehide', onVisibilityUpdate, true);
+    // // Some browsers have buggy implementations of visibilitychange,
+    // // so we use pagehide in addition, just to be safe.
+    // addPageListener('pagehide', onVisibilityUpdate, true);
 
     // IMPORTANT: when a page is prerendering, its `visibilityState` is
     // 'hidden', so in order to account for cases where this module checks for
     // visibility during prerendering, an additional check after prerendering
     // completes is also required.
-    WINDOW.document?.addEventListener('prerenderingchange', onVisibilityUpdate, true);
+    addPageListener('prerenderingchange', onVisibilityUpdate, true);
   }
 
   return {

packages/browser-utils/src/metrics/web-vitals/lib/globalListeners.ts

@@ -0,0 +1,20 @@
+import { WINDOW } from '../../../types';
+
+/**
+ * web-vitals 5.1.0 switched listeners to be added on the window rather than the document.
+ * Instead of having to check for window/document every time we add a listener, we can use this function.
+ */
+export function addPageListener(type: string, listener: EventListener, options?: boolean | AddEventListenerOptions) {
+  if (WINDOW.document) {
+    WINDOW.addEventListener(type, listener, options);
+  }
+}
+/**
+ * web-vitals 5.1.0 switched listeners to be removed from the window rather than the document.
+ * Instead of having to check for window/document every time we remove a listener, we can use this function.
+ */
+export function removePageListener(type: string, listener: EventListener, options?: boolean | AddEventListenerOptions) {
+  if (WINDOW.document) {
+    WINDOW.removeEventListener(type, listener, options);
+  }
+}

packages/browser-utils/src/metrics/web-vitals/lib/onHidden.ts

@@ -15,6 +15,7 @@
  */
 
 import { WINDOW } from '../../../types';
+import { addPageListener } from './globalListeners';
 
 export interface OnHiddenCallback {
   (event: Event): void;
@@ -37,10 +38,8 @@ export const onHidden = (cb: OnHiddenCallback) => {
     }
   };
 
-  if (WINDOW.document) {
-    addEventListener('visibilitychange', onHiddenOrPageHide, true);
-    // Some browsers have buggy implementations of visibilitychange,
-    // so we use pagehide in addition, just to be safe.
-    addEventListener('pagehide', onHiddenOrPageHide, true);
-  }
+  addPageListener('visibilitychange', onHiddenOrPageHide, true);
+  // Some browsers have buggy implementations of visibilitychange,
+  // so we use pagehide in addition, just to be safe.
+  addPageListener('pagehide', onHiddenOrPageHide, true);
 };

packages/browser-utils/src/metrics/web-vitals/lib/whenIdleOrHidden.ts

@@ -15,6 +15,7 @@
  */
 
 import { WINDOW } from '../../../types.js';
+import { addPageListener, removePageListener } from './globalListeners.js';
 import { onHidden } from './onHidden.js';
 import { runOnce } from './runOnce.js';
 
@@ -32,12 +33,12 @@ export const whenIdleOrHidden = (cb: () => void) => {
   } else {
     // eslint-disable-next-line no-param-reassign
     cb = runOnce(cb);
-    WINDOW.document?.addEventListener('visibilitychange', cb, { once: true, capture: true });
+    addPageListener('visibilitychange', cb, { once: true, capture: true });
     rIC(() => {
       cb();
       // Remove the above event listener since no longer required.
       // See: https://github.com/GoogleChrome/web-vitals/issues/622
-      WINDOW.document?.removeEventListener('visibilitychange', cb, { capture: true });
+      removePageListener('visibilitychange', cb, { capture: true });
     });
     // sentry: we use onHidden instead of directly listening to visibilitychange
     // because some browsers we still support (Safari <14.4) don't fully support