✨[RUM] add view resource count

packages/rum/src/lifeCycle.ts

@@ -7,6 +7,7 @@ export enum LifeCycleEventType {
   userAction,
   request,
   renewSession,
+  rumResource,
 }
 
 export class LifeCycle {
@@ -16,7 +17,7 @@ export class LifeCycle {
   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.renewSession | LifeCycleEventType.rumResource): void
   notify(eventType: LifeCycleEventType, data?: any) {
     const eventCallbacks = this.callbacks[eventType]
     if (eventCallbacks) {
@@ -28,7 +29,7 @@ export class LifeCycle {
   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.renewSession | LifeCycleEventType.rumResource, callback: () => void): void
   subscribe(eventType: LifeCycleEventType, callback: (data?: any) => void) {
     const eventCallbacks = this.callbacks[eventType]
     if (eventCallbacks) {

packages/rum/src/rum.ts

@@ -276,6 +276,7 @@ export function trackRequests(
       },
       traceId: requestDetails.traceId,
     })
+    lifeCycle.notify(LifeCycleEventType.rumResource)
   })
 }
 
@@ -287,7 +288,7 @@ function trackPerformanceTiming(
   lifeCycle.subscribe(LifeCycleEventType.performance, (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.rumResource)
 }
 
 export function handleLongTaskEntry(entry: PerformanceLongTaskTiming, addRumEvent: (event: RumEvent) => void) {

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 }
@@ -138,6 +140,10 @@ function trackMeasures(lifeCycle: LifeCycle, scheduleViewUpdate: () => void) {
       scheduleViewUpdate()
     }
   })
+  lifeCycle.subscribe(LifeCycleEventType.rumResource, () => {
+    viewMeasures.resourceCount += 1
+    scheduleViewUpdate()
+  })
 }
 
 function trackRenewSession(location: Location, lifeCycle: LifeCycle, addRumEvent: (event: RumEvent) => void) {

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)

packages/rum/test/viewTracker.spec.ts

@@ -132,6 +132,21 @@ describe('rum view measures', () => {
     expect(getViewEvent(2).view.measures.longTaskCount).toEqual(0)
   })
 
+  it('should track resource count', () => {
+    const lifeCycle = new LifeCycle()
+    setup({ addRumEvent, lifeCycle })
+
+    expect(getEventCount()).toEqual(1)
+    expect(getViewEvent(0).view.measures.resourceCount).toEqual(0)
+
+    lifeCycle.notify(LifeCycleEventType.rumResource)
+    history.pushState({}, '', '/bar')
+
+    expect(getEventCount()).toEqual(3)
+    expect(getViewEvent(1).view.measures.resourceCount).toEqual(1)
+    expect(getViewEvent(2).view.measures.resourceCount).toEqual(0)
+  })
+
   it('should track user action count', () => {
     const lifeCycle = new LifeCycle()
     setup({ addRumEvent, lifeCycle })
@@ -155,6 +170,7 @@ describe('rum view measures', () => {
     expect(getViewEvent(0).view.measures).toEqual({
       errorCount: 0,
       longTaskCount: 0,
+      resourceCount: 0,
       userActionCount: 0,
     })
 
@@ -171,11 +187,13 @@ describe('rum view measures', () => {
       firstContentfulPaint: 123e6,
       loadEventEnd: 567e6,
       longTaskCount: 0,
+      resourceCount: 0,
       userActionCount: 0,
     })
     expect(getViewEvent(2).view.measures).toEqual({
       errorCount: 0,
       longTaskCount: 0,
+      resourceCount: 0,
       userActionCount: 0,
     })
   })