✨[RUMF-473] collect view loading time in ns and integrate the load event timing in the loading time calculation

packages/rum/src/trackPageActivities.ts

@@ -1,11 +1,11 @@
 import { monitor, Observable } from '@datadog/browser-core'
 import { LifeCycle, LifeCycleEventType, Subscription } from './lifeCycle'
 
-// Delay to wait for a page activity to validate the tracking process
+// Delay to wait for a page activity to validate the tracking process in ms
 export const PAGE_ACTIVITY_VALIDATION_DELAY = 100
-// Delay to wait after a page activity to end the tracking process
+// Delay to wait after a page activity to end the tracking process in ms
 export const PAGE_ACTIVITY_END_DELAY = 100
-// Maximum duration of the tracking process
+// Maximum duration of the tracking process in ms
 export const PAGE_ACTIVITY_MAX_DURATION = 10_000
 
 export interface PageActivityEvent {

packages/rum/src/userActionCollection.ts

@@ -1,4 +1,4 @@
-import { Context, DOM_EVENT, generateUUID, noop } from '@datadog/browser-core'
+import { Context, DOM_EVENT, generateUUID, msToNs } from '@datadog/browser-core'
 import { getElementContent } from './getElementContent'
 import { LifeCycle, LifeCycleEventType } from './lifeCycle'
 import { trackEventCounts } from './trackEventCounts'
@@ -83,7 +83,7 @@ function newUserAction(lifeCycle: LifeCycle, type: UserActionType, name: string)
         name,
         startTime,
         type,
-        duration: endTime - startTime,
+        duration: msToNs(endTime - startTime),
         measures: {
           errorCount: eventCounts.errorCount,
           longTaskCount: eventCounts.longTaskCount,

packages/rum/src/viewCollection.ts

@@ -115,6 +115,10 @@ function newView(
   updateView()
 
   function updateView() {
+    if (measures.loadEventEnd) {
+      loadingTime = Math.max(measures.loadEventEnd, loadingTime || 0)
+    }
+
     documentVersion += 1
     lifeCycle.notify(LifeCycleEventType.VIEW_COLLECTED, {
       documentVersion,
@@ -196,10 +200,10 @@ function trackTimings(lifeCycle: LifeCycle, callback: (timings: Timings) => void
 }
 
 function trackLoadingTime(lifeCycle: LifeCycle, callback: (loadingTimeValue: number | undefined) => void) {
-  const startTime: number = performance.now()
+  const startTime = performance.now()
   const { stop: stopWaitIdlePageActivity } = waitIdlePageActivity(lifeCycle, (hadActivity, endTime) => {
     if (hadActivity) {
-      callback(endTime - startTime)
+      callback(msToNs(endTime - startTime))
     } else {
       callback(undefined)
     }

packages/rum/test/userActionCollection.spec.ts

@@ -1,4 +1,4 @@
-import { DOM_EVENT, ErrorMessage } from '@datadog/browser-core'
+import { DOM_EVENT, ErrorMessage, msToNs } from '@datadog/browser-core'
 import { LifeCycle, LifeCycleEventType } from '../src/lifeCycle'
 import { PAGE_ACTIVITY_MAX_DURATION, PAGE_ACTIVITY_VALIDATION_DELAY } from '../src/trackPageActivities'
 import {
@@ -111,7 +111,7 @@ describe('startUserActionCollection', () => {
     mockValidatedClickUserAction()
     expect(events).toEqual([
       {
-        duration: BEFORE_PAGE_ACTIVITY_VALIDATION_DELAY,
+        duration: msToNs(BEFORE_PAGE_ACTIVITY_VALIDATION_DELAY),
         id: jasmine.any(String),
         measures: {
           errorCount: 0,

packages/rum/test/viewCollection.spec.ts

@@ -1,4 +1,4 @@
-import { getHash, getPathName, getSearch } from '@datadog/browser-core'
+import { getHash, getPathName, getSearch, msToNs } from '@datadog/browser-core'
 
 import { LifeCycle, LifeCycleEventType } from '../src/lifeCycle'
 import { PerformanceLongTaskTiming, PerformancePaintTiming } from '../src/rum'
@@ -170,7 +170,7 @@ describe('rum track loading time', () => {
     jasmine.clock().tick(AFTER_PAGE_ACTIVITY_END_DELAY)
     jasmine.clock().tick(THROTTLE_VIEW_UPDATE_PERIOD)
 
-    expect(getViewEvent(1).loadingTime).toEqual(BEFORE_PAGE_ACTIVITY_VALIDATION_DELAY)
+    expect(getViewEvent(1).loadingTime).toEqual(msToNs(BEFORE_PAGE_ACTIVITY_VALIDATION_DELAY))
   })
 })
 
@@ -308,6 +308,65 @@ describe('rum view measures', () => {
     jasmine.clock().uninstall()
   })
 
+  it('should have a loadEventEnd loading time when having no activity', () => {
+    jasmine.clock().install()
+    expect(getRumEventCount()).toEqual(1)
+    expect(getViewEvent(0).measures).toEqual({
+      errorCount: 0,
+      longTaskCount: 0,
+      resourceCount: 0,
+      userActionCount: 0,
+    })
+
+    lifeCycle.notify(
+      LifeCycleEventType.PERFORMANCE_ENTRY_COLLECTED,
+      FAKE_NAVIGATION_ENTRY as PerformanceNavigationTiming
+    )
+
+    expect(getRumEventCount()).toEqual(1)
+
+    jasmine.clock().tick(THROTTLE_VIEW_UPDATE_PERIOD)
+
+    expect(getRumEventCount()).toEqual(2)
+    expect(getViewEvent(1).measures.loadEventEnd).toEqual(567e6)
+    expect(getViewEvent(1).loadingTime).toEqual(getViewEvent(1).measures.loadEventEnd)
+
+    jasmine.clock().uninstall()
+  })
+
+  it('should have a loadEventEnd loading time when load event happens after all activity completions', () => {
+    jasmine.clock().install()
+    expect(getRumEventCount()).toEqual(1)
+    expect(getViewEvent(0).measures).toEqual({
+      errorCount: 0,
+      longTaskCount: 0,
+      resourceCount: 0,
+      userActionCount: 0,
+    })
+
+    expect(getRumEventCount()).toEqual(1)
+
+    jasmine.clock().tick(BEFORE_PAGE_ACTIVITY_VALIDATION_DELAY)
+    lifeCycle.notify(LifeCycleEventType.DOM_MUTATED)
+    jasmine.clock().tick(AFTER_PAGE_ACTIVITY_END_DELAY)
+    jasmine.clock().tick(THROTTLE_VIEW_UPDATE_PERIOD)
+
+    expect(getRumEventCount()).toEqual(2)
+    expect(getViewEvent(1).loadingTime).toBeLessThan(567e6)
+
+    lifeCycle.notify(
+      LifeCycleEventType.PERFORMANCE_ENTRY_COLLECTED,
+      FAKE_NAVIGATION_ENTRY as PerformanceNavigationTiming
+    )
+    jasmine.clock().tick(THROTTLE_VIEW_UPDATE_PERIOD)
+
+    expect(getRumEventCount()).toEqual(3)
+    expect(getViewEvent(2).measures.loadEventEnd).toEqual(567e6)
+    expect(getViewEvent(2).loadingTime).toEqual(getViewEvent(2).measures.loadEventEnd)
+
+    jasmine.clock().uninstall()
+  })
+
   it('should update measures when notified with a RESOURCE_ADDED_TO_BATCH event (throttled)', () => {
     jasmine.clock().install()
     expect(getRumEventCount()).toEqual(1)