Change view logic to emit LifeCycle events

packages/core/src/transport.ts

@@ -1,7 +1,7 @@
 import lodashMerge from 'lodash.merge'
 
 import { monitor } from './internalMonitoring'
-import { Context, DOM_EVENT, jsonStringify, objectValues } from './utils'
+import { Context, DOM_EVENT, jsonStringify, noop, objectValues } from './utils'
 
 /**
  * Use POST request without content type to:
@@ -45,7 +45,8 @@ export class Batch<T> {
     private bytesLimit: number,
     private maxMessageSize: number,
     private flushTimeout: number,
-    private contextProvider: () => Context
+    private contextProvider: () => Context,
+    private willUnloadCallback: () => void = noop
   ) {
     this.flushOnVisibilityHidden()
     this.flushPeriodically()
@@ -160,12 +161,7 @@ export class Batch<T> {
        * register first to be sure to be called before flush on beforeunload
        * caveat: unload can still be canceled by another listener
        */
-      window.addEventListener(
-        DOM_EVENT.BEFORE_UNLOAD,
-        monitor(() => {
-          this.beforeFlushOnUnloadHandlers.forEach((handler) => handler())
-        })
-      )
+      window.addEventListener(DOM_EVENT.BEFORE_UNLOAD, monitor(this.willUnloadCallback))
 
       /**
        * Only event that guarantee to fire on mobile devices when the page transitions to background state

packages/rum/src/lifeCycle.ts

@@ -7,9 +7,11 @@ export enum LifeCycleEventType {
   USER_ACTION_COLLECTED,
   REQUEST_STARTED,
   REQUEST_COMPLETED,
+  SESSION_WILL_RENEW,
   SESSION_RENEWED,
   RESOURCE_ADDED_TO_BATCH,
   DOM_MUTATED,
+  WILL_UNLOAD,
 }
 
 export interface Subscription {
@@ -26,9 +28,11 @@ export class LifeCycle {
   notify(eventType: LifeCycleEventType.USER_ACTION_COLLECTED, data: UserAction): void
   notify(
     eventType:
+      | LifeCycleEventType.SESSION_WILL_RENEW
       | LifeCycleEventType.SESSION_RENEWED
       | LifeCycleEventType.RESOURCE_ADDED_TO_BATCH
       | LifeCycleEventType.DOM_MUTATED
+      | LifeCycleEventType.WILL_UNLOAD
   ): void
   notify(eventType: LifeCycleEventType, data?: any) {
     const eventCallbacks = this.callbacks[eventType]
@@ -50,9 +54,11 @@ export class LifeCycle {
   subscribe(eventType: LifeCycleEventType.USER_ACTION_COLLECTED, callback: (data: UserAction) => void): Subscription
   subscribe(
     eventType:
+      | LifeCycleEventType.SESSION_WILL_RENEW
       | LifeCycleEventType.SESSION_RENEWED
       | LifeCycleEventType.RESOURCE_ADDED_TO_BATCH
-      | LifeCycleEventType.DOM_MUTATED,
+      | LifeCycleEventType.DOM_MUTATED
+      | LifeCycleEventType.WILL_UNLOAD,
     callback: () => void
   ): Subscription
   subscribe(eventType: LifeCycleEventType, callback: (data?: any) => void) {

packages/rum/src/rum.ts

@@ -32,7 +32,7 @@ import {
 import { InternalContext, RumGlobal } from './rum.entry'
 import { RumSession } from './rumSession'
 import { getUserActionReference, UserActionMeasures, UserActionReference, UserActionType } from './userActionCollection'
-import { trackView, viewContext, ViewMeasures } from './viewTracker'
+import { trackView, viewContext, ViewMeasures } from './viewCollection'
 
 export interface PerformancePaintTiming extends PerformanceEntry {
   entryType: 'paint'
@@ -155,7 +155,7 @@ export function startRum(
     lodashMerge(
       {
         application_id: applicationId,
-        session_id: viewContext.sessionId,
+        session_id: session.getId(),
         view: {
           id: viewContext.id,
         },
@@ -175,17 +175,18 @@ export function startRum(
       session: {
         type: sessionTpe,
       },
-      sessionId: viewContext.sessionId,
+      sessionId: session.getId(),
       view: {
         id: viewContext.id,
         referrer: document.referrer,
         url: viewContext.location.href,
       },
     }),
-    () => globalContext
+    () => globalContext,
+    () => lifeCycle.notify(LifeCycleEventType.WILL_UNLOAD)
   )
 
-  trackView(window.location, lifeCycle, session, batch.upsertRumEvent, batch.beforeFlushOnUnload)
+  trackView(window.location, lifeCycle, batch.upsertRumEvent)
   trackErrors(lifeCycle, batch.addRumEvent)
   trackRequests(configuration, lifeCycle, session, batch.addRumEvent)
   trackPerformanceTiming(configuration, lifeCycle, batch.addRumEvent)
@@ -203,7 +204,7 @@ export function startRum(
       (): InternalContext => {
         return {
           application_id: applicationId,
-          session_id: viewContext.sessionId,
+          session_id: session.getId(),
           user_action: getUserActionReference(),
           view: {
             id: viewContext.id,
@@ -221,23 +222,24 @@ function startRumBatch(
   configuration: Configuration,
   session: RumSession,
   rumContextProvider: () => Context,
-  globalContextProvider: () => Context
+  globalContextProvider: () => Context,
+  willUnloadCallback: () => void
 ) {
   const batch = new Batch<Context>(
     new HttpRequest(configuration.rumEndpoint, configuration.batchBytesLimit, true),
     configuration.maxBatchSize,
     configuration.batchBytesLimit,
     configuration.maxMessageSize,
     configuration.flushTimeout,
-    () => lodashMerge(withSnakeCaseKeys(rumContextProvider()), globalContextProvider())
+    () => lodashMerge(withSnakeCaseKeys(rumContextProvider()), globalContextProvider()),
+    willUnloadCallback
   )
   return {
     addRumEvent: (event: RumEvent, context?: Context) => {
       if (session.isTracked()) {
         batch.add({ ...context, ...withSnakeCaseKeys((event as unknown) as Context) })
       }
     },
-    beforeFlushOnUnload: (handler: () => void) => batch.beforeFlushOnUnload(handler),
     upsertRumEvent: (event: RumEvent, key: string) => {
       if (session.isTracked()) {
         batch.upsert(withSnakeCaseKeys((event as unknown) as Context), key)

packages/rum/src/rumSession.ts

@@ -15,19 +15,53 @@ export enum RumSessionType {
   TRACKED_WITHOUT_RESOURCES = '2',
 }
 
+class StoredSession {
+  private id: string | undefined
+  private type: RumSessionType | undefined
+
+  constructor(private isAlive: () => boolean) {}
+
+  store(id: string | undefined, type: RumSessionType | undefined) {
+    this.id = id
+    this.type = type
+  }
+
+  getId() {
+    this.makeSureSessionIsAlive()
+    return this.id
+  }
+
+  isTracked() {
+    this.makeSureSessionIsAlive()
+    return isTracked(this.type)
+  }
+
+  isTrackedWithResource() {
+    this.makeSureSessionIsAlive()
+    return this.type === RumSessionType.TRACKED_WITH_RESOURCES
+  }
+
+  private makeSureSessionIsAlive() {
+    if (!this.isAlive()) {
+      this.id = undefined
+      this.type = undefined
+    }
+  }
+}
+
 export function startRumSession(configuration: Configuration, lifeCycle: LifeCycle): RumSession {
   const session = startSessionManagement(RUM_SESSION_KEY, (rawType) => computeSessionState(configuration, rawType))
+  const storedSession = new StoredSession(() => session.getId() !== undefined)
+
+  storedSession.store(session.getId(), session.getType())
 
   session.renewObservable.subscribe(() => {
+    lifeCycle.notify(LifeCycleEventType.SESSION_WILL_RENEW)
+    storedSession.store(session.getId(), session.getType())
     lifeCycle.notify(LifeCycleEventType.SESSION_RENEWED)
   })
 
-  return {
-    getId: session.getId,
-    isTracked: () => session.getId() !== undefined && isTracked(session.getType()),
-    isTrackedWithResource: () =>
-      session.getId() !== undefined && session.getType() === RumSessionType.TRACKED_WITH_RESOURCES,
-  }
+  return storedSession
 }
 
 function computeSessionState(configuration: Configuration, rawSessionType?: string) {

packages/rum/src/viewTracker.ts → packages/rum/src/viewCollection.ts

@@ -2,7 +2,6 @@ import { DOM_EVENT, generateUUID, getTimestamp, monitor, msToNs, throttle } from
 
 import { LifeCycle, LifeCycleEventType } from './lifeCycle'
 import { PerformancePaintTiming, RumEvent, RumEventCategory } from './rum'
-import { RumSession } from './rumSession'
 import { trackEventCounts } from './trackEventCounts'
 
 export interface ViewMeasures {
@@ -20,7 +19,6 @@ export interface ViewMeasures {
 interface ViewContext {
   id: string
   location: Location
-  sessionId: string | undefined
 }
 
 export let viewContext: ViewContext
@@ -33,9 +31,7 @@ let viewMeasures: ViewMeasures
 export function trackView(
   location: Location,
   lifeCycle: LifeCycle,
-  session: RumSession,
-  upsertRumEvent: (event: RumEvent, key: string) => void,
-  beforeFlushOnUnload: (handler: () => void) => void
+  upsertRumEvent: (event: RumEvent, key: string) => void
 ) {
   const scheduleViewUpdate = throttle(monitor(() => updateView(upsertRumEvent)), THROTTLE_VIEW_UPDATE_PERIOD, {
     leading: false,
@@ -45,25 +41,23 @@ export function trackView(
     viewMeasures = { ...viewMeasures, ...eventCounts }
     scheduleViewUpdate()
   })
-  newView(location, session, resetEventCounts, upsertRumEvent)
-  trackHistory(location, session, resetEventCounts, upsertRumEvent)
+  newView(location, resetEventCounts, upsertRumEvent)
+  trackHistory(location, resetEventCounts, upsertRumEvent)
   trackTimings(lifeCycle, scheduleViewUpdate)
-  trackRenewSession(location, lifeCycle, session, resetEventCounts, upsertRumEvent)
+  trackRenewSession(location, lifeCycle, resetEventCounts, upsertRumEvent)
 
-  beforeFlushOnUnload(() => updateView(upsertRumEvent))
+  lifeCycle.subscribe(LifeCycleEventType.WILL_UNLOAD, () => updateView(upsertRumEvent))
 }
 
 function newView(
   location: Location,
-  session: RumSession,
   resetEventCounts: () => void,
   upsertRumEvent: (event: RumEvent, key: string) => void
 ) {
   startOrigin = !viewContext ? 0 : performance.now()
   viewContext = {
     id: generateUUID(),
     location: { ...location },
-    sessionId: session.getId(),
   }
   documentVersion = 1
   viewMeasures = {
@@ -102,37 +96,35 @@ function upsertViewEvent(upsertRumEvent: (event: RumEvent, key: string) => void)
 
 function trackHistory(
   location: Location,
-  session: RumSession,
   resetEventCounts: () => void,
   upsertRumEvent: (event: RumEvent, key: string) => void
 ) {
   const originalPushState = history.pushState
   history.pushState = monitor(function(this: History['pushState']) {
     originalPushState.apply(this, arguments as any)
-    onUrlChange(location, session, resetEventCounts, upsertRumEvent)
+    onUrlChange(location, resetEventCounts, upsertRumEvent)
   })
   const originalReplaceState = history.replaceState
   history.replaceState = monitor(function(this: History['replaceState']) {
     originalReplaceState.apply(this, arguments as any)
-    onUrlChange(location, session, resetEventCounts, upsertRumEvent)
+    onUrlChange(location, resetEventCounts, upsertRumEvent)
   })
   window.addEventListener(
     DOM_EVENT.POP_STATE,
     monitor(() => {
-      onUrlChange(location, session, resetEventCounts, upsertRumEvent)
+      onUrlChange(location, resetEventCounts, upsertRumEvent)
     })
   )
 }
 
 function onUrlChange(
   location: Location,
-  session: RumSession,
   resetEventCounts: () => void,
   upsertRumEvent: (event: RumEvent, key: string) => void
 ) {
   if (areDifferentViews(viewContext.location, location)) {
     updateView(upsertRumEvent)
-    newView(location, session, resetEventCounts, upsertRumEvent)
+    newView(location, resetEventCounts, upsertRumEvent)
   }
 }
 
@@ -166,12 +158,14 @@ function trackTimings(lifeCycle: LifeCycle, scheduleViewUpdate: () => void) {
 function trackRenewSession(
   location: Location,
   lifeCycle: LifeCycle,
-  session: RumSession,
   resetEventCounts: () => void,
   upsertRumEvent: (event: RumEvent, key: string) => void
 ) {
-  lifeCycle.subscribe(LifeCycleEventType.SESSION_RENEWED, () => {
+  lifeCycle.subscribe(LifeCycleEventType.SESSION_WILL_RENEW, () => {
     updateView(upsertRumEvent)
-    newView(location, session, resetEventCounts, upsertRumEvent)
+  })
+
+  lifeCycle.subscribe(LifeCycleEventType.SESSION_RENEWED, () => {
+    newView(location, resetEventCounts, upsertRumEvent)
   })
 }

packages/rum/test/rum.spec.ts

@@ -381,6 +381,7 @@ describe('rum session', () => {
     expect(initialRequests[0].session_id).toEqual('42')
 
     server.requests = []
+    lifeCycle.notify(LifeCycleEventType.SESSION_WILL_RENEW)
     sessionId = '43'
     lifeCycle.notify(LifeCycleEventType.SESSION_RENEWED)
 

packages/rum/test/rumSession.spec.ts

@@ -95,19 +95,62 @@ describe('rum session', () => {
     expect(getCookie(SESSION_COOKIE_NAME)).toContain(`${RUM_SESSION_KEY}=${RumSessionType.NOT_TRACKED}`)
   })
 
-  it('should renew on activity after expiration', () => {
-    startRumSession(configuration as Configuration, lifeCycle)
-
+  function renewSession() {
     setCookie(SESSION_COOKIE_NAME, '', DURATION)
     expect(getCookie(SESSION_COOKIE_NAME)).toBeUndefined()
-    expect(renewSessionSpy).not.toHaveBeenCalled()
     jasmine.clock().tick(COOKIE_ACCESS_DELAY)
 
     setupDraws({ tracked: true, trackedWithResources: true })
     document.dispatchEvent(new CustomEvent('click'))
+  }
+
+  it('should renew on activity after expiration', () => {
+    startRumSession(configuration as Configuration, lifeCycle)
+
+    expect(renewSessionSpy).not.toHaveBeenCalled()
+
+    renewSession()
 
     expect(renewSessionSpy).toHaveBeenCalled()
     expect(getCookie(SESSION_COOKIE_NAME)).toContain(`${RUM_SESSION_KEY}=${RumSessionType.TRACKED_WITH_RESOURCES}`)
     expect(getCookie(SESSION_COOKIE_NAME)).toMatch(/id=[a-f0-9-]/)
   })
+
+  it('should return undefined values when the session is expired', () => {
+    setCookie(SESSION_COOKIE_NAME, 'id=abcdef&rum=1', DURATION)
+
+    const session = startRumSession(configuration as Configuration, lifeCycle)
+
+    setCookie(SESSION_COOKIE_NAME, '', DURATION)
+    jasmine.clock().tick(COOKIE_ACCESS_DELAY)
+
+    expect(session.getId()).toBe(undefined)
+    expect(session.isTracked()).toBe(false)
+    expect(session.isTrackedWithResource()).toBe(false)
+  })
+
+  it('should return the ending session id when notifying the WILL_RENEW life-cycle', () => {
+    setCookie(SESSION_COOKIE_NAME, 'id=abcdef&rum=1', DURATION)
+
+    const session = startRumSession(configuration as Configuration, lifeCycle)
+    const idBeforeRenew = session.getId()
+    let idDuringWillRenewEvent
+    let idDuringRenewedEvent
+
+    lifeCycle.subscribe(LifeCycleEventType.SESSION_WILL_RENEW, () => {
+      idDuringWillRenewEvent = session.getId()
+    })
+
+    lifeCycle.subscribe(LifeCycleEventType.SESSION_RENEWED, () => {
+      idDuringRenewedEvent = session.getId()
+    })
+
+    renewSession()
+
+    expect(idBeforeRenew).toEqual(jasmine.any(String))
+    expect(idDuringWillRenewEvent).toEqual(jasmine.any(String))
+    expect(idDuringRenewedEvent).toEqual(jasmine.any(String))
+    expect(idBeforeRenew).toBe(idDuringWillRenewEvent)
+    expect(idBeforeRenew).not.toBe(idDuringRenewedEvent)
+  })
 })