🔊 [RUMF-1041] add lcp info on view events

packages/rum-core/src/domain/rumEventsCollection/view/trackInitialViewTimings.spec.ts

@@ -152,13 +152,15 @@ describe('trackFirstContentfulPaintTiming', () => {
 describe('largestContentfulPaintTiming', () => {
   let setupBuilder: TestSetupBuilder
   let lcpCallback: jasmine.Spy<(value: RelativeTime) => void>
+  let discardCallback: jasmine.Spy<(discardReason: string) => void>
   let emitter: Element
 
   beforeEach(() => {
     lcpCallback = jasmine.createSpy()
+    discardCallback = jasmine.createSpy()
     emitter = document.createElement('div')
     setupBuilder = setup().beforeBuild(({ lifeCycle }) =>
-      trackLargestContentfulPaintTiming(lifeCycle, emitter, lcpCallback)
+      trackLargestContentfulPaintTiming(lifeCycle, emitter, lcpCallback, discardCallback)
     )
     resetFirstHidden()
   })
@@ -184,6 +186,7 @@ describe('largestContentfulPaintTiming', () => {
 
     lifeCycle.notify(LifeCycleEventType.PERFORMANCE_ENTRY_COLLECTED, FAKE_LARGEST_CONTENTFUL_PAINT_ENTRY)
     expect(lcpCallback).not.toHaveBeenCalled()
+    expect(discardCallback).toHaveBeenCalledOnceWith('interaction')
   })
 
   it('should be discarded if the page is hidden', () => {
@@ -193,6 +196,7 @@ describe('largestContentfulPaintTiming', () => {
     lifeCycle.notify(LifeCycleEventType.PERFORMANCE_ENTRY_COLLECTED, FAKE_LARGEST_CONTENTFUL_PAINT_ENTRY)
 
     expect(lcpCallback).not.toHaveBeenCalled()
+    expect(discardCallback).toHaveBeenCalledOnceWith('hidden')
   })
 
   it('should be discarded if it is reported after a long time', () => {
@@ -203,6 +207,7 @@ describe('largestContentfulPaintTiming', () => {
       startTime: TIMING_MAXIMUM_DELAY as RelativeTime,
     })
     expect(lcpCallback).not.toHaveBeenCalled()
+    expect(discardCallback).toHaveBeenCalledOnceWith('maximum delay')
   })
 })
 

packages/rum-core/src/domain/rumEventsCollection/view/trackInitialViewTimings.ts

@@ -6,8 +6,6 @@ import {
   EventEmitter,
   RelativeTime,
   ONE_MINUTE,
-  addMonitoringMessage,
-  isExperimentalFeatureEnabled,
 } from '@datadog/browser-core'
 import { LifeCycle, LifeCycleEventType } from '../../lifeCycle'
 import { trackFirstHidden } from './trackFirstHidden'
@@ -25,6 +23,7 @@ export interface Timings {
   largestContentfulPaint?: Duration
   firstInputDelay?: Duration
   firstInputTime?: Duration
+  lcpDiscardReason?: string
 }
 
 export function trackInitialViewTimings(lifeCycle: LifeCycle, callback: (timings: Timings) => void) {
@@ -38,11 +37,20 @@ export function trackInitialViewTimings(lifeCycle: LifeCycle, callback: (timings
   const { stop: stopFCPTracking } = trackFirstContentfulPaintTiming(lifeCycle, (firstContentfulPaint) =>
     setTimings({ firstContentfulPaint })
   )
-  const { stop: stopLCPTracking } = trackLargestContentfulPaintTiming(lifeCycle, window, (largestContentfulPaint) => {
-    setTimings({
-      largestContentfulPaint,
-    })
-  })
+  const { stop: stopLCPTracking } = trackLargestContentfulPaintTiming(
+    lifeCycle,
+    window,
+    (largestContentfulPaint) => {
+      setTimings({
+        largestContentfulPaint,
+      })
+    },
+    (lcpDiscardReason) => {
+      setTimings({
+        lcpDiscardReason,
+      })
+    }
+  )
   const { stop: stopFIDTracking } = trackFirstInputTimings(lifeCycle, ({ firstInputDelay, firstInputTime }) => {
     setTimings({
       firstInputDelay,
@@ -99,7 +107,8 @@ export function trackFirstContentfulPaintTiming(lifeCycle: LifeCycle, callback:
 export function trackLargestContentfulPaintTiming(
   lifeCycle: LifeCycle,
   emitter: EventEmitter,
-  callback: (lcpTiming: RelativeTime) => void
+  callback: (lcpTiming: RelativeTime) => void,
+  discardCallback: (discardReason: string) => void
 ) {
   const firstHidden = trackFirstHidden()
 
@@ -130,23 +139,17 @@ export function trackLargestContentfulPaintTiming(
         entry.startTime < TIMING_MAXIMUM_DELAY
       ) {
         callback(entry.startTime)
-      } else if (isFirstLCP && isExperimentalFeatureEnabled('monitor-dropped-lcp')) {
+      } else if (isFirstLCP) {
         const reason =
           entry.startTime >= firstInteractionTimestamp
-            ? 'after interaction'
+            ? 'interaction'
             : entry.startTime >= firstHidden.timeStamp
-            ? 'after hidden'
+            ? 'hidden'
             : entry.startTime >= TIMING_MAXIMUM_DELAY
-            ? 'after maximum delay'
+            ? 'maximum delay'
             : 'N/A'
 
-        addMonitoringMessage(`LCP dropped ${reason}`, {
-          debug: {
-            startTime: entry.startTime,
-            firstInteractionTimestamp,
-            firstHiddenTimestamp: firstHidden.timeStamp,
-          },
-        })
+        discardCallback(reason)
       }
       isFirstLCP = false
     }

packages/rum-core/src/domain/rumEventsCollection/view/viewCollection.ts

@@ -6,12 +6,14 @@ import {
   toServerDuration,
   Configuration,
   Observable,
+  isExperimentalFeatureEnabled,
 } from '@datadog/browser-core'
 import { RecorderApi } from '../../../boot/rumPublicApi'
 import { RawRumViewEvent, RumEventType } from '../../../rawRumEvent.types'
 import { LifeCycle, LifeCycleEventType, RawRumEventCollectedData } from '../../lifeCycle'
 import { ForegroundContexts } from '../../foregroundContexts'
 import { LocationChange } from '../../../browser/locationChangeObservable'
+import { supportPerformanceTimingEvent } from '../../../browser/performanceCollection'
 import { trackViews, ViewEvent } from './trackViews'
 
 export function startViewCollection(
@@ -99,5 +101,14 @@ function processViewUpdate(
     domainContext: {
       location: view.location,
     },
+    customerContext:
+      isExperimentalFeatureEnabled('monitor-dropped-lcp') && view.loadingType === 'initial_load'
+        ? {
+            lcp: {
+              support: supportPerformanceTimingEvent('largest-contentful-paint'),
+              discard_reason: view.timings.lcpDiscardReason,
+            },
+          }
+        : undefined,
   }
 }