✨[RUMF-373] Add View load duration and load type

packages/rum/src/lifeCycle.ts

@@ -1,12 +1,13 @@
 import { ErrorMessage, RequestCompleteEvent, RequestStartEvent } from '@datadog/browser-core'
 import { UserAction } from './userActionCollection'
-import { View } from './viewCollection'
+import { View, ViewLoad } from './viewCollection'
 
 export enum LifeCycleEventType {
   ERROR_COLLECTED,
   PERFORMANCE_ENTRY_COLLECTED,
   USER_ACTION_COLLECTED,
   VIEW_COLLECTED,
+  VIEW_LOAD_COMPLETED,
   REQUEST_STARTED,
   REQUEST_COMPLETED,
   SESSION_RENEWED,
@@ -28,6 +29,7 @@ export class LifeCycle {
   notify(eventType: LifeCycleEventType.REQUEST_COMPLETED, data: RequestCompleteEvent): void
   notify(eventType: LifeCycleEventType.USER_ACTION_COLLECTED, data: UserAction): void
   notify(eventType: LifeCycleEventType.VIEW_COLLECTED, data: View): void
+  notify(eventType: LifeCycleEventType.VIEW_LOAD_COMPLETED, data: ViewLoad): void
   notify(
     eventType:
       | LifeCycleEventType.SESSION_RENEWED
@@ -54,6 +56,7 @@ export class LifeCycle {
   ): Subscription
   subscribe(eventType: LifeCycleEventType.USER_ACTION_COLLECTED, callback: (data: UserAction) => void): Subscription
   subscribe(eventType: LifeCycleEventType.VIEW_COLLECTED, callback: (data: View) => void): Subscription
+  subscribe(eventType: LifeCycleEventType.VIEW_LOAD_COMPLETED, callback: (data: ViewLoad) => void): Subscription
   subscribe(
     eventType:
       | LifeCycleEventType.SESSION_RENEWED

packages/rum/src/userActionCollection.ts

@@ -1,7 +1,8 @@
 import { Context, DOM_EVENT, generateUUID, monitor, Observable } from '@datadog/browser-core'
 import { getElementContent } from './getElementContent'
 import { LifeCycle, LifeCycleEventType, Subscription } from './lifeCycle'
-import { trackEventCounts } from './trackEventCounts'
+import { EventCounts, trackEventCounts } from './trackEventCounts'
+import { View } from './viewCollection'
 
 // Automatic user action collection lifecycle overview:
 //
@@ -66,55 +67,110 @@ export interface AutoUserAction {
 export type UserAction = CustomUserAction | AutoUserAction
 
 export function startUserActionCollection(lifeCycle: LifeCycle) {
+  const subscriptions: Subscription[] = []
+  let currentViewId: string | undefined
+
+  addEventListener(DOM_EVENT.CLICK, processClick, { capture: true })
   function processClick(event: Event) {
     if (!(event.target instanceof Element)) {
       return
     }
-
     newUserAction(lifeCycle, UserActionType.CLICK, getElementContent(event.target))
   }
 
-  addEventListener(DOM_EVENT.CLICK, processClick, { capture: true })
+  subscriptions.push(lifeCycle.subscribe(LifeCycleEventType.VIEW_COLLECTED, processViewLoading))
+  function processViewLoading(loadedView: View) {
+    if (!loadedView || loadedView.id === currentViewId) {
+      return
+    }
+    currentViewId = loadedView.id
+    newViewLoading(lifeCycle, loadedView.location.pathname, loadedView.startTime)
+  }
 
   return {
     stop() {
       removeEventListener(DOM_EVENT.CLICK, processClick, { capture: true })
+      subscriptions.forEach((s) => s.unsubscribe())
     },
   }
 }
 
-let currentUserAction: { id: string; startTime: number } | undefined
+interface PartialUserAction {
+  id: string
+  startTime: number
+  type: UserActionType
+  name: string
+}
+let currentUserAction: PartialUserAction | undefined
+
+interface ViewLoadingState {
+  pathname: string
+  startTime: number
+  stopPageActivitiesTracking: () => void
+}
+let currentViewLoadingState: ViewLoadingState | undefined
+
+function newViewLoading(lifeCycle: LifeCycle, pathname: string, startTime: number) {
+  // Cancel current user action
+  currentUserAction = undefined
+
+  if (currentViewLoadingState) {
+    currentViewLoadingState.stopPageActivitiesTracking()
+  }
+
+  const { observable: pageActivitiesObservable, stop: stopPageActivitiesTracking } = trackPageActivities(lifeCycle)
+  currentViewLoadingState = {
+    pathname,
+    startTime,
+    stopPageActivitiesTracking,
+  }
+
+  waitUserActionCompletion(pageActivitiesObservable, (endTime) => {
+    stopPageActivitiesTracking()
+    if (currentViewLoadingState !== undefined) {
+      // Validation timeout completion does not return an end time
+      const loadingEndTime = endTime || performance.now()
+      lifeCycle.notify(LifeCycleEventType.VIEW_LOAD_COMPLETED, {
+        duration: loadingEndTime - currentViewLoadingState.startTime,
+        startTime: currentViewLoadingState.startTime,
+      })
+    }
+    currentViewLoadingState = undefined
+  })
+}
 
 function newUserAction(lifeCycle: LifeCycle, type: UserActionType, name: string) {
-  if (currentUserAction) {
-    // Discard any new user action if another one is already occuring.
+  if (currentViewLoadingState || currentUserAction) {
+    // Discard any new click user action if another one is already occuring.
+    // Discard any new user action if page is in a loading state.
     return
   }
 
   const id = generateUUID()
   const startTime = performance.now()
-  currentUserAction = { id, startTime }
+  currentUserAction = { id, startTime, type, name }
 
   const { observable: pageActivitiesObservable, stop: stopPageActivitiesTracking } = trackPageActivities(lifeCycle)
   const { eventCounts, stop: stopEventCountsTracking } = trackEventCounts(lifeCycle)
 
   waitUserActionCompletion(pageActivitiesObservable, (endTime) => {
     stopPageActivitiesTracking()
     stopEventCountsTracking()
-    if (endTime !== undefined) {
+    if (endTime !== undefined && currentUserAction !== undefined) {
       lifeCycle.notify(LifeCycleEventType.USER_ACTION_COLLECTED, {
         id,
-        name,
-        startTime,
-        type,
-        duration: endTime - startTime,
+        duration: endTime - currentUserAction.startTime,
         measures: {
           errorCount: eventCounts.errorCount,
           longTaskCount: eventCounts.longTaskCount,
           resourceCount: eventCounts.resourceCount,
         },
+        name: currentUserAction.name,
+        startTime: currentUserAction.startTime,
+        type: currentUserAction.type,
       })
     }
+    currentUserAction = undefined
   })
 }
 
@@ -212,7 +268,6 @@ function waitUserActionCompletion(
     clearTimeout(validationTimeoutId)
     clearTimeout(idleTimeoutId)
     clearTimeout(maxDurationTimeoutId)
-    currentUserAction = undefined
     completionCallback(endTime)
   }
 }

packages/rum/src/viewCollection.ts

@@ -12,6 +12,13 @@ export interface View {
   documentVersion: number
   startTime: number
   duration: number
+  loadDuration?: number
+  loadType: ViewLoadType
+}
+
+export interface ViewLoad {
+  startTime: number
+  duration: number
 }
 
 export interface ViewMeasures {
@@ -26,26 +33,33 @@ export interface ViewMeasures {
   userActionCount: number
 }
 
+export enum ViewLoadType {
+  INITIAL_PAGE_LOAD = 'initial page load',
+  ROUTE_CHANGE = 'route change',
+}
+
 export const THROTTLE_VIEW_UPDATE_PERIOD = 3000
 
 export function startViewCollection(location: Location, lifeCycle: LifeCycle, session: RumSession) {
   let currentLocation = { ...location }
   const startOrigin = 0
-  let currentView = newView(lifeCycle, currentLocation, session, startOrigin)
+  let currentViewLoadType: ViewLoadType = ViewLoadType.INITIAL_PAGE_LOAD
+  let currentView = newView(lifeCycle, currentLocation, session, currentViewLoadType, startOrigin)
 
   // Renew view on history changes
   trackHistory(() => {
+    currentViewLoadType = ViewLoadType.ROUTE_CHANGE
     if (areDifferentViews(currentLocation, location)) {
       currentLocation = { ...location }
       currentView.end()
-      currentView = newView(lifeCycle, currentLocation, session)
+      currentView = newView(lifeCycle, currentLocation, session, currentViewLoadType)
     }
   })
 
   // Renew view on session renewal
   lifeCycle.subscribe(LifeCycleEventType.SESSION_RENEWED, () => {
     currentView.end()
-    currentView = newView(lifeCycle, currentLocation, session)
+    currentView = newView(lifeCycle, currentLocation, session, currentViewLoadType)
   })
 
   // End the current view on page unload
@@ -58,6 +72,7 @@ interface ViewContext {
   id: string
   location: Location
   sessionId: string | undefined
+  loadType: ViewLoadType
 }
 
 export let viewContext: ViewContext
@@ -66,6 +81,7 @@ function newView(
   lifeCycle: LifeCycle,
   location: Location,
   session: RumSession,
+  loadType: ViewLoadType,
   startOrigin: number = performance.now()
 ) {
   // Setup initial values
@@ -77,8 +93,9 @@ function newView(
     userActionCount: 0,
   }
   let documentVersion = 0
+  let loadDuration: number
 
-  viewContext = { id, location, sessionId: session.getId() }
+  viewContext = { id, location, loadType, sessionId: session.getId() }
 
   // Update the view every time the measures are changing
   const { throttled: scheduleViewUpdate, stop: stopScheduleViewUpdate } = throttle(
@@ -95,6 +112,12 @@ function newView(
   const { stop: stopTimingsTracking } = trackTimings(lifeCycle, updateMeasures)
   const { stop: stopEventCountsTracking } = trackEventCounts(lifeCycle, updateMeasures)
 
+  function updateLoadDuration(loadDurationValue: number) {
+    loadDuration = loadDurationValue
+    scheduleViewUpdate()
+  }
+  const { stop: stopLoadDurationTracking } = trackLoadDuration(lifeCycle, updateLoadDuration)
+
   // Initial view update
   updateView()
 
@@ -103,6 +126,8 @@ function newView(
     lifeCycle.notify(LifeCycleEventType.VIEW_COLLECTED, {
       documentVersion,
       id,
+      loadDuration,
+      loadType,
       location,
       measures,
       duration: performance.now() - startOrigin,
@@ -175,3 +200,13 @@ function trackTimings(lifeCycle: LifeCycle, callback: (timings: Timings) => void
   )
   return { stop: stopPerformanceTracking }
 }
+
+function trackLoadDuration(lifeCycle: LifeCycle, callback: (loadDurationValue: number) => void) {
+  const { unsubscribe: stopViewLoadTracking } = lifeCycle.subscribe(
+    LifeCycleEventType.VIEW_LOAD_COMPLETED,
+    (viewLoad: ViewLoad) => {
+      callback(viewLoad.duration)
+    }
+  )
+  return { stop: stopViewLoadTracking }
+}

packages/rum/test/userActionCollection.spec.ts

@@ -1,4 +1,12 @@
-import { DOM_EVENT, ErrorMessage, Observable, RequestCompleteEvent } from '@datadog/browser-core'
+import {
+  DOM_EVENT,
+  ErrorMessage,
+  getHash,
+  getPathName,
+  getSearch,
+  Observable,
+  RequestCompleteEvent,
+} from '@datadog/browser-core'
 import { LifeCycle, LifeCycleEventType } from '../src/lifeCycle'
 import {
   $$tests,
@@ -13,11 +21,14 @@ import {
   UserActionType,
 } from '../src/userActionCollection'
 const { waitUserActionCompletion, trackPageActivities, resetUserAction, newUserAction } = $$tests
+import { View, ViewLoadType } from '../src/viewCollection'
 
 // Used to wait some time after the creation of a user action
 const BEFORE_USER_ACTION_VALIDATION_DELAY = USER_ACTION_VALIDATION_DELAY * 0.8
 // Used to wait some time before the (potential) end of a user action
 const BEFORE_USER_ACTION_END_DELAY = USER_ACTION_END_DELAY * 0.8
+// Used to wait some time after the (potential) end of a user action
+const AFTER_USER_ACTION_END_DELAY = USER_ACTION_END_DELAY * 1.2
 // Used to wait some time but it doesn't matter how much.
 const SOME_ARBITRARY_DELAY = 50
 // A long delay used to wait after any user action is finished.
@@ -81,7 +92,7 @@ describe('startUserActionCollection', () => {
     userActionCollectionSubscription.stop()
   })
 
-  it('starts a user action when clicking on an element', () => {
+  function mockValidatedClickUserAction() {
     button.addEventListener(DOM_EVENT.CLICK, () => {
       clock.tick(BEFORE_USER_ACTION_VALIDATION_DELAY)
       // Since we don't collect dom mutations for this test, manually dispatch one
@@ -92,6 +103,54 @@ describe('startUserActionCollection', () => {
     button.click()
 
     clock.expire()
+  }
+
+  it('cancels user action on view loading', () => {
+    const fakeLocation: Partial<Location> = { pathname: '/foo' }
+    const mockView: Partial<View> = {
+      documentVersion: 0,
+      id: 'foo',
+      location: fakeLocation as Location,
+    }
+    lifeCycle.notify(LifeCycleEventType.VIEW_COLLECTED, mockView as View)
+
+    mockValidatedClickUserAction()
+
+    expect(events).toEqual([])
+  })
+
+  it('starts a user action when clicking on an element after a view loading', () => {
+    const fakeLocation: Partial<Location> = { pathname: '/foo' }
+    const mockView: Partial<View> = {
+      documentVersion: 0,
+      id: 'foo',
+      location: fakeLocation as Location,
+    }
+    lifeCycle.notify(LifeCycleEventType.VIEW_COLLECTED, mockView as View)
+
+    // View loads are completed like a UA would have been completed when there is no activity for a given time
+    clock.tick(AFTER_USER_ACTION_END_DELAY)
+    clock.expire()
+
+    mockValidatedClickUserAction()
+    expect(events).toEqual([
+      {
+        duration: BEFORE_USER_ACTION_VALIDATION_DELAY,
+        id: jasmine.any(String),
+        measures: {
+          errorCount: 0,
+          longTaskCount: 0,
+          resourceCount: 0,
+        },
+        name: 'Click me',
+        startTime: jasmine.any(Number),
+        type: UserActionType.CLICK,
+      },
+    ])
+  })
+
+  it('starts a user action when clicking on an element', () => {
+    mockValidatedClickUserAction()
     expect(events).toEqual([
       {
         duration: BEFORE_USER_ACTION_VALIDATION_DELAY,