♻️ do not report subparts when TTFB returns undefined

Author: HugoGarrido

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

@@ -189,4 +189,37 @@ describe('trackLargestContentfulPaint', () => {
       subParts: mockSubParts,
     })
   })
+
+  it('should not provide subParts if the first byte is not available', () => {
+    const { notifyPerformanceEntries: notifyEntries } = mockPerformanceObserver()
+
+    // Notify navigation entry with negative responseStart, which makes getSafeFirstByte return undefined
+    notifyEntries([
+      createPerformanceEntry(RumPerformanceEntryType.NAVIGATION, {
+        responseStart: -1 as RelativeTime,
+      }),
+    ])
+
+    const firstHidden = trackFirstHidden(mockRumConfiguration(), clocksOrigin())
+    const largestContentfulPaint = trackLargestContentfulPaint(
+      mockRumConfiguration(),
+      firstHidden,
+      eventTarget,
+      lcpCallback
+    )
+
+    registerCleanupTask(() => {
+      firstHidden.stop()
+      largestContentfulPaint.stop()
+    })
+
+    notifyEntries([createPerformanceEntry(RumPerformanceEntryType.LARGEST_CONTENTFUL_PAINT)])
+
+    expect(lcpCallback).toHaveBeenCalledOnceWith({
+      value: 789 as RelativeTime,
+      targetSelector: undefined,
+      resourceUrl: undefined,
+      subParts: undefined,
+    })
+  })
 })

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

@@ -77,21 +77,27 @@ export function trackLargestContentfulPaint(
         ? (getResourceEntries()?.find((e) => e.name === resourceUrl) as PerformanceResourceTiming | undefined)
         : undefined
 
-      const firstByte = getSafeFirstByte(getNavigationEntry()) || (0 as RelativeTime)
-      const lcpRequestStart = Math.max(firstByte, lcpResourceEntry?.startTime || 0)
-      const lcpResponseEnd = Math.max(lcpRequestStart, lcpResourceEntry?.responseEnd || 0)
-      const lcpRenderTime = Math.max(lcpResponseEnd, lcpEntry.startTime)
+      let subParts;
+      const firstByte = getSafeFirstByte(getNavigationEntry())
 
-      callback({
-        value: lcpEntry.startTime,
-        targetSelector: lcpTargetSelector,
-        resourceUrl,
-        subParts: {
+      if (firstByte !== undefined) {
+        const lcpRequestStart = Math.max(firstByte, lcpResourceEntry?.startTime || 0)
+        const lcpResponseEnd = Math.max(lcpRequestStart, lcpResourceEntry?.responseEnd || 0)
+        const lcpRenderTime = Math.max(lcpResponseEnd, lcpEntry.startTime);
+
+        subParts = {
           firstByte,
           loadDelay: (lcpRequestStart - firstByte) as RelativeTime,
           loadTime: (lcpResponseEnd - lcpRequestStart) as RelativeTime,
           renderDelay: (lcpRenderTime - lcpResponseEnd) as RelativeTime,
-        },
+        }
+      }
+
+      callback({
+        value: lcpEntry.startTime,
+        targetSelector: lcpTargetSelector,
+        resourceUrl,
+        subParts,
       })
       biggestLcpSize = lcpEntry.size
     }