Merge pull request #12 from flashcatcloud/feat/replay-resnapshot-on-reactivation

fix(replay): re-snapshot on window/tab re-activation

Author: Fiona2016

packages/core/src/browser/pageActivationObservable.spec.ts

@@ -0,0 +1,72 @@
+import type { Configuration } from '../domain/configuration'
+import type { Clock } from '../../test'
+import { createNewEvent, setPageVisibility, restorePageVisibility, registerCleanupTask, mockClock } from '../../test'
+import { createPageActivationObservable, REACTIVATE_DEBOUNCE } from './pageActivationObservable'
+
+describe('createPageActivationObservable', () => {
+  let onActivateSpy: jasmine.Spy<() => void>
+  let configuration: Configuration
+  let clock: Clock
+
+  beforeEach(() => {
+    onActivateSpy = jasmine.createSpy()
+    configuration = {} as Configuration
+    clock = mockClock()
+    registerCleanupTask(createPageActivationObservable(configuration).subscribe(onActivateSpy).unsubscribe)
+    registerCleanupTask(() => {
+      restorePageVisibility()
+      clock.cleanup()
+    })
+  })
+
+  it('notifies on focus after a blur', () => {
+    window.dispatchEvent(createNewEvent('blur'))
+    window.dispatchEvent(createNewEvent('focus'))
+
+    expect(onActivateSpy).toHaveBeenCalledTimes(1)
+  })
+
+  it('does NOT notify on focus without a prior blur or hide', () => {
+    window.dispatchEvent(createNewEvent('focus'))
+
+    expect(onActivateSpy).not.toHaveBeenCalled()
+  })
+
+  it('notifies on visibilitychange visible after becoming hidden', () => {
+    emulatePageVisibilityChange('hidden')
+    emulatePageVisibilityChange('visible')
+
+    expect(onActivateSpy).toHaveBeenCalledTimes(1)
+  })
+
+  it('notifies on pageshow after being inactive', () => {
+    window.dispatchEvent(createNewEvent('blur'))
+    window.dispatchEvent(createNewEvent('pageshow'))
+
+    expect(onActivateSpy).toHaveBeenCalledTimes(1)
+  })
+
+  it('debounces two reactivations within the debounce window to one', () => {
+    window.dispatchEvent(createNewEvent('blur'))
+    window.dispatchEvent(createNewEvent('focus'))
+    window.dispatchEvent(createNewEvent('blur'))
+    window.dispatchEvent(createNewEvent('focus'))
+
+    expect(onActivateSpy).toHaveBeenCalledTimes(1)
+  })
+
+  it('notifies twice for two genuine cycles spaced beyond the debounce window', () => {
+    window.dispatchEvent(createNewEvent('blur'))
+    window.dispatchEvent(createNewEvent('focus'))
+    clock.tick(REACTIVATE_DEBOUNCE + 1)
+    window.dispatchEvent(createNewEvent('blur'))
+    window.dispatchEvent(createNewEvent('focus'))
+
+    expect(onActivateSpy).toHaveBeenCalledTimes(2)
+  })
+
+  function emulatePageVisibilityChange(visibility: 'visible' | 'hidden') {
+    setPageVisibility(visibility)
+    document.dispatchEvent(createNewEvent('visibilitychange'))
+  }
+})

packages/core/src/browser/pageActivationObservable.ts

@@ -0,0 +1,58 @@
+import { Observable } from '../tools/observable'
+import type { Configuration } from '../domain/configuration'
+import { ONE_SECOND, timeStampNow } from '../tools/utils/timeUtils'
+import { addEventListeners, DOM_EVENT } from './addEventListener'
+
+export const REACTIVATE_DEBOUNCE = ONE_SECOND
+
+/**
+ * Emits when the page transitions from an inactive (blurred / hidden) state back to active.
+ *
+ * Uses focus/blur as the primary signal because it is the only one that fires for Electron
+ * multi-window switching, where document.visibilityState stays 'visible'. visibilitychange and
+ * pageshow are added so browser-tab switches and bfcache restores are covered too. An `isInactive`
+ * gate ensures only a genuine leave -> return cycle notifies (not the initial focus or an in-page
+ * refocus), and a short debounce absorbs focus flicker / programmatic focus theft.
+ */
+export function createPageActivationObservable(configuration: Configuration): Observable<void> {
+  return new Observable<void>((observable) => {
+    let isInactive = false
+    let lastActivationTimestamp = 0
+
+    const notifyActivation = () => {
+      if (!isInactive) {
+        return
+      }
+      isInactive = false
+      const now = timeStampNow()
+      if (now - lastActivationTimestamp < REACTIVATE_DEBOUNCE) {
+        return
+      }
+      lastActivationTimestamp = now
+      observable.notify()
+    }
+
+    const { stop } = addEventListeners(
+      configuration,
+      window,
+      [DOM_EVENT.BLUR, DOM_EVENT.FOCUS, DOM_EVENT.VISIBILITY_CHANGE, DOM_EVENT.PAGE_SHOW],
+      (event) => {
+        if (event.type === DOM_EVENT.BLUR) {
+          isInactive = true
+        } else if (event.type === DOM_EVENT.VISIBILITY_CHANGE) {
+          if (document.visibilityState === 'hidden') {
+            isInactive = true
+          } else {
+            notifyActivation()
+          }
+        } else {
+          // focus or pageshow
+          notifyActivation()
+        }
+      },
+      { capture: true }
+    )
+
+    return stop
+  })
+}

packages/core/src/index.ts

@@ -112,6 +112,7 @@ export type { FetchResolveContext, FetchStartContext, FetchContext } from './bro
 export { initFetchObservable, resetFetchObservable } from './browser/fetchObservable'
 export type { PageMayExitEvent } from './browser/pageMayExitObservable'
 export { createPageMayExitObservable, PageExitReason, isPageExitReason } from './browser/pageMayExitObservable'
+export { createPageActivationObservable } from './browser/pageActivationObservable'
 export * from './browser/addEventListener'
 export { requestIdleCallback } from './tools/requestIdleCallback'
 export * from './tools/taskQueue'

packages/rum-core/src/boot/startRum.ts

@@ -9,6 +9,7 @@ import type {
 import {
   sendToExtension,
   createPageMayExitObservable,
+  createPageActivationObservable,
   TelemetryService,
   startTelemetry,
   canUseEventBridge,
@@ -106,6 +107,12 @@ export function startRum(
   })
   cleanupTasks.push(() => pageMayExitSubscription.unsubscribe())
 
+  const pageActivationObservable = createPageActivationObservable(configuration)
+  const pageActivationSubscription = pageActivationObservable.subscribe(() => {
+    lifeCycle.notify(LifeCycleEventType.PAGE_REACTIVATED)
+  })
+  cleanupTasks.push(() => pageActivationSubscription.unsubscribe())
+
   const session = !canUseEventBridge()
     ? startRumSessionManager(configuration, lifeCycle, trackingConsentState)
     : startRumSessionManagerStub()

packages/rum-core/src/domain/lifeCycle.ts

@@ -33,6 +33,7 @@ export const enum LifeCycleEventType {
   SESSION_EXPIRED,
   SESSION_RENEWED,
   PAGE_MAY_EXIT,
+  PAGE_REACTIVATED,
   RAW_RUM_EVENT_COLLECTED,
   RUM_EVENT_COLLECTED,
   RAW_ERROR_COLLECTED,
@@ -64,6 +65,7 @@ declare const LifeCycleEventTypeAsConst: {
   SESSION_EXPIRED: LifeCycleEventType.SESSION_EXPIRED
   SESSION_RENEWED: LifeCycleEventType.SESSION_RENEWED
   PAGE_MAY_EXIT: LifeCycleEventType.PAGE_MAY_EXIT
+  PAGE_REACTIVATED: LifeCycleEventType.PAGE_REACTIVATED
   RAW_RUM_EVENT_COLLECTED: LifeCycleEventType.RAW_RUM_EVENT_COLLECTED
   RUM_EVENT_COLLECTED: LifeCycleEventType.RUM_EVENT_COLLECTED
   RAW_ERROR_COLLECTED: LifeCycleEventType.RAW_ERROR_COLLECTED
@@ -84,6 +86,7 @@ export interface LifeCycleEventMap {
   [LifeCycleEventTypeAsConst.SESSION_EXPIRED]: void
   [LifeCycleEventTypeAsConst.SESSION_RENEWED]: void
   [LifeCycleEventTypeAsConst.PAGE_MAY_EXIT]: PageMayExitEvent
+  [LifeCycleEventTypeAsConst.PAGE_REACTIVATED]: void
   [LifeCycleEventTypeAsConst.RAW_RUM_EVENT_COLLECTED]: RawRumEventCollectedData
   [LifeCycleEventTypeAsConst.RUM_EVENT_COLLECTED]: RumEvent & Context
   [LifeCycleEventTypeAsConst.RAW_ERROR_COLLECTED]: {

packages/rum/src/domain/record/startFullSnapshots.spec.ts

@@ -37,6 +37,14 @@ describe('startFullSnapshots', () => {
     expect(fullSnapshotCallback).toHaveBeenCalledTimes(2)
   })
 
+  it('takes a full snapshot when the page is re-activated', () => {
+    lifeCycle.notify(LifeCycleEventType.PAGE_REACTIVATED)
+
+    expect(fullSnapshotCallback).toHaveBeenCalledTimes(2) // 1 on init + 1 on re-activation
+    const records = fullSnapshotCallback.calls.mostRecent().args[0]
+    expect(records.some((record) => record.type === RecordType.FullSnapshot)).toBe(true)
+  })
+
   it('full snapshot related records should have the view change date', () => {
     lifeCycle.notify(LifeCycleEventType.VIEW_CREATED, {
       startClocks: viewStartClock,

packages/rum/src/domain/record/startFullSnapshots.ts

@@ -67,7 +67,7 @@ export function startFullSnapshots(
 
   fullSnapshotCallback(takeFullSnapshot())
 
-  const { unsubscribe } = lifeCycle.subscribe(LifeCycleEventType.VIEW_CREATED, (view) => {
+  const { unsubscribe: unsubscribeViewCreated } = lifeCycle.subscribe(LifeCycleEventType.VIEW_CREATED, (view) => {
     flushMutations()
     fullSnapshotCallback(
       takeFullSnapshot(view.startClocks.timeStamp, {
@@ -78,7 +78,24 @@ export function startFullSnapshots(
     )
   })
 
+  // When the page is re-activated (window/tab switched back to), take a fresh full snapshot so the
+  // new segment has its own baseline instead of inheriting another window/tab's snapshot. The
+  // segment is flushed first by segmentCollection, which subscribes to PAGE_REACTIVATED earlier.
+  const { unsubscribe: unsubscribeReactivated } = lifeCycle.subscribe(LifeCycleEventType.PAGE_REACTIVATED, () => {
+    flushMutations()
+    fullSnapshotCallback(
+      takeFullSnapshot(timeStampNow(), {
+        shadowRootsController,
+        status: SerializationContextStatus.SUBSEQUENT_FULL_SNAPSHOT,
+        elementsScrollPositions,
+      })
+    )
+  })
+
   return {
-    stop: unsubscribe,
+    stop: () => {
+      unsubscribeViewCreated()
+      unsubscribeReactivated()
+    },
   }
 }

packages/rum/src/domain/segmentCollection/segmentCollection.spec.ts

@@ -186,6 +186,23 @@ describe('startSegmentCollection', () => {
       })
     })
 
+    describe('flush when the page is re-activated', () => {
+      function emulateReactivation() {
+        lifeCycle.notify(LifeCycleEventType.PAGE_REACTIVATED)
+      }
+
+      it('uses `httpRequest.send` when sending the segment', () => {
+        addRecordAndFlushSegment(emulateReactivation)
+        expect(httpRequestSpy.send).toHaveBeenCalled()
+      })
+
+      it('next segment is created because of re-activation', async () => {
+        addRecordAndFlushSegment(emulateReactivation)
+        addRecordAndFlushSegment()
+        expect((await readMostRecentMetadata(httpRequestSpy.sendOnExit)).creation_reason).toBe('view_change')
+      })
+    })
+
     describe('flush when reaching a bytes limit', () => {
       it('uses `httpRequest.send` when sending the segment', () => {
         addRecordAndFlushSegment(() => {

packages/rum/src/domain/segmentCollection/segmentCollection.ts

@@ -96,6 +96,13 @@ export function doStartSegmentCollection(
     }
   )
 
+  // When the page is re-activated (window/tab switched back to), flush the current segment so the
+  // next one starts fresh with the full snapshot taken by startFullSnapshots on the same event.
+  // Reuses the 'view_change' creation reason to avoid a schema change.
+  const { unsubscribe: unsubscribeReactivated } = lifeCycle.subscribe(LifeCycleEventType.PAGE_REACTIVATED, () => {
+    flushSegment('view_change')
+  })
+
   function flushSegment(flushReason: FlushReason) {
     if (state.status === SegmentCollectionStatus.SegmentPending) {
       state.segment.flush((metadata, encoderResult) => {
@@ -154,6 +161,7 @@ export function doStartSegmentCollection(
       flushSegment('stop')
       unsubscribeViewCreated()
       unsubscribePageMayExit()
+      unsubscribeReactivated()
     },
   }
 }