fix onHidden change

Author: Lms24

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

@@ -16,13 +16,31 @@
 
 import { WINDOW } from '../../../types';
 
-// sentry: This function is used in web-vitals 4.2.4 but we continue
-// to use it in our v5 version. We still need it for the FID logic
-// and one internal use case (TBD if we switch over) in both.
-export const onHidden = (cb: () => void) => {
-  WINDOW.document?.addEventListener('visibilitychange', () => {
-    if (WINDOW.document?.visibilityState === 'hidden') {
-      cb();
+export interface OnHiddenCallback {
+  (event: Event): void;
+}
+
+// Sentry-specific change:
+// This function's logic was NOT updated to web-vitals 4.2.4 or 5.x but we continue
+// to use the web-vitals 3.5.2 versiondue to us having stricter browser support.
+// PR with context that made the changes: https://github.com/GoogleChrome/web-vitals/pull/442/files#r1530492402
+// The PR removed listening to the `pagehide` event, in favour of only listening to `visibilitychange` event.
+// This is "more correct" but some browsers we still support (Safari <14.4) don't fully support `visibilitychange`
+// or have known bugs w.r.t the `visibilitychange` event.
+// TODO (v10): If we decide to drop support for Safari 14.4, we can use the logic from web-vitals 4.2.4
+// In this case, we also need to update the integration tests that currently trigger the `pagehide` event to
+// simulate the page being hidden.
+export const onHidden = (cb: OnHiddenCallback) => {
+  const onHiddenOrPageHide = (event: Event) => {
+    if (event.type === 'pagehide' || WINDOW.document?.visibilityState === 'hidden') {
+      cb(event);
     }
-  });
+  };
+
+  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);
+  }
 };

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

@@ -22,7 +22,7 @@ import { runOnce } from './runOnce.js';
  * if the browser's visibility state is (or becomes) hidden.
  */
 export const whenIdleOrHidden = (cb: () => void) => {
-  const rIC = globalThis.requestIdleCallback || setTimeout;
+  const rIC = WINDOW.requestIdleCallback || WINDOW.setTimeout;
 
   // If the document is hidden, run the callback immediately, otherwise
   // race an idle callback with the next `visibilitychange` event.