🐛 [RUM-8606] Track First Hidden before init

packages/rum-core/src/browser/performanceObservable.ts

@@ -28,6 +28,7 @@ export enum RumPerformanceEntryType {
   NAVIGATION = 'navigation',
   PAINT = 'paint',
   RESOURCE = 'resource',
+  VISIBILITY_STATE = 'visibility-state',
 }
 
 export interface RumPerformanceLongTaskTiming {
@@ -171,6 +172,13 @@ export interface RumPerformanceLongAnimationFrameTiming {
   toJSON(): Omit<RumPerformanceLongAnimationFrameTiming, 'toJSON'>
 }
 
+export interface RumFirstHiddenTiming {
+  entryType: RumPerformanceEntryType.VISIBILITY_STATE
+  name: 'hidden'
+  startTime: RelativeTime
+  toJSON(): Omit<RumFirstHiddenTiming, 'toJSON'>
+}
+
 export type RumPerformanceEntry =
   | RumPerformanceResourceTiming
   | RumPerformanceLongTaskTiming
@@ -181,6 +189,7 @@ export type RumPerformanceEntry =
   | RumFirstInputTiming
   | RumPerformanceEventTiming
   | RumLayoutShiftTiming
+  | RumFirstHiddenTiming
 
 export type EntryTypeToReturnType = {
   [RumPerformanceEntryType.EVENT]: RumPerformanceEventTiming
@@ -192,6 +201,7 @@ export type EntryTypeToReturnType = {
   [RumPerformanceEntryType.LONG_ANIMATION_FRAME]: RumPerformanceLongAnimationFrameTiming
   [RumPerformanceEntryType.NAVIGATION]: RumPerformanceNavigationTiming
   [RumPerformanceEntryType.RESOURCE]: RumPerformanceResourceTiming
+  [RumPerformanceEntryType.VISIBILITY_STATE]: RumFirstHiddenTiming
 }
 
 export function createPerformanceObservable<T extends RumPerformanceEntryType>(

packages/rum-core/src/domain/view/viewMetrics/trackFirstHidden.spec.ts

@@ -1,12 +1,14 @@
 import type { RelativeTime } from '@datadog/browser-core'
 import { DOM_EVENT } from '@datadog/browser-core'
 import { createNewEvent, restorePageVisibility, setPageVisibility } from '@datadog/browser-core/test'
-import { mockRumConfiguration } from '../../../../test'
+import { mockRumConfiguration, mockGlobalPerformanceBuffer } from '../../../../test'
+import type { GlobalPerformanceBufferMock } from '../../../../test'
 import { trackFirstHidden } from './trackFirstHidden'
 
 describe('trackFirstHidden', () => {
   const configuration = mockRumConfiguration()
   let firstHidden: { timeStamp: RelativeTime; stop: () => void }
+  let performanceBufferMock: GlobalPerformanceBufferMock
 
   afterEach(() => {
     restorePageVisibility()
@@ -82,6 +84,38 @@ describe('trackFirstHidden', () => {
     })
   })
 
+  describe('using visibilityState entries', () => {
+    let originalSupportedEntryTypes: string[] | undefined
+    beforeEach(() => {
+      performanceBufferMock = mockGlobalPerformanceBuffer()
+      if (typeof PerformanceObserver !== 'undefined') {
+        originalSupportedEntryTypes = PerformanceObserver.supportedEntryTypes as string[]
+        Object.defineProperty(PerformanceObserver, 'supportedEntryTypes', {
+          get: () => [...(originalSupportedEntryTypes || []), 'visibility-state'],
+          configurable: true,
+        })
+      }
+    })
+    it('should set timestamp to earliest hidden event from performance entries', () => {
+      setPageVisibility('visible')
+
+      performanceBufferMock.addPerformanceEntry({
+        entryType: 'visibility-state',
+        name: 'hidden',
+        startTime: 23,
+      } as PerformanceEntry)
+
+      performanceBufferMock.addPerformanceEntry({
+        entryType: 'visibility-state',
+        name: 'hidden',
+        startTime: 23219031,
+      } as PerformanceEntry)
+
+      firstHidden = trackFirstHidden(configuration)
+      expect(firstHidden.timeStamp).toBe(23 as RelativeTime)
+    })
+  })
+
   function createWindowEventTarget() {
     return document.createElement('div') as unknown as Window
   }

packages/rum-core/src/domain/view/viewMetrics/trackFirstHidden.ts

@@ -1,37 +1,41 @@
 import type { RelativeTime } from '@datadog/browser-core'
-import { addEventListeners, DOM_EVENT } from '@datadog/browser-core'
+import { addEventListeners, DOM_EVENT, noop } from '@datadog/browser-core'
 import type { RumConfiguration } from '../../configuration'
+import { supportPerformanceTimingEvent, RumPerformanceEntryType } from '../../../browser/performanceObservable'
 
 export type FirstHidden = ReturnType<typeof trackFirstHidden>
 
 export function trackFirstHidden(configuration: RumConfiguration, eventTarget: Window = window) {
-  let timeStamp: RelativeTime
-  let stopListeners: () => void | undefined
-
   if (document.visibilityState === 'hidden') {
-    timeStamp = 0 as RelativeTime
-  } else {
-    timeStamp = Infinity as RelativeTime
-    ;({ stop: stopListeners } = addEventListeners(
-      configuration,
-      eventTarget,
-      [DOM_EVENT.PAGE_HIDE, DOM_EVENT.VISIBILITY_CHANGE],
-      (event) => {
-        if (event.type === DOM_EVENT.PAGE_HIDE || document.visibilityState === 'hidden') {
-          timeStamp = event.timeStamp as RelativeTime
-          stopListeners()
-        }
-      },
-      { capture: true }
-    ))
+    return { timeStamp: 0 as RelativeTime, stop: noop }
+  }
+
+  if (supportPerformanceTimingEvent(RumPerformanceEntryType.VISIBILITY_STATE)) {
+    const firstHiddenEntry = performance.getEntriesByType('visibility-state').find((entry) => entry.name === 'hidden')
+    if (firstHiddenEntry) {
+      return { timeStamp: firstHiddenEntry.startTime as RelativeTime, stop: noop }
+    }
   }
 
+  let timeStamp: RelativeTime = Infinity as RelativeTime
+
+  const { stop } = addEventListeners(
+    configuration,
+    eventTarget,
+    [DOM_EVENT.PAGE_HIDE, DOM_EVENT.VISIBILITY_CHANGE],
+    (event) => {
+      if (event.type === DOM_EVENT.PAGE_HIDE || document.visibilityState === 'hidden') {
+        timeStamp = event.timeStamp as RelativeTime
+        stop()
+      }
+    },
+    { capture: true }
+  )
+
   return {
     get timeStamp() {
       return timeStamp
     },
-    stop() {
-      stopListeners?.()
-    },
+    stop,
   }
 }