✨ Add isActive attribute to view events

DataDog · Dec 14, 2020 · 35580e3 · 35580e3
1 parent 3ba6e19
commit 35580e3
Show file tree

Hide file tree

Showing 6 changed files with 49 additions and 2 deletions.
diff --git a/packages/rum/src/domain/rumEventsCollection/view/trackViews.spec.ts b/packages/rum/src/domain/rumEventsCollection/view/trackViews.spec.ts
@@ -356,6 +356,46 @@ describe('rum track loading type', () => {
   })
 })
 
+describe('rum track view is active', () => {
+  let setupBuilder: TestSetupBuilder
+  let handler: jasmine.Spy
+  let getViewEvent: (index: number) => View
+
+  beforeEach(() => {
+    ;({ handler, getViewEvent } = spyOnViews())
+
+    setupBuilder = setup()
+      .withFakeClock()
+      .withFakeLocation('/foo')
+      .beforeBuild(({ location, lifeCycle }) => {
+        lifeCycle.subscribe(LifeCycleEventType.VIEW_UPDATED, handler)
+        return trackViews(location, lifeCycle)
+      })
+  })
+
+  afterEach(() => {
+    setupBuilder.cleanup()
+  })
+
+  it('should collect initial view as active', () => {
+    setupBuilder.build()
+    expect(getViewEvent(0).isActive).toBe(true)
+  })
+
+  it('should collect old view as inactive and new one as active after a route change', () => {
+    setupBuilder.build()
+    history.pushState({}, '', '/bar')
+    expect(getViewEvent(1).isActive).toBe(false)
+    expect(getViewEvent(2).isActive).toBe(true)
+  })
+
+  it('should collect view as active after a search change', () => {
+    setupBuilder.build()
+    history.pushState({}, '', '/foo?bar=qux')
+    expect(getViewEvent(1).isActive).toBe(true)
+  })
+})
+
 describe('rum track loading time', () => {
   let setupBuilder: TestSetupBuilder
   let handler: jasmine.Spy

diff --git a/packages/rum/src/domain/rumEventsCollection/view/trackViews.ts b/packages/rum/src/domain/rumEventsCollection/view/trackViews.ts
@@ -15,6 +15,7 @@ export interface View {
   documentVersion: number
   startTime: number
   duration: number
+  isActive: boolean
   loadingTime?: number | undefined
   loadingType: ViewLoadingType
   cumulativeLayoutShift?: number
@@ -51,8 +52,8 @@ export function trackViews(location: Location, lifeCycle: LifeCycle) {
   function onLocationChange() {
     if (currentView.isDifferentView(location)) {
       // Renew view on location changes
-      currentView.triggerUpdate()
       currentView.end()
+      currentView.triggerUpdate()
       currentView = newView(lifeCycle, location, ViewLoadingType.ROUTE_CHANGE, currentView.url)
     } else {
       currentView.updateLocation(location)
@@ -69,8 +70,8 @@ export function trackViews(location: Location, lifeCycle: LifeCycle) {
 
   // End the current view on page unload
   lifeCycle.subscribe(LifeCycleEventType.BEFORE_UNLOAD, () => {
-    currentView.triggerUpdate()
     currentView.end()
+    currentView.triggerUpdate()
   })
 
   // Session keep alive
@@ -163,6 +164,7 @@ function newView(
       startTime,
       timings,
       duration: (endTime === undefined ? performance.now() : endTime) - startTime,
+      isActive: endTime === undefined,
     })
   }
 

diff --git a/packages/rum/src/domain/rumEventsCollection/view/viewCollection.spec.ts b/packages/rum/src/domain/rumEventsCollection/view/viewCollection.spec.ts
@@ -34,6 +34,7 @@ describe('viewCollection', () => {
         userActionCount: 10,
       },
       id: 'xxx',
+      isActive: false,
       loadingTime: 20,
       loadingType: ViewLoadingType.INITIAL_LOAD,
       location: {},
@@ -71,6 +72,7 @@ describe('viewCollection', () => {
         },
         firstContentfulPaint: 10 * 1e6,
         firstInputDelay: 12 * 1e6,
+        isActive: false,
         largestContentfulPaint: 10 * 1e6,
         loadEvent: 10 * 1e6,
         loadingTime: 20 * 1e6,

diff --git a/packages/rum/src/domain/rumEventsCollection/view/viewCollection.ts b/packages/rum/src/domain/rumEventsCollection/view/viewCollection.ts
@@ -31,6 +31,7 @@ function processViewUpdate(view: View) {
       },
       firstContentfulPaint: msToNs(view.timings.firstContentfulPaint),
       firstInputDelay: msToNs(view.timings.firstInputDelay),
+      isActive: view.isActive,
       largestContentfulPaint: msToNs(view.timings.largestContentfulPaint),
       loadEvent: msToNs(view.timings.loadEvent),
       loadingTime: msToNs(view.loadingTime),

diff --git a/packages/rum/src/types.ts b/packages/rum/src/types.ts
@@ -66,6 +66,7 @@ export interface RumViewEvent {
     loadEvent?: number
     loadingTime?: number
     timeSpent: number
+    isActive: boolean
     error: Count
     action: Count
     longTask: Count

diff --git a/packages/rum/test/fixtures.ts b/packages/rum/test/fixtures.ts
@@ -67,6 +67,7 @@ export function createRawRumEvent(type: RumEventType, overrides?: Context): RawR
           view: {
             action: { count: 0 },
             error: { count: 0 },
+            isActive: true,
             loadingType: ViewLoadingType.INITIAL_LOAD,
             longTask: { count: 0 },
             resource: { count: 0 },