✨[RUM] add view resource count (#189)

* ✨[RUM] add view resource count

* ✅[e2e] add missing expectation

* ✅[e2e cbt] fix wrong expectation

on safari, there is a resource event for the current page

* 👌[RUM] rename life cycle events

packages/rum/src/lifeCycle.ts

@@ -2,33 +2,37 @@ import { ErrorMessage, RequestDetails } from '@browser-sdk/core'
 import { UserAction } from './rum'
 
 export enum LifeCycleEventType {
-  error,
-  performance,
-  userAction,
-  request,
-  renewSession,
+  ERROR_COLLECTED,
+  PERFORMANCE_ENTRY_COLLECTED,
+  USER_ACTION_COLLECTED,
+  REQUEST_COLLECTED,
+  SESSION_RENEWED,
+  RESOURCE_ADDED_TO_BATCH,
 }
 
 export class LifeCycle {
   private callbacks: { [key in LifeCycleEventType]?: Array<(data: any) => void> } = {}
 
-  notify(eventType: LifeCycleEventType.error, data: ErrorMessage): void
-  notify(eventType: LifeCycleEventType.performance, data: PerformanceEntry): void
-  notify(eventType: LifeCycleEventType.request, data: RequestDetails): void
-  notify(eventType: LifeCycleEventType.userAction, data: UserAction): void
-  notify(eventType: LifeCycleEventType.renewSession): void
+  notify(eventType: LifeCycleEventType.ERROR_COLLECTED, data: ErrorMessage): void
+  notify(eventType: LifeCycleEventType.PERFORMANCE_ENTRY_COLLECTED, data: PerformanceEntry): void
+  notify(eventType: LifeCycleEventType.REQUEST_COLLECTED, data: RequestDetails): void
+  notify(eventType: LifeCycleEventType.USER_ACTION_COLLECTED, data: UserAction): void
+  notify(eventType: LifeCycleEventType.SESSION_RENEWED | LifeCycleEventType.RESOURCE_ADDED_TO_BATCH): void
   notify(eventType: LifeCycleEventType, data?: any) {
     const eventCallbacks = this.callbacks[eventType]
     if (eventCallbacks) {
       eventCallbacks.forEach((callback) => callback(data))
     }
   }
 
-  subscribe(eventType: LifeCycleEventType.error, callback: (data: ErrorMessage) => void): void
-  subscribe(eventType: LifeCycleEventType.performance, callback: (data: PerformanceEntry) => void): void
-  subscribe(eventType: LifeCycleEventType.request, callback: (data: RequestDetails) => void): void
-  subscribe(eventType: LifeCycleEventType.userAction, callback: (data: UserAction) => void): void
-  subscribe(eventType: LifeCycleEventType.renewSession, callback: () => void): void
+  subscribe(eventType: LifeCycleEventType.ERROR_COLLECTED, callback: (data: ErrorMessage) => void): void
+  subscribe(eventType: LifeCycleEventType.PERFORMANCE_ENTRY_COLLECTED, callback: (data: PerformanceEntry) => void): void
+  subscribe(eventType: LifeCycleEventType.REQUEST_COLLECTED, callback: (data: RequestDetails) => void): void
+  subscribe(eventType: LifeCycleEventType.USER_ACTION_COLLECTED, callback: (data: UserAction) => void): void
+  subscribe(
+    eventType: LifeCycleEventType.SESSION_RENEWED | LifeCycleEventType.RESOURCE_ADDED_TO_BATCH,
+    callback: () => void
+  ): void
   subscribe(eventType: LifeCycleEventType, callback: (data?: any) => void) {
     const eventCallbacks = this.callbacks[eventType]
     if (eventCallbacks) {

packages/rum/src/performanceCollection.ts

@@ -80,7 +80,7 @@ function retrieveNavigationTimingWhenLoaded(callback: (timing: PerformanceNaviga
 
 function handlePerformanceEntries(session: RumSession, lifeCycle: LifeCycle, entries: PerformanceEntry[]) {
   function notify(entry: PerformanceEntry) {
-    lifeCycle.notify(LifeCycleEventType.performance, entry)
+    lifeCycle.notify(LifeCycleEventType.PERFORMANCE_ENTRY_COLLECTED, entry)
   }
 
   if (session.isTrackedWithResource()) {

packages/rum/src/rum.entry.ts

@@ -89,8 +89,10 @@ datadogRum.init = monitor((userConfiguration: RumUserConfiguration) => {
   const requestObservable = startRequestCollection()
   startPerformanceCollection(lifeCycle, session)
 
-  errorObservable.subscribe((errorMessage) => lifeCycle.notify(LifeCycleEventType.error, errorMessage))
-  requestObservable.subscribe((requestDetails) => lifeCycle.notify(LifeCycleEventType.request, requestDetails))
+  errorObservable.subscribe((errorMessage) => lifeCycle.notify(LifeCycleEventType.ERROR_COLLECTED, errorMessage))
+  requestObservable.subscribe((requestDetails) =>
+    lifeCycle.notify(LifeCycleEventType.REQUEST_COLLECTED, requestDetails)
+  )
 
   const globalApi = startRum(rumUserConfiguration.applicationId, lifeCycle, configuration, session)
   lodashAssign(datadogRum, globalApi)

packages/rum/src/rum.ts

@@ -166,7 +166,7 @@ export function startRum(
       globalContext[key] = value
     }),
     addUserAction: monitor((name: string, context?: Context) => {
-      lifeCycle.notify(LifeCycleEventType.userAction, { name, context })
+      lifeCycle.notify(LifeCycleEventType.USER_ACTION_COLLECTED, { name, context })
     }),
     getInternalContext: monitor(() => {
       return {
@@ -213,7 +213,7 @@ function startRumBatch(
 }
 
 function trackErrors(lifeCycle: LifeCycle, addRumEvent: (event: RumEvent) => void) {
-  lifeCycle.subscribe(LifeCycleEventType.error, ({ message, context }: ErrorMessage) => {
+  lifeCycle.subscribe(LifeCycleEventType.ERROR_COLLECTED, ({ message, context }: ErrorMessage) => {
     addRumEvent({
       message,
       evt: {
@@ -228,7 +228,7 @@ function trackErrors(lifeCycle: LifeCycle, addRumEvent: (event: RumEvent) => voi
 }
 
 function trackUserAction(lifeCycle: LifeCycle, addUserEvent: (event: RumUserAction) => void) {
-  lifeCycle.subscribe(LifeCycleEventType.userAction, ({ name, context }) => {
+  lifeCycle.subscribe(LifeCycleEventType.USER_ACTION_COLLECTED, ({ name, context }) => {
     addUserEvent({
       ...context,
       evt: {
@@ -245,7 +245,7 @@ export function trackRequests(
   session: RumSession,
   addRumEvent: (event: RumEvent) => void
 ) {
-  lifeCycle.subscribe(LifeCycleEventType.request, (requestDetails: RequestDetails) => {
+  lifeCycle.subscribe(LifeCycleEventType.REQUEST_COLLECTED, (requestDetails: RequestDetails) => {
     if (!session.isTrackedWithResource()) {
       return
     }
@@ -276,6 +276,7 @@ export function trackRequests(
       },
       traceId: requestDetails.traceId,
     })
+    lifeCycle.notify(LifeCycleEventType.RESOURCE_ADDED_TO_BATCH)
   })
 }
 
@@ -284,10 +285,10 @@ function trackPerformanceTiming(
   lifeCycle: LifeCycle,
   addRumEvent: (event: RumEvent) => void
 ) {
-  lifeCycle.subscribe(LifeCycleEventType.performance, (entry) => {
+  lifeCycle.subscribe(LifeCycleEventType.PERFORMANCE_ENTRY_COLLECTED, (entry) => {
     switch (entry.entryType) {
       case 'resource':
-        handleResourceEntry(configuration, entry as PerformanceResourceTiming, addRumEvent)
+        handleResourceEntry(configuration, entry as PerformanceResourceTiming, addRumEvent, lifeCycle)
         break
       case 'longtask':
         handleLongTaskEntry(entry as PerformanceLongTaskTiming, addRumEvent)
@@ -301,7 +302,8 @@ function trackPerformanceTiming(
 export function handleResourceEntry(
   configuration: Configuration,
   entry: PerformanceResourceTiming,
-  addRumEvent: (event: RumEvent) => void
+  addRumEvent: (event: RumEvent) => void,
+  lifeCycle: LifeCycle
 ) {
   if (!isValidResource(entry.name, configuration)) {
     return
@@ -326,6 +328,7 @@ export function handleResourceEntry(
       kind: resourceKind,
     },
   })
+  lifeCycle.notify(LifeCycleEventType.RESOURCE_ADDED_TO_BATCH)
 }
 
 export function handleLongTaskEntry(entry: PerformanceLongTaskTiming, addRumEvent: (event: RumEvent) => void) {

packages/rum/src/rumSession.ts

@@ -19,7 +19,7 @@ export function startRumSession(configuration: Configuration, lifeCycle: LifeCyc
   const session = startSessionManagement(RUM_COOKIE_NAME, (rawType) => computeSessionState(configuration, rawType))
 
   session.renewObservable.subscribe(() => {
-    lifeCycle.notify(LifeCycleEventType.renewSession)
+    lifeCycle.notify(LifeCycleEventType.SESSION_RENEWED)
   })
 
   return {

packages/rum/src/viewTracker.ts

@@ -9,9 +9,10 @@ export interface ViewMeasures {
   domContentLoaded?: number
   domComplete?: number
   loadEventEnd?: number
-  userActionCount: number
   errorCount: number
+  resourceCount: number
   longTaskCount: number
+  userActionCount: number
 }
 
 export let viewId: string
@@ -49,6 +50,7 @@ function newView(location: Location, addRumEvent: (event: RumEvent) => void) {
   viewMeasures = {
     errorCount: 0,
     longTaskCount: 0,
+    resourceCount: 0,
     userActionCount: 0,
   }
   viewLocation = { ...location }
@@ -104,7 +106,7 @@ function areDifferentViews(previous: Location, current: Location) {
 }
 
 function trackMeasures(lifeCycle: LifeCycle, scheduleViewUpdate: () => void) {
-  lifeCycle.subscribe(LifeCycleEventType.performance, (entry) => {
+  lifeCycle.subscribe(LifeCycleEventType.PERFORMANCE_ENTRY_COLLECTED, (entry) => {
     if (entry.entryType === 'navigation') {
       const navigationEntry = entry as PerformanceNavigationTiming
       viewMeasures = {
@@ -124,24 +126,28 @@ function trackMeasures(lifeCycle: LifeCycle, scheduleViewUpdate: () => void) {
       scheduleViewUpdate()
     }
   })
-  lifeCycle.subscribe(LifeCycleEventType.error, () => {
+  lifeCycle.subscribe(LifeCycleEventType.ERROR_COLLECTED, () => {
     viewMeasures.errorCount += 1
     scheduleViewUpdate()
   })
-  lifeCycle.subscribe(LifeCycleEventType.userAction, () => {
+  lifeCycle.subscribe(LifeCycleEventType.USER_ACTION_COLLECTED, () => {
     viewMeasures.userActionCount += 1
     scheduleViewUpdate()
   })
-  lifeCycle.subscribe(LifeCycleEventType.performance, (entry) => {
+  lifeCycle.subscribe(LifeCycleEventType.PERFORMANCE_ENTRY_COLLECTED, (entry) => {
     if (entry.entryType === 'longtask') {
       viewMeasures.longTaskCount += 1
       scheduleViewUpdate()
     }
   })
+  lifeCycle.subscribe(LifeCycleEventType.RESOURCE_ADDED_TO_BATCH, () => {
+    viewMeasures.resourceCount += 1
+    scheduleViewUpdate()
+  })
 }
 
 function trackRenewSession(location: Location, lifeCycle: LifeCycle, addRumEvent: (event: RumEvent) => void) {
-  lifeCycle.subscribe(LifeCycleEventType.renewSession, () => {
+  lifeCycle.subscribe(LifeCycleEventType.SESSION_RENEWED, () => {
     updateView(addRumEvent)
     newView(location, addRumEvent)
   })

packages/rum/test/rum.spec.ts

@@ -72,7 +72,12 @@ describe('rum handle performance entry', () => {
       expectEntryToBeAdded: boolean
     }) => {
       it(description, () => {
-        handleResourceEntry(configuration as Configuration, entry as PerformanceResourceTiming, addRumEvent)
+        handleResourceEntry(
+          configuration as Configuration,
+          entry as PerformanceResourceTiming,
+          addRumEvent,
+          new LifeCycle()
+        )
         const entryAdded = (addRumEvent as jasmine.Spy).calls.all().length !== 0
         expect(entryAdded).toEqual(expectEntryToBeAdded)
       })
@@ -115,7 +120,12 @@ describe('rum handle performance entry', () => {
       it(`should compute resource kind: ${description}`, () => {
         const entry: Partial<PerformanceResourceTiming> = { initiatorType, name: url, entryType: 'resource' }
 
-        handleResourceEntry(configuration as Configuration, entry as PerformanceResourceTiming, addRumEvent)
+        handleResourceEntry(
+          configuration as Configuration,
+          entry as PerformanceResourceTiming,
+          addRumEvent,
+          new LifeCycle()
+        )
         const resourceEvent = getEntry(addRumEvent, 0) as RumResourceEvent
         expect(resourceEvent.resource.kind).toEqual(expected)
       })
@@ -132,7 +142,12 @@ describe('rum handle performance entry', () => {
       responseStart: 25,
     }
 
-    handleResourceEntry(configuration as Configuration, entry as PerformanceResourceTiming, addRumEvent)
+    handleResourceEntry(
+      configuration as Configuration,
+      entry as PerformanceResourceTiming,
+      addRumEvent,
+      new LifeCycle()
+    )
     const resourceEvent = getEntry(addRumEvent, 0) as RumResourceEvent
     expect(resourceEvent.http.performance!.connect.duration).toEqual(7 * 1e6)
     expect(resourceEvent.http.performance!.download.duration).toEqual(75 * 1e6)
@@ -175,9 +190,9 @@ describe('rum session', () => {
     server.requests = []
 
     stubBuilder.fakeEntry(FAKE_RESOURCE as PerformanceEntry, 'resource')
-    lifeCycle.notify(LifeCycleEventType.error, FAKE_ERROR as ErrorMessage)
-    lifeCycle.notify(LifeCycleEventType.request, FAKE_REQUEST as RequestDetails)
-    lifeCycle.notify(LifeCycleEventType.userAction, FAKE_USER_ACTION)
+    lifeCycle.notify(LifeCycleEventType.ERROR_COLLECTED, FAKE_ERROR as ErrorMessage)
+    lifeCycle.notify(LifeCycleEventType.REQUEST_COLLECTED, FAKE_REQUEST as RequestDetails)
+    lifeCycle.notify(LifeCycleEventType.USER_ACTION_COLLECTED, FAKE_USER_ACTION)
 
     expect(server.requests.length).toEqual(4)
   })
@@ -194,10 +209,10 @@ describe('rum session', () => {
     server.requests = []
 
     stubBuilder.fakeEntry(FAKE_RESOURCE as PerformanceEntry, 'resource')
-    lifeCycle.notify(LifeCycleEventType.request, FAKE_REQUEST as RequestDetails)
+    lifeCycle.notify(LifeCycleEventType.REQUEST_COLLECTED, FAKE_REQUEST as RequestDetails)
     expect(server.requests.length).toEqual(0)
 
-    lifeCycle.notify(LifeCycleEventType.error, FAKE_ERROR as ErrorMessage)
+    lifeCycle.notify(LifeCycleEventType.ERROR_COLLECTED, FAKE_ERROR as ErrorMessage)
     expect(server.requests.length).toEqual(1)
   })
 
@@ -213,9 +228,9 @@ describe('rum session', () => {
     server.requests = []
 
     stubBuilder.fakeEntry(FAKE_RESOURCE as PerformanceEntry, 'resource')
-    lifeCycle.notify(LifeCycleEventType.request, FAKE_REQUEST as RequestDetails)
-    lifeCycle.notify(LifeCycleEventType.error, FAKE_ERROR as ErrorMessage)
-    lifeCycle.notify(LifeCycleEventType.userAction, FAKE_USER_ACTION)
+    lifeCycle.notify(LifeCycleEventType.REQUEST_COLLECTED, FAKE_REQUEST as RequestDetails)
+    lifeCycle.notify(LifeCycleEventType.ERROR_COLLECTED, FAKE_ERROR as ErrorMessage)
+    lifeCycle.notify(LifeCycleEventType.USER_ACTION_COLLECTED, FAKE_USER_ACTION)
 
     expect(server.requests.length).toEqual(0)
   })
@@ -256,15 +271,15 @@ describe('rum session', () => {
     startPerformanceCollection(lifeCycle, session)
     server.requests = []
 
-    lifeCycle.notify(LifeCycleEventType.request, FAKE_REQUEST as RequestDetails)
+    lifeCycle.notify(LifeCycleEventType.REQUEST_COLLECTED, FAKE_REQUEST as RequestDetails)
     expect(server.requests.length).toEqual(1)
 
     isTrackedWithResource = false
-    lifeCycle.notify(LifeCycleEventType.request, FAKE_REQUEST as RequestDetails)
+    lifeCycle.notify(LifeCycleEventType.REQUEST_COLLECTED, FAKE_REQUEST as RequestDetails)
     expect(server.requests.length).toEqual(1)
 
     isTrackedWithResource = true
-    lifeCycle.notify(LifeCycleEventType.request, FAKE_REQUEST as RequestDetails)
+    lifeCycle.notify(LifeCycleEventType.REQUEST_COLLECTED, FAKE_REQUEST as RequestDetails)
     expect(server.requests.length).toEqual(2)
   })
 })
@@ -325,16 +340,16 @@ describe('rum global context', () => {
 
   it('should be added to the request', () => {
     RUM.setRumGlobalContext({ bar: 'foo' })
-    lifeCycle.notify(LifeCycleEventType.error, FAKE_ERROR as ErrorMessage)
+    lifeCycle.notify(LifeCycleEventType.ERROR_COLLECTED, FAKE_ERROR as ErrorMessage)
 
     expect((getRumMessage(server, 0) as any).bar).toEqual('foo')
   })
 
   it('should be updatable', () => {
     RUM.setRumGlobalContext({ bar: 'foo' })
-    lifeCycle.notify(LifeCycleEventType.error, FAKE_ERROR as ErrorMessage)
+    lifeCycle.notify(LifeCycleEventType.ERROR_COLLECTED, FAKE_ERROR as ErrorMessage)
     RUM.setRumGlobalContext({ foo: 'bar' })
-    lifeCycle.notify(LifeCycleEventType.error, FAKE_ERROR as ErrorMessage)
+    lifeCycle.notify(LifeCycleEventType.ERROR_COLLECTED, FAKE_ERROR as ErrorMessage)
 
     expect((getRumMessage(server, 0) as any).bar).toEqual('foo')
     expect((getRumMessage(server, 1) as any).foo).toEqual('bar')
@@ -343,7 +358,7 @@ describe('rum global context', () => {
 
   it('should not be automatically snake cased', () => {
     RUM.setRumGlobalContext({ fooBar: 'foo' })
-    lifeCycle.notify(LifeCycleEventType.error, FAKE_ERROR as ErrorMessage)
+    lifeCycle.notify(LifeCycleEventType.ERROR_COLLECTED, FAKE_ERROR as ErrorMessage)
 
     expect((getRumMessage(server, 0) as any).fooBar).toEqual('foo')
   })
@@ -367,7 +382,7 @@ describe('rum user action', () => {
   })
 
   it('should not be automatically snake cased', () => {
-    lifeCycle.notify(LifeCycleEventType.userAction, { name: 'hello', context: { fooBar: 'foo' } })
+    lifeCycle.notify(LifeCycleEventType.USER_ACTION_COLLECTED, { name: 'hello', context: { fooBar: 'foo' } })
 
     expect((getRumMessage(server, 0) as any).fooBar).toEqual('foo')
   })

packages/rum/test/rumSession.spec.ts

@@ -34,7 +34,7 @@ describe('rum session', () => {
     jasmine.clock().mockDate(new Date())
     renewSessionSpy = jasmine.createSpy('renewSessionSpy')
     lifeCycle = new LifeCycle()
-    lifeCycle.subscribe(LifeCycleEventType.renewSession, renewSessionSpy)
+    lifeCycle.subscribe(LifeCycleEventType.SESSION_RENEWED, renewSessionSpy)
   })
 
   afterEach(() => {