Integrate romanG/bf-cache-views (#3527) into staging-20

Integrated commit sha: 707f265

Co-authored-by: RomanGaignault <[email protected]>

Author: dd-mergequeue[bot]

packages/core/src/domain/telemetry/telemetryEvent.types.ts

@@ -161,6 +161,10 @@ export type TelemetryConfigurationEvent = CommonTelemetryProperties & {
        * Whether long tasks are tracked
        */
       track_long_task?: boolean
+      /**
+       * Whether views loaded from the bfcache are tracked
+       */
+      track_bfcache_views?: boolean
       /**
        * Whether a secure cross-site session cookie is used (deprecated)
        */
@@ -257,6 +261,10 @@ export type TelemetryConfigurationEvent = CommonTelemetryProperties & {
        * Whether console.error logs, uncaught exceptions and network errors are tracked
        */
       forward_errors_to_logs?: boolean
+      /**
+       * The number of displays available to the device
+       */
+      number_of_displays?: number
       /**
        * The console.* tracked
        */
@@ -407,6 +415,10 @@ export type TelemetryConfigurationEvent = CommonTelemetryProperties & {
        * Whether the anonymous users are tracked
        */
       track_anonymous_user?: boolean
+      /**
+       * Whether a list of allowed origins is used to control SDK execution in browser extension contexts. When enabled, the SDK will check if the current origin matches the allowed origins list before running.
+       */
+      use_allowed_tracking_origins?: boolean
       [k: string]: unknown
     }
     [k: string]: unknown

packages/rum-core/src/domain/configuration/configuration.spec.ts

@@ -535,6 +535,7 @@ describe('serializeRumConfiguration', () => {
       trackViewsManually: true,
       trackResources: true,
       trackLongTasks: true,
+      trackBfcacheViews: true,
       remoteConfigurationId: '123',
       plugins: [{ name: 'foo', getConfigurationTelemetry: () => ({ bar: true }) }],
       trackFeatureFlagsForEvents: ['vital'],
@@ -578,6 +579,7 @@ describe('serializeRumConfiguration', () => {
       enable_privacy_for_action_name: false,
       track_resources: true,
       track_long_task: true,
+      track_bfcache_views: true,
       use_worker_url: true,
       compress_intake_requests: true,
       plugins: [{ name: 'foo', bar: true }],

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

@@ -122,6 +122,11 @@ export interface RumInitConfiguration extends InitConfiguration {
    * Allows you to control RUM views creation. See [Override default RUM view names](https://docs.datadoghq.com/real_user_monitoring/browser/advanced_configuration/?tab=npm#override-default-rum-view-names) for further information.
    */
   trackViewsManually?: boolean | undefined
+  /**
+   * Enable the creation of dedicated views for pages restored from the Back-Forward cache.
+   * @default false
+   */
+  trackBfcacheViews?: boolean | undefined
   /**
    * Enables collection of resource events.
    * @default true
@@ -175,6 +180,7 @@ export interface RumConfiguration extends Configuration {
   trackViewsManually: boolean
   trackResources: boolean
   trackLongTasks: boolean
+  trackBfcacheViews: boolean
   version?: string
   subdomain?: string
   customerDataTelemetrySampleRate: number
@@ -245,6 +251,7 @@ export function validateAndBuildRumConfiguration(
     trackViewsManually: !!initConfiguration.trackViewsManually,
     trackResources: !!(initConfiguration.trackResources ?? true),
     trackLongTasks: !!(initConfiguration.trackLongTasks ?? true),
+    trackBfcacheViews: !!initConfiguration.trackBfcacheViews,
     subdomain: initConfiguration.subdomain,
     defaultPrivacyLevel: objectHasValue(DefaultPrivacyLevel, initConfiguration.defaultPrivacyLevel)
       ? initConfiguration.defaultPrivacyLevel
@@ -337,6 +344,7 @@ export function serializeRumConfiguration(configuration: RumInitConfiguration) {
     track_user_interactions: configuration.trackUserInteractions,
     track_resources: configuration.trackResources,
     track_long_task: configuration.trackLongTasks,
+    track_bfcache_views: configuration.trackBfcacheViews,
     plugins: configuration.plugins?.map((plugin) => ({
       name: plugin.name,
       ...plugin.getConfigurationTelemetry?.(),

packages/rum-core/src/domain/view/bfCacheSupport.ts

@@ -0,0 +1,16 @@
+import { addEventListener, DOM_EVENT } from '@datadog/browser-core'
+
+export function onBFCacheRestore(callback: (event: PageTransitionEvent) => void): () => void {
+  const { stop } = addEventListener(
+    { allowUntrustedEvents: true },
+    window,
+    DOM_EVENT.PAGE_SHOW,
+    (event: PageTransitionEvent) => {
+      if (event.persisted) {
+        callback(event)
+      }
+    },
+    { capture: true }
+  )
+  return stop
+}

packages/rum-core/src/domain/view/trackViews.spec.ts

@@ -1029,3 +1029,36 @@ describe('service and version', () => {
     expect(getViewUpdate(0).version).toEqual('view version')
   })
 })
+
+describe('BFCache views', () => {
+  const lifeCycle = new LifeCycle()
+  let clock: Clock
+  let viewTest: ViewTest
+
+  beforeEach(() => {
+    clock = mockClock()
+
+    viewTest = setupViewTest({ lifeCycle, partialConfig: { trackBfcacheViews: true } })
+
+    registerCleanupTask(() => {
+      viewTest.stop()
+      clock.cleanup()
+    })
+  })
+
+  it('should create a new "bf_cache" view when restoring from the BFCache', () => {
+    const { getViewCreateCount, getViewEndCount, getViewUpdate, getViewUpdateCount } = viewTest
+
+    expect(getViewCreateCount()).toBe(1)
+    expect(getViewEndCount()).toBe(0)
+
+    const pageshowEvent = new Event('pageshow') as PageTransitionEvent
+    Object.defineProperty(pageshowEvent, 'persisted', { value: true })
+
+    window.dispatchEvent(pageshowEvent)
+
+    expect(getViewEndCount()).toBe(1)
+    expect(getViewCreateCount()).toBe(2)
+    expect(getViewUpdate(getViewUpdateCount() - 1).loadingType).toBe(ViewLoadingType.BF_CACHE)
+  })
+})

packages/rum-core/src/domain/view/trackViews.ts

@@ -38,6 +38,8 @@ import { trackInitialViewMetrics } from './viewMetrics/trackInitialViewMetrics'
 import type { InitialViewMetrics } from './viewMetrics/trackInitialViewMetrics'
 import type { CommonViewMetrics } from './viewMetrics/trackCommonViewMetrics'
 import { trackCommonViewMetrics } from './viewMetrics/trackCommonViewMetrics'
+import { onBFCacheRestore } from './bfCacheSupport'
+import { measureRestoredFCP, measureRestoredLCP, measureRestoredFID } from './viewMetrics/cwvPolyfill'
 
 export interface ViewEvent {
   id: string
@@ -117,6 +119,28 @@ export function trackViews(
     locationChangeSubscription = renewViewOnLocationChange(locationChangeObservable)
   }
 
+  if (configuration.trackBfcacheViews) {
+    onBFCacheRestore((pageshowEvent) => {
+      currentView.end()
+      currentView = startNewView(ViewLoadingType.BF_CACHE)
+
+      measureRestoredFCP(pageshowEvent, (fcp) => {
+        currentView.initialViewMetrics.firstContentfulPaint = fcp
+        measureRestoredLCP(pageshowEvent, (lcp) => {
+          currentView.initialViewMetrics.largestContentfulPaint = { value: lcp as RelativeTime }
+          measureRestoredFID(pageshowEvent, (fid) => {
+            currentView.initialViewMetrics.firstInput = {
+              delay: fid.delay,
+              time: fid.time as RelativeTime,
+              targetSelector: undefined,
+            }
+            currentView.scheduleViewUpdate()
+          })
+        })
+      })
+    })
+  }
+
   function startNewView(loadingType: ViewLoadingType, startClocks?: ClocksState, viewOptions?: ViewOptions) {
     const newlyCreatedView = newView(
       lifeCycle,
@@ -358,6 +382,12 @@ function newView(
       name = updatedName
       triggerViewUpdate()
     },
+    scheduleViewUpdate,
+    /**
+     * we need InitialViewMetrics object so that bfCache logic can update it
+     * with the restored cwv from the polyfill.
+     */
+    initialViewMetrics,
   }
 }
 

packages/rum-core/src/domain/view/viewMetrics/cwvPolyfill.spec.ts

@@ -0,0 +1,50 @@
+import type { Duration } from '@datadog/browser-core'
+import { measureRestoredFCP, measureRestoredLCP, measureRestoredFID } from './cwvPolyfill'
+
+describe('cwvPolyfill', () => {
+  let originalRAF: typeof requestAnimationFrame
+  let originalPerformanceNow: () => number
+
+  beforeEach(() => {
+    originalRAF = window.requestAnimationFrame
+    originalPerformanceNow = performance.now.bind(performance)
+
+    window.requestAnimationFrame = (cb: FrameRequestCallback): number => {
+      cb(performance.now())
+      return 0
+    }
+  })
+
+  afterEach(() => {
+    window.requestAnimationFrame = originalRAF
+    performance.now = originalPerformanceNow
+  })
+
+  it('should measure restored FCP correctly', (done) => {
+    const fakePageshowEvent = { timeStamp: 100 } as PageTransitionEvent
+    performance.now = () => 150
+    measureRestoredFCP(fakePageshowEvent, (fcp: Duration) => {
+      expect(fcp).toEqual(50 as Duration)
+      done()
+    })
+  })
+
+  it('should measure restored LCP correctly', (done) => {
+    const fakePageshowEvent = { timeStamp: 100 } as PageTransitionEvent
+    performance.now = () => 150
+    measureRestoredLCP(fakePageshowEvent, (lcp: Duration) => {
+      expect(lcp).toEqual(50 as Duration)
+      done()
+    })
+  })
+
+  it('should measure restored FID correctly', (done) => {
+    const fakePageshowEvent = { timeStamp: 100 } as PageTransitionEvent
+    performance.now = () => 150
+    measureRestoredFID(fakePageshowEvent, (fid) => {
+      expect(fid.delay).toEqual(0 as Duration)
+      expect(fid.time).toEqual(50 as Duration)
+      done()
+    })
+  })
+})

packages/rum-core/src/domain/view/viewMetrics/cwvPolyfill.ts

@@ -0,0 +1,34 @@
+import type { Duration } from '@datadog/browser-core'
+
+// Note : measureRestoreNavigationTiming does not exist in this case, because when the page is restored from bfcache,
+// the navigation timing is not pertinent anymore.
+
+export function measureRestoredFCP(pageshowEvent: PageTransitionEvent, callback: (fcp: Duration) => void): void {
+  requestAnimationFrame(() => {
+    requestAnimationFrame(() => {
+      const fcp = performance.now() - pageshowEvent.timeStamp
+      callback(fcp as Duration)
+    })
+  })
+}
+
+export function measureRestoredLCP(pageshowEvent: PageTransitionEvent, callback: (lcp: Duration) => void): void {
+  requestAnimationFrame(() => {
+    requestAnimationFrame(() => {
+      const lcp = performance.now() - pageshowEvent.timeStamp
+      callback(lcp as Duration)
+    })
+  })
+}
+export function measureRestoredFID(
+  pageshowEvent: PageTransitionEvent,
+  callback: (fid: { delay: Duration; time: Duration }) => void
+): void {
+  requestAnimationFrame(() => {
+    requestAnimationFrame(() => {
+      const fidDelay = 0 as Duration
+      const fidTime = performance.now() - pageshowEvent.timeStamp
+      callback({ delay: fidDelay, time: fidTime as Duration })
+    })
+  })
+}

packages/rum-core/src/rawRumEvent.types.ts

@@ -188,6 +188,7 @@ export type PageStateServerEntry = { state: PageState; start: ServerDuration }
 export const enum ViewLoadingType {
   INITIAL_LOAD = 'initial_load',
   ROUTE_CHANGE = 'route_change',
+  BF_CACHE = 'bf_cache',
 }
 
 export interface ViewCustomTimings {