use onHidden in getINP

Author: Lms24

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

@@ -20,6 +20,7 @@ import { initMetric } from './lib/initMetric';
 import { initUnique } from './lib/initUnique';
 import { InteractionManager } from './lib/InteractionManager';
 import { observe } from './lib/observe';
+import { onHidden } from './lib/onHidden';
 import { initInteractionCountPolyfill } from './lib/polyfills/interactionCountPolyfill';
 import { whenActivated } from './lib/whenActivated';
 import { whenIdleOrHidden } from './lib/whenIdleOrHidden';
@@ -116,7 +117,10 @@ export const onINP = (onReport: (metric: INPMetric) => void, opts: INPReportOpts
       // where the first interaction is less than the `durationThreshold`.
       po.observe({ type: 'first-input', buffered: true });
 
-      WINDOW.document?.addEventListener('visibilitychange', () => {
+      // sentry: we use onHidden instead of directly listening to visibilitychange
+      // because some browsers we still support (Safari <14.4) don't fully support
+      // `visibilitychange` or have known bugs w.r.t the `visibilitychange` event.
+      onHidden(() => {
         if (WINDOW.document?.visibilityState === 'hidden') {
           handleEntries(po.takeRecords() as INPMetric['entries']);
           report(true);