@kubesense/kubesense-browser-rum-core 1.8.0 → 2.0.0-beta.1

package/src/domain/view/viewMetrics/trackCumulativeLayoutShift.ts

@@ -1,5 +1,7 @@
-import { round, ONE_SECOND, noop, elapsed } from '@kubesense/kubesense-browser-core'
-import type { Duration, RelativeTime, WeakRef, WeakRefConstructor } from '@kubesense/kubesense-browser-core'
+import { round, noop } from '@kubesense/kubesense-browser-core'
+import { ONE_SECOND, elapsed } from '@kubesense/kubesense-js-core/time'
+import type { Duration, RelativeTime } from '@kubesense/kubesense-js-core/time'
+import type { WeakRef, WeakRefConstructor } from '@kubesense/kubesense-browser-core'
 import { isElementNode } from '../../../browser/htmlDomUtils'
 import type { RumLayoutShiftAttribution, RumLayoutShiftTiming } from '../../../browser/performanceObservable'
 import {
@@ -68,7 +70,7 @@ export function trackCumulativeLayoutShift(
   })
 
   const slidingWindow = slidingSessionWindow()
-  const performanceSubscription = createPerformanceObservable(configuration, {
+  const performanceSubscription = createPerformanceObservable({
     type: RumPerformanceEntryType.LAYOUT_SHIFT,
     buffered: true,
   }).subscribe((entries) => {

package/src/domain/view/viewMetrics/trackFirstContentfulPaint.ts

@@ -1,20 +1,15 @@
-import type { Duration, RelativeTime } from '@kubesense/kubesense-browser-core'
-import { ONE_MINUTE, elapsed, relativeNow } from '@kubesense/kubesense-browser-core'
+import type { RelativeTime, Duration } from '@kubesense/kubesense-js-core/time'
+import { ONE_MINUTE, elapsed, relativeNow } from '@kubesense/kubesense-js-core/time'
 import type { RumPerformancePaintTiming } from '../../../browser/performanceObservable'
 import { createPerformanceObservable, RumPerformanceEntryType } from '../../../browser/performanceObservable'
-import type { RumConfiguration } from '../../configuration'
 import type { FirstHidden } from './trackFirstHidden'
 
 // Discard FCP timings above a certain delay to avoid incorrect data
 // It happens in some cases like sleep mode or some browser implementations
 export const FCP_MAXIMUM_DELAY = 10 * ONE_MINUTE
 
-export function trackFirstContentfulPaint(
-  configuration: RumConfiguration,
-  firstHidden: FirstHidden,
-  callback: (fcpTiming: RelativeTime) => void
-) {
-  const performanceSubscription = createPerformanceObservable(configuration, {
+export function trackFirstContentfulPaint(firstHidden: FirstHidden, callback: (fcpTiming: RelativeTime) => void) {
+  const performanceSubscription = createPerformanceObservable({
     type: RumPerformanceEntryType.PAINT,
     buffered: true,
   }).subscribe((entries) => {

package/src/domain/view/viewMetrics/trackFirstHidden.ts

@@ -1,6 +1,5 @@
-import type { ClocksState, RelativeTime } from '@kubesense/kubesense-browser-core'
+import type { ClocksState, RelativeTime } from '@kubesense/kubesense-js-core/time'
 import { addEventListeners, DOM_EVENT, noop } from '@kubesense/kubesense-browser-core'
-import type { RumConfiguration } from '../../configuration'
 import { supportPerformanceTimingEvent, RumPerformanceEntryType } from '../../../browser/performanceObservable'
 
 export type FirstHidden = ReturnType<typeof trackFirstHidden>
@@ -9,11 +8,7 @@ export interface Options {
   viewStart: ClocksState
 }
 
-export function trackFirstHidden(
-  configuration: RumConfiguration,
-  viewStart: ClocksState,
-  eventTarget: Window = window
-) {
+export function trackFirstHidden(viewStart: ClocksState, eventTarget: Window = window) {
   if (document.visibilityState === 'hidden') {
     return { timeStamp: 0 as RelativeTime, stop: noop }
   }
@@ -32,7 +27,6 @@ export function trackFirstHidden(
   let timeStamp: RelativeTime = Infinity as RelativeTime
 
   const { stop } = addEventListeners(
-    configuration,
     eventTarget,
     [DOM_EVENT.PAGE_HIDE, DOM_EVENT.VISIBILITY_CHANGE],
     (event) => {

package/src/domain/view/viewMetrics/trackInitialViewMetrics.ts

@@ -1,8 +1,6 @@
-import type { ClocksState, Duration } from '@kubesense/kubesense-browser-core'
+import type { ClocksState, Duration } from '@kubesense/kubesense-js-core/time'
 import type { RumConfiguration } from '../../configuration'
 import { trackFirstContentfulPaint } from './trackFirstContentfulPaint'
-import type { FirstInput } from './trackFirstInput'
-import { trackFirstInput } from './trackFirstInput'
 import type { NavigationTimings } from './trackNavigationTimings'
 import { trackNavigationTimings } from './trackNavigationTimings'
 import type { LargestContentfulPaint } from './trackLargestContentfulPaint'
@@ -13,7 +11,6 @@ export interface InitialViewMetrics {
   firstContentfulPaint?: Duration
   navigationTimings?: NavigationTimings
   largestContentfulPaint?: LargestContentfulPaint
-  firstInput?: FirstInput
 }
 
 export function trackInitialViewMetrics(
@@ -24,14 +21,14 @@ export function trackInitialViewMetrics(
 ) {
   const initialViewMetrics: InitialViewMetrics = {}
 
-  const { stop: stopNavigationTracking } = trackNavigationTimings(configuration, (navigationTimings) => {
+  const { stop: stopNavigationTracking } = trackNavigationTimings((navigationTimings) => {
     setLoadEvent(navigationTimings.loadEvent)
     initialViewMetrics.navigationTimings = navigationTimings
     scheduleViewUpdate()
   })
 
-  const firstHidden = trackFirstHidden(configuration, viewStart)
-  const { stop: stopFCPTracking } = trackFirstContentfulPaint(configuration, firstHidden, (firstContentfulPaint) => {
+  const firstHidden = trackFirstHidden(viewStart)
+  const { stop: stopFCPTracking } = trackFirstContentfulPaint(firstHidden, (firstContentfulPaint) => {
     initialViewMetrics.firstContentfulPaint = firstContentfulPaint
     scheduleViewUpdate()
   })
@@ -46,16 +43,10 @@ export function trackInitialViewMetrics(
     }
   )
 
-  const { stop: stopFIDTracking } = trackFirstInput(configuration, firstHidden, (firstInput) => {
-    initialViewMetrics.firstInput = firstInput
-    scheduleViewUpdate()
-  })
-
   function stop() {
     stopNavigationTracking()
     stopFCPTracking()
     stopLCPTracking()
-    stopFIDTracking()
     firstHidden.stop()
   }
 

package/src/domain/view/viewMetrics/trackInteractionToNextPaint.ts

@@ -1,11 +1,12 @@
-import { elapsed, noop, ONE_MINUTE } from '@kubesense/kubesense-browser-core'
-import type { Duration, RelativeTime } from '@kubesense/kubesense-browser-core'
+import type { RelativeTime, Duration } from '@kubesense/kubesense-js-core/time'
+import { ONE_MINUTE, elapsed } from '@kubesense/kubesense-js-core/time'
+import { noop } from '@kubesense/kubesense-browser-core'
+import type { RumFirstInputTiming, RumPerformanceEventTiming } from '../../../browser/performanceObservable'
 import {
   createPerformanceObservable,
   RumPerformanceEntryType,
   supportPerformanceTimingEvent,
 } from '../../../browser/performanceObservable'
-import type { RumFirstInputTiming, RumPerformanceEventTiming } from '../../../browser/performanceObservable'
 import { ViewLoadingType } from '../../../rawRumEvent.types'
 import { getSelectorFromElement } from '../../getSelectorFromElement'
 import { isElementNode } from '../../../browser/htmlDomUtils'
@@ -18,11 +19,27 @@ const MAX_INTERACTION_ENTRIES = 10
 // Arbitrary value to cap INP outliers
 export const MAX_INP_VALUE = (1 * ONE_MINUTE) as Duration
 
+// Event Timing API rounds duration values to the nearest 8 ms
+const RENDER_TIME_GROUPING_THRESHOLD = 8 as Duration
+
 export interface InteractionToNextPaint {
   value: Duration
   targetSelector?: string
   time?: Duration
+  subParts?: {
+    inputDelay: Duration
+    processingDuration: Duration
+    presentationDelay: Duration
+  }
+}
+interface EntriesGroup {
+  startTime: RelativeTime
+  processingStart: RelativeTime
+  processingEnd: RelativeTime
+  // Reference time used for grouping, set once at group creation — anchors the 8ms merge window
+  referenceRenderTime: RelativeTime
 }
+
 /**
  * Track the interaction to next paint (INP).
  * To avoid outliers, return the p98 worst interaction of the view.
@@ -42,14 +59,30 @@ export function trackInteractionToNextPaint(
     }
   }
 
-  const { getViewInteractionCount, stopViewInteractionCount } = trackViewInteractionCount(viewLoadingType)
-
   let viewEnd = Infinity as RelativeTime
+  let currentInp:
+    | {
+        duration: Duration
+        startTime: Duration
+        targetSelector?: string
+        subParts?: InteractionToNextPaint['subParts']
+      }
+    | undefined
 
+  const { getViewInteractionCount, stopViewInteractionCount } = trackViewInteractionCount(viewLoadingType)
   const longestInteractions = trackLongestInteractions(getViewInteractionCount)
-  let interactionToNextPaint = -1 as Duration
-  let interactionToNextPaintTargetSelector: string | undefined
-  let interactionToNextPaintStartTime: Duration | undefined
+  const subPartsTracker = createSubPartsTracker(longestInteractions)
+  const firstInputSubscription = createPerformanceObservable({
+    type: RumPerformanceEntryType.FIRST_INPUT,
+    buffered: true,
+  }).subscribe(handleEntries)
+  const eventSubscription = createPerformanceObservable({
+    type: RumPerformanceEntryType.EVENT,
+    // durationThreshold only impact PerformanceEventTiming entries used for INP computation which requires a threshold at 40 (default is 104ms)
+    // cf: https://github.com/GoogleChrome/web-vitals/blob/3806160ffbc93c3c4abf210a167b81228172b31c/src/onINP.ts#L202-L210
+    durationThreshold: 40,
+    buffered: true,
+  }).subscribe(handleEntries)
 
   function handleEntries(entries: Array<RumPerformanceEventTiming | RumFirstInputTiming>) {
     for (const entry of entries) {
@@ -60,45 +93,46 @@ export function trackInteractionToNextPaint(
         entry.startTime <= viewEnd
       ) {
         longestInteractions.process(entry)
+        subPartsTracker.process(entry)
       }
     }
+    subPartsTracker.pruneUntracked()
+    const candidate = longestInteractions.estimateP98Interaction()
+    if (candidate) {
+      updateCurrentInp(candidate)
+    }
+  }
 
-    const newInteraction = longestInteractions.estimateP98Interaction()
-    if (newInteraction && newInteraction.duration !== interactionToNextPaint) {
-      interactionToNextPaint = newInteraction.duration
-      interactionToNextPaintStartTime = elapsed(viewStart, newInteraction.startTime)
-      interactionToNextPaintTargetSelector = getInteractionSelector(newInteraction.startTime)
-      if (!interactionToNextPaintTargetSelector && newInteraction.target && isElementNode(newInteraction.target)) {
-        interactionToNextPaintTargetSelector = getSelectorFromElement(
-          newInteraction.target,
-          configuration.actionNameAttribute
-        )
+  function updateCurrentInp(candidate: RumPerformanceEventTiming | RumFirstInputTiming) {
+    const newStartTime = elapsed(viewStart, candidate.startTime)
+    // startTime catches identity changes when the p98 switches to a different interaction with the same duration,
+    // ensuring targetSelector and subParts always describe the same interaction.
+    if (candidate.duration !== currentInp?.duration || newStartTime !== currentInp.startTime) {
+      let targetSelector = getInteractionSelector(candidate.startTime)
+      if (!targetSelector && candidate.target && isElementNode(candidate.target)) {
+        targetSelector = getSelectorFromElement(candidate.target, configuration.actionNameAttribute)
+      }
+      currentInp = {
+        duration: candidate.duration,
+        startTime: newStartTime,
+        targetSelector,
       }
     }
+    // Recomputed on every batch: the group for the p98 interaction may have been updated
+    // with new min/max timing even when the p98 identity (duration, startTime) is unchanged.
+    currentInp.subParts = subPartsTracker.computeSubParts(candidate, sanitizeInpValue(currentInp.duration))
   }
 
-  const firstInputSubscription = createPerformanceObservable(configuration, {
-    type: RumPerformanceEntryType.FIRST_INPUT,
-    buffered: true,
-  }).subscribe(handleEntries)
-
-  const eventSubscription = createPerformanceObservable(configuration, {
-    type: RumPerformanceEntryType.EVENT,
-    // durationThreshold only impact PerformanceEventTiming entries used for INP computation which requires a threshold at 40 (default is 104ms)
-    // cf: https://github.com/GoogleChrome/web-vitals/blob/3806160ffbc93c3c4abf210a167b81228172b31c/src/onINP.ts#L202-L210
-    durationThreshold: 40,
-    buffered: true,
-  }).subscribe(handleEntries)
-
   return {
     getInteractionToNextPaint: (): InteractionToNextPaint | undefined => {
       // If no INP duration where captured because of the performanceObserver 40ms threshold
       // but the view interaction count > 0 then report 0
-      if (interactionToNextPaint >= 0) {
+      if (currentInp) {
         return {
-          value: Math.min(interactionToNextPaint, MAX_INP_VALUE) as Duration,
-          targetSelector: interactionToNextPaintTargetSelector,
-          time: interactionToNextPaintStartTime,
+          value: sanitizeInpValue(currentInp.duration),
+          targetSelector: currentInp.targetSelector,
+          time: currentInp.startTime,
+          subParts: currentInp.subParts,
         }
       } else if (getViewInteractionCount()) {
         return {
@@ -113,10 +147,15 @@ export function trackInteractionToNextPaint(
     stop: () => {
       eventSubscription.unsubscribe()
       firstInputSubscription.unsubscribe()
+      subPartsTracker.stop()
     },
   }
 }
 
+/**
+ * Maintains a bounded list of the slowest interactions seen so far, used to estimate the p98
+ * interaction duration without keeping every entry in memory.
+ */
 function trackLongestInteractions(getViewInteractionCount: () => number) {
   const longestInteractions: Array<RumPerformanceEventTiming | RumFirstInputTiming> = []
 
@@ -158,9 +197,17 @@ function trackLongestInteractions(getViewInteractionCount: () => number) {
       const interactionIndex = Math.min(longestInteractions.length - 1, Math.floor(getViewInteractionCount() / 50))
       return longestInteractions[interactionIndex]
     },
+
+    isTracked(interactionId: number): boolean {
+      return longestInteractions.some((i) => i.interactionId === interactionId)
+    },
   }
 }
 
+/**
+ * Tracks the number of interactions that occurred during the current view. Freezes the count
+ * when the view ends so that the p98 estimate remains stable after `setViewEnd` is called.
+ */
 export function trackViewInteractionCount(viewLoadingType: ViewLoadingType) {
   initInteractionCountPolyfill()
   const previousInteractionCount = viewLoadingType === ViewLoadingType.INITIAL_LOAD ? 0 : getInteractionCount()
@@ -184,6 +231,100 @@ export function trackViewInteractionCount(viewLoadingType: ViewLoadingType) {
   }
 }
 
+/**
+ * Groups performance entries by interaction and render time to compute INP subparts
+ * (input delay, processing duration, presentation delay). Entries sharing the same
+ * interactionId, or whose render time falls within the 8 ms Event Timing rounding window,
+ * are merged into a single group so that subparts always sum to the reported INP duration.
+ */
+function createSubPartsTracker(longestInteractions: ReturnType<typeof trackLongestInteractions>) {
+  const groupsByInteractionId = new Map<number, EntriesGroup>()
+
+  function updateGroupWithEntry(group: EntriesGroup, entry: RumPerformanceEventTiming | RumFirstInputTiming) {
+    group.startTime = Math.min(entry.startTime, group.startTime) as RelativeTime
+    // For each group, we keep the biggest interval possible between processingStart and processingEnd
+    group.processingStart = Math.min(entry.processingStart, group.processingStart) as RelativeTime
+    group.processingEnd = Math.max(entry.processingEnd, group.processingEnd) as RelativeTime
+  }
+
+  return {
+    process(entry: RumPerformanceEventTiming | RumFirstInputTiming): void {
+      if (entry.interactionId === undefined || !entry.processingStart || !entry.processingEnd) {
+        return
+      }
+
+      const renderTime = (entry.startTime + entry.duration) as RelativeTime
+      const existingGroup = groupsByInteractionId.get(entry.interactionId)
+
+      if (existingGroup) {
+        // Update existing group with MIN/MAX values (keep original referenceRenderTime)
+        updateGroupWithEntry(existingGroup, entry)
+        return
+      }
+
+      // Try to find a group within 8ms window to merge with (different interactionId, same frame)
+      for (const [, group] of groupsByInteractionId.entries()) {
+        if (Math.abs(renderTime - group.referenceRenderTime) <= RENDER_TIME_GROUPING_THRESHOLD) {
+          updateGroupWithEntry(group, entry)
+          // Also store under this entry's interactionId for easy lookup
+          groupsByInteractionId.set(entry.interactionId, group)
+          return
+        }
+      }
+
+      // Create new group
+      groupsByInteractionId.set(entry.interactionId, {
+        startTime: entry.startTime,
+        processingStart: entry.processingStart,
+        processingEnd: entry.processingEnd,
+        referenceRenderTime: renderTime,
+      })
+    },
+
+    // Prune after all entries are grouped: groups not in longestInteractions can never affect p98 subparts.
+    // Keeps groupsByInteractionId capped at MAX_INTERACTION_ENTRIES
+    pruneUntracked(): void {
+      for (const [interactionId] of groupsByInteractionId) {
+        if (!longestInteractions.isTracked(interactionId)) {
+          groupsByInteractionId.delete(interactionId)
+        }
+      }
+    },
+
+    computeSubParts(
+      entry: RumPerformanceEventTiming | RumFirstInputTiming,
+      inpDuration: Duration
+    ): InteractionToNextPaint['subParts'] | undefined {
+      if (!entry.processingStart || !entry.processingEnd || entry.interactionId === undefined) {
+        return undefined
+      }
+
+      const group = groupsByInteractionId.get(entry.interactionId)
+      // Shouldn't happen since entries are grouped before p98 calculation.
+      if (!group) {
+        return undefined
+      }
+
+      // Use group.startTime consistently to ensure subparts sum to inpDuration
+      // Math.max prevents nextPaintTime from being before processingStart (Chrome implementation)
+      const nextPaintTime = Math.max(group.startTime + inpDuration, group.processingStart) as RelativeTime
+
+      // Clamp processingEnd to not exceed nextPaintTime
+      const processingEnd = Math.min(group.processingEnd, nextPaintTime) as RelativeTime
+
+      return {
+        inputDelay: elapsed(group.startTime, group.processingStart),
+        processingDuration: elapsed(group.processingStart, processingEnd),
+        presentationDelay: elapsed(processingEnd, nextPaintTime),
+      }
+    },
+
+    stop(): void {
+      groupsByInteractionId.clear()
+    },
+  }
+}
+
 export function isInteractionToNextPaintSupported() {
   return (
     supportPerformanceTimingEvent(RumPerformanceEntryType.EVENT) &&
@@ -191,3 +332,7 @@ export function isInteractionToNextPaintSupported() {
     'interactionId' in PerformanceEventTiming.prototype
   )
 }
+
+function sanitizeInpValue(inpValue: Duration) {
+  return Math.min(inpValue, MAX_INP_VALUE) as Duration
+}

package/src/domain/view/viewMetrics/trackLargestContentfulPaint.ts

@@ -1,7 +1,9 @@
-import type { RelativeTime } from '@kubesense/kubesense-browser-core'
-import { DOM_EVENT, ONE_MINUTE, addEventListeners, findLast } from '@kubesense/kubesense-browser-core'
+import type { RelativeTime } from '@kubesense/kubesense-js-core/time'
+import { ONE_MINUTE } from '@kubesense/kubesense-js-core/time'
+import { DOM_EVENT, addEventListeners, findLast } from '@kubesense/kubesense-browser-core'
 import type { RumConfiguration } from '../../configuration'
 import { createPerformanceObservable, RumPerformanceEntryType } from '../../../browser/performanceObservable'
+import { findLcpResourceEntry, getNavigationEntry, sanitizeFirstByte } from '../../../browser/performanceUtils'
 import type { RumLargestContentfulPaintTiming } from '../../../browser/performanceObservable'
 import { getSelectorFromElement } from '../../getSelectorFromElement'
 import type { FirstHidden } from './trackFirstHidden'
@@ -14,6 +16,11 @@ export interface LargestContentfulPaint {
   value: RelativeTime
   targetSelector?: string
   resourceUrl?: string
+  subParts?: {
+    loadDelay: RelativeTime
+    loadTime: RelativeTime
+    renderDelay: RelativeTime
+  }
 }
 
 /**
@@ -33,7 +40,6 @@ export function trackLargestContentfulPaint(
   // but the web-vitals reference implementation uses this as a safeguard.
   let firstInteractionTimestamp = Infinity
   const { stop: stopEventListener } = addEventListeners(
-    configuration,
     eventTarget,
     [DOM_EVENT.POINTER_DOWN, DOM_EVENT.KEY_DOWN],
     (event) => {
@@ -43,7 +49,7 @@ export function trackLargestContentfulPaint(
   )
 
   let biggestLcpSize = 0
-  const performanceLcpSubscription = createPerformanceObservable(configuration, {
+  const performanceLcpSubscription = createPerformanceObservable({
     type: RumPerformanceEntryType.LARGEST_CONTENTFUL_PAINT,
     buffered: true,
   }).subscribe((entries) => {
@@ -64,10 +70,16 @@ export function trackLargestContentfulPaint(
         lcpTargetSelector = getSelectorFromElement(lcpEntry.element, configuration.actionNameAttribute)
       }
 
+      const resourceUrl = computeLcpEntryUrl(lcpEntry)
+      const lcpValue = lcpEntry.startTime
+
+      const subParts = computeLcpSubParts(resourceUrl, lcpValue)
+
       callback({
-        value: lcpEntry.startTime,
+        value: lcpValue,
         targetSelector: lcpTargetSelector,
-        resourceUrl: computeLcpEntryUrl(lcpEntry),
+        resourceUrl,
+        subParts,
       })
       biggestLcpSize = lcpEntry.size
     }
@@ -85,3 +97,32 @@ export function trackLargestContentfulPaint(
 function computeLcpEntryUrl(entry: RumLargestContentfulPaintTiming) {
   return entry.url === '' ? undefined : entry.url
 }
+
+/**
+ * Compute the LCP sub-parts breakdown (loadDelay, loadTime, renderDelay).
+ * Returns undefined if navigation timing data or TTFB is unavailable.
+ */
+function computeLcpSubParts(
+  resourceUrl: string | undefined,
+  lcpValue: RelativeTime
+): LargestContentfulPaint['subParts'] {
+  const firstByte = sanitizeFirstByte(getNavigationEntry())
+
+  if (firstByte === undefined) {
+    return undefined
+  }
+
+  const lcpResourceEntry = resourceUrl ? findLcpResourceEntry(resourceUrl, lcpValue) : undefined
+  const lcpRequestStart = lcpResourceEntry
+    ? (Math.max(firstByte, lcpResourceEntry.requestStart || lcpResourceEntry.startTime) as RelativeTime)
+    : firstByte
+
+  // Cap at LCP time to handle resources that continue downloading after LCP (e.g., videos)
+  const lcpResponseEnd = Math.min(lcpValue, Math.max(lcpRequestStart, lcpResourceEntry?.responseEnd || 0))
+
+  return {
+    loadDelay: (lcpRequestStart - firstByte) as RelativeTime,
+    loadTime: (lcpResponseEnd - lcpRequestStart) as RelativeTime,
+    renderDelay: (lcpValue - lcpResponseEnd) as RelativeTime,
+  }
+}

package/src/domain/view/viewMetrics/trackLoadingTime.ts

@@ -1,5 +1,6 @@
-import type { ClocksState, Duration, Observable } from '@kubesense/kubesense-browser-core'
-import { elapsed } from '@kubesense/kubesense-browser-core'
+import type { ClocksState, Duration } from '@kubesense/kubesense-js-core/time'
+import type { Observable } from '@kubesense/kubesense-browser-core'
+import { elapsed } from '@kubesense/kubesense-js-core/time'
 import { waitPageActivityEnd } from '../../waitPageActivityEnd'
 import type { RumConfiguration } from '../../configuration'
 import type { LifeCycle } from '../../lifeCycle'
@@ -25,7 +26,7 @@ export function trackLoadingTime(
   let isWaitingForLoadEvent = loadType === ViewLoadingType.INITIAL_LOAD
   let isWaitingForActivityLoadingTime = true
   const loadingTimeCandidates: Duration[] = []
-  const firstHidden = trackFirstHidden(configuration, viewStart)
+  const firstHidden = trackFirstHidden(viewStart)
 
   function invokeCallbackIfAllCandidatesAreReceived() {
     if (!isWaitingForActivityLoadingTime && !isWaitingForLoadEvent && loadingTimeCandidates.length > 0) {

package/src/domain/view/viewMetrics/trackNavigationTimings.ts

@@ -1,8 +1,8 @@
-import type { Duration, TimeoutId } from '@kubesense/kubesense-browser-core'
-import { setTimeout, relativeNow, runOnReadyState, clearTimeout } from '@kubesense/kubesense-browser-core'
+import type { TimeoutId } from '@kubesense/kubesense-browser-core'
+import type { Duration } from '@kubesense/kubesense-js-core/time'
+import { setTimeout, runOnReadyState, clearTimeout, mockable } from '@kubesense/kubesense-browser-core'
 import type { RumPerformanceNavigationTiming } from '../../../browser/performanceObservable'
-import type { RumConfiguration } from '../../configuration'
-import { getNavigationEntry } from '../../../browser/performanceUtils'
+import { getNavigationEntry, sanitizeFirstByte } from '../../../browser/performanceUtils'
 
 export interface NavigationTimings {
   domComplete: Duration
@@ -19,13 +19,9 @@ export type RelevantNavigationTiming = Pick<
   'domComplete' | 'domContentLoadedEventEnd' | 'domInteractive' | 'loadEventEnd' | 'responseStart'
 >
 
-export function trackNavigationTimings(
-  configuration: RumConfiguration,
-  callback: (timings: NavigationTimings) => void,
-  getNavigationEntryImpl: () => RelevantNavigationTiming = getNavigationEntry
-) {
-  return waitAfterLoadEvent(configuration, () => {
-    const entry = getNavigationEntryImpl()
+export function trackNavigationTimings(callback: (timings: NavigationTimings) => void) {
+  return waitAfterLoadEvent(() => {
+    const entry = mockable(getNavigationEntry)()
 
     if (!isIncompleteNavigation(entry)) {
       callback(processNavigationEntry(entry))
@@ -39,11 +35,7 @@ function processNavigationEntry(entry: RelevantNavigationTiming): NavigationTimi
     domContentLoaded: entry.domContentLoadedEventEnd,
     domInteractive: entry.domInteractive,
     loadEvent: entry.loadEventEnd,
-    // In some cases the value reported is negative, zero (meaning unavailable, e.g. cross-origin
-    // without Timing-Allow-Origin), or larger than the current page time. Ignore these cases:
-    // https://github.com/GoogleChrome/web-vitals/issues/137
-    // https://github.com/GoogleChrome/web-vitals/issues/162
-    firstByte: entry.responseStart > 0 && entry.responseStart <= relativeNow() ? entry.responseStart : undefined,
+    firstByte: sanitizeFirstByte(entry),
   }
 }
 
@@ -51,9 +43,9 @@ function isIncompleteNavigation(entry: RelevantNavigationTiming) {
   return entry.loadEventEnd <= 0
 }
 
-function waitAfterLoadEvent(configuration: RumConfiguration, callback: () => void) {
+function waitAfterLoadEvent(callback: () => void) {
   let timeoutId: TimeoutId | undefined
-  const { stop: stopOnReadyState } = runOnReadyState(configuration, 'complete', () => {
+  const { stop: stopOnReadyState } = runOnReadyState('complete', () => {
     // Invoke the callback a bit after the actual load event, so the "loadEventEnd" timing is accurate
     timeoutId = setTimeout(() => callback())
   })