[RUMF-447]: Only collect first-contentful-paint if page is visible

packages/core/src/specHelper.ts

@@ -125,3 +125,16 @@ export class PerformanceObserverStubBuilder {
     } as unknown) as PerformanceObserver
   }
 }
+
+export function setPageVisibility(visibility: 'visible' | 'hidden') {
+  Object.defineProperty(document, 'visibilityState', {
+    get() {
+      return visibility
+    },
+    configurable: true,
+  })
+}
+
+export function restorePageVisibility() {
+  delete (document as any).visibilityState
+}

packages/core/test/sessionManagement.spec.ts

@@ -9,7 +9,7 @@ import {
   stopSessionManagement,
   VISIBILITY_CHECK_DELAY,
 } from '../src/sessionManagement'
-import { isIE } from '../src/specHelper'
+import { isIE, restorePageVisibility, setPageVisibility } from '../src/specHelper'
 
 describe('cacheCookieAccess', () => {
   const TEST_COOKIE = 'test'
@@ -298,19 +298,6 @@ describe('startSessionManagement', () => {
   })
 
   describe('session expiration', () => {
-    function setPageVisibility(visibility: 'visible' | 'hidden') {
-      Object.defineProperty(document, 'visibilityState', {
-        get() {
-          return visibility
-        },
-        configurable: true,
-      })
-    }
-
-    function restorePageVisibility() {
-      delete (document as any).visibilityState
-    }
-
     beforeEach(() => {
       setPageVisibility('hidden')
     })

packages/rum/src/performanceCollection.ts

@@ -31,7 +31,13 @@ export function startPerformanceCollection(lifeCycle: LifeCycle, session: RumSes
     const observer = new PerformanceObserver(
       monitor((entries) => handlePerformanceEntries(session, lifeCycle, entries.getEntries()))
     )
-    observer.observe({ entryTypes: ['resource', 'navigation', 'paint', 'longtask'] })
+    const entryTypes = ['resource', 'navigation', 'longtask']
+
+    // cf https://github.com/w3c/paint-timing/issues/40
+    if (document.visibilityState === 'visible') {
+      entryTypes.push('paint')
+    }
+    observer.observe({ entryTypes })
 
     if (supportPerformanceObject() && 'addEventListener' in performance) {
       // https://bugzilla.mozilla.org/show_bug.cgi?id=1559377

packages/rum/test/rum.spec.ts

@@ -11,6 +11,7 @@ import {
 } from '@datadog/browser-core'
 import sinon from 'sinon'
 
+import { restorePageVisibility, setPageVisibility } from '../../core/src/specHelper'
 import { LifeCycle, LifeCycleEventType } from '../src/lifeCycle'
 import { startPerformanceCollection } from '../src/performanceCollection'
 import { handleResourceEntry, RumEvent, RumResourceEvent, startRum } from '../src/rum'
@@ -520,3 +521,96 @@ describe('rum user action', () => {
     expect((getRumMessage(server, 0) as any).fooBar).toEqual('foo')
   })
 })
+
+describe('RUM hidden page', () => {
+  let lifeCycle: LifeCycle
+  let RUM: RumApi
+  let server: sinon.SinonFakeServer
+  const browserWindow = window as BrowserWindow
+  let stubBuilder: PerformanceObserverStubBuilder
+  let original: PerformanceObserver | undefined
+
+  interface ExpectedRequestBody {
+    evt: {
+      category: string
+    }
+    view: {
+      measures: {
+        first_contentful_paint: number
+      }
+    }
+  }
+
+  beforeEach(() => {
+    if (isIE()) {
+      pending('no full rum support')
+    }
+    server = sinon.fakeServer.create()
+    original = browserWindow.PerformanceObserver
+    stubBuilder = new PerformanceObserverStubBuilder()
+    browserWindow.PerformanceObserver = stubBuilder.getStub()
+    lifeCycle = new LifeCycle()
+  })
+
+  afterEach(() => {
+    browserWindow.PerformanceObserver = original
+    restorePageVisibility()
+    server.restore()
+  })
+
+  it('should not collect first_contentful_paint if page is not visible', () => {
+    const session = {
+      getId: () => undefined,
+      isTracked: () => true,
+      isTrackedWithResource: () => true,
+    }
+    const FAKE_RESOURCE: Partial<PerformanceEntry> = { name: 'http://foo.com', entryType: 'resource' }
+    const performanceEntry = { entryType: 'view', name: 'first-contentful-paint' }
+
+    setPageVisibility('hidden')
+    RUM = startRum('appId', lifeCycle, configuration as Configuration, session, internalMonitoring) as RumApi
+    startViewCollection(location, lifeCycle, session)
+    startPerformanceCollection(lifeCycle, session)
+    server.requests = []
+
+    stubBuilder.fakeEntry(FAKE_RESOURCE as PerformanceEntry, 'resource')
+    lifeCycle.notify(LifeCycleEventType.PERFORMANCE_ENTRY_COLLECTED, performanceEntry as PerformanceEntry)
+
+    const initialRequests = getServerRequestBodies<ExpectedRequestBody>(server)
+    expect(initialRequests.length).toBeGreaterThan(0)
+
+    initialRequests.map((request) => {
+      if (request.evt.category === 'view') {
+        expect(request.view.measures.first_contentful_paint).toBeUndefined()
+      }
+    })
+  })
+
+  it('should collect first_contentful_paint if page is visible', () => {
+    const session = {
+      getId: () => undefined,
+      isTracked: () => true,
+      isTrackedWithResource: () => true,
+    }
+    const FAKE_RESOURCE: Partial<PerformanceEntry> = { name: 'http://foo.com', entryType: 'resource' }
+    const performanceEntry = { entryType: 'view', name: 'first-contentful-paint' }
+
+    setPageVisibility('visible')
+    RUM = startRum('appId', lifeCycle, configuration as Configuration, session, internalMonitoring) as RumApi
+    startViewCollection(location, lifeCycle, session)
+    startPerformanceCollection(lifeCycle, session)
+    server.requests = []
+
+    stubBuilder.fakeEntry(FAKE_RESOURCE as PerformanceEntry, 'resource')
+    lifeCycle.notify(LifeCycleEventType.PERFORMANCE_ENTRY_COLLECTED, performanceEntry as PerformanceEntry)
+
+    const initialRequests = getServerRequestBodies<ExpectedRequestBody>(server)
+    expect(initialRequests.length).toBeGreaterThan(0)
+
+    initialRequests.map((request) => {
+      if (request.evt.category === 'view') {
+        expect(request.view.measures.first_contentful_paint).toBeDefined()
+      }
+    })
+  })
+})