Add ci visibility context form cookie

Author: amortemousque

packages/core/src/browser/addEventListener.ts

@@ -1,7 +1,7 @@
 import { monitor } from '../tools/monitor'
 import { getZoneJsOriginalValue } from '../tools/getZoneJsOriginalValue'
 import type { Configuration } from '../domain/configuration'
-import type { VisualViewport, VisualViewportEventMap } from './types'
+import type { CookieStore, CookieStoreEventMap, VisualViewport, VisualViewportEventMap } from './types'
 
 export type TrustableEvent<E extends Event = Event> = E & { __ddIsTrusted?: boolean }
 
@@ -75,7 +75,9 @@ type EventMapFor<T> = T extends Window
               ? PerformanceEventMap
               : T extends Worker
                 ? WorkerEventMap
-                : Record<never, never>
+                : T extends CookieStore
+                  ? CookieStoreEventMap
+                  : Record<never, never>
 
 /**
  * Add an event listener to an event target object (Window, Element, mock object...).  This provides

packages/core/src/browser/types.ts

@@ -38,3 +38,21 @@ export interface VisualViewport extends EventTarget {
     options?: boolean | EventListenerOptions
   ): void
 }
+
+// Those are native API types that are not official supported by TypeScript yet
+// https://github.com/microsoft/TypeScript/blob/13c374a868c926f6a907666a5599992c1351b773/src/lib/dom.generated.d.ts#L15399-L15418
+
+export interface CookieStore extends EventTarget {}
+
+export interface CookieStoreEventMap {
+  change: CookieChangeEvent
+}
+
+export type CookieChangeItem = { name: string; value: string | undefined }
+
+export type CookieChangeEvent = Event & {
+  changed: CookieChangeItem[]
+  deleted: CookieChangeItem[]
+}
+
+export interface CookieStore extends EventTarget {}

packages/core/src/index.ts

@@ -87,7 +87,14 @@ export {
 } from './domain/error/error'
 export { NonErrorPrefix } from './domain/error/error.types'
 export { Context, ContextArray, ContextValue } from './tools/serialisation/context'
-export { areCookiesAuthorized, getCookie, setCookie, deleteCookie } from './browser/cookie'
+export {
+  areCookiesAuthorized,
+  getCookie,
+  getInitCookie,
+  setCookie,
+  deleteCookie,
+  resetInitCookies,
+} from './browser/cookie'
 export { initXhrObservable, XhrCompleteContext, XhrStartContext } from './browser/xhrObservable'
 export { initFetchObservable, FetchResolveContext, FetchStartContext, FetchContext } from './browser/fetchObservable'
 export { createPageExitObservable, PageExitEvent, PageExitReason, isPageExitReason } from './browser/pageExitObservable'

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

@@ -46,6 +46,7 @@ import { startPageStateHistory } from '../domain/contexts/pageStateHistory'
 import type { CommonContext } from '../domain/contexts/commonContext'
 import { startDisplayContext } from '../domain/contexts/displayContext'
 import { startVitalCollection } from '../domain/vital/vitalCollection'
+import { startCiVisibilityContext } from '../domain/contexts/ciVisibilityContext'
 import type { RecorderApi } from './rumPublicApi'
 
 export type StartRum = typeof startRum
@@ -230,6 +231,7 @@ export function startRumEventCollection(
   )
 
   const displayContext = startDisplayContext(configuration)
+  const ciVisibilityContext = startCiVisibilityContext(configuration)
 
   startRumAssembly(
     configuration,
@@ -239,6 +241,7 @@ export function startRumEventCollection(
     urlContexts,
     actionContexts,
     displayContext,
+    ciVisibilityContext,
     getCommonContext,
     reportError
   )
@@ -250,6 +253,7 @@ export function startRumEventCollection(
     addAction,
     actionContexts,
     stop: () => {
+      ciVisibilityContext.stop()
       displayContext.stop()
       pageStateHistory.stop()
       urlContexts.stop()

packages/rum-core/src/browser/cookieObservable.spec.ts

@@ -0,0 +1,58 @@
+import type { Subscription } from '@datadog/browser-core'
+import { ONE_MINUTE, STORAGE_POLL_DELAY, deleteCookie, setCookie } from '@datadog/browser-core'
+import type { Clock } from '@datadog/browser-core/test'
+import { mockClock } from '@datadog/browser-core/test'
+import type { CookieChangeItem } from 'packages/core/src/browser/types'
+import type { RumConfiguration } from '../domain/configuration'
+import { createCookieObservable } from './cookieObservable'
+import type { CookieObservable } from './cookieObservable'
+
+const COOKIE_NAME = 'cookie_name'
+const COOKIE_DURATION = ONE_MINUTE
+
+describe('cookieObservable', () => {
+  let observable: CookieObservable
+  let subscription: Subscription
+  let originalSupportedEntryTypes: PropertyDescriptor | undefined
+  let clock: Clock
+  beforeEach(() => {
+    clock = mockClock()
+    observable = createCookieObservable({} as RumConfiguration, COOKIE_NAME)
+    originalSupportedEntryTypes = Object.getOwnPropertyDescriptor(window, 'cookieStore')
+  })
+
+  afterEach(() => {
+    subscription?.unsubscribe()
+    if (originalSupportedEntryTypes) {
+      Object.defineProperty(window, 'cookieStore', originalSupportedEntryTypes)
+    }
+    clock.cleanup()
+    deleteCookie(COOKIE_NAME)
+  })
+
+  it('should notify observers on cookie change', (done) => {
+    subscription = observable.subscribe((cookieChange) => {
+      expect(cookieChange).toEqual({
+        name: COOKIE_NAME,
+        value: 'foo',
+      })
+
+      done()
+    })
+    setCookie(COOKIE_NAME, 'foo', COOKIE_DURATION)
+  })
+
+  it('should notify observers on cookie change when cookieStore is not supported', () => {
+    Object.defineProperty(window, 'cookieStore', { get: () => undefined })
+    let cookieChange: CookieChangeItem | undefined
+    observable.subscribe((change) => (cookieChange = change))
+
+    setCookie(COOKIE_NAME, 'foo', COOKIE_DURATION)
+    clock.tick(STORAGE_POLL_DELAY)
+
+    expect(cookieChange).toEqual({
+      name: COOKIE_NAME,
+      value: 'foo',
+    })
+  })
+})

packages/rum-core/src/browser/cookieObservable.ts

@@ -0,0 +1,63 @@
+import type { Configuration } from '@datadog/browser-core'
+import {
+  setInterval,
+  clearInterval,
+  Observable,
+  addEventListener,
+  ONE_SECOND,
+  findCommaSeparatedValue,
+} from '@datadog/browser-core'
+import type { CookieChangeItem, CookieStore } from 'packages/core/src/browser/types'
+
+export interface CookieStoreWindow extends Window {
+  cookieStore: CookieStore
+}
+
+export type CookieObservable = ReturnType<typeof createCookieObservable>
+
+export function createCookieObservable(configuration: Configuration, cookieName: string) {
+  return new Observable<CookieChangeItem>(
+    (observable) =>
+      listenToCookieStoreChange(configuration, cookieName, (event) => observable.notify(event)) ??
+      watchCookieFallback(cookieName, (event) => observable.notify(event))
+  )
+}
+
+function listenToCookieStoreChange(
+  configuration: Configuration,
+  cookieName: string,
+  callback: (event: CookieChangeItem) => void
+) {
+  if (!('cookieStore' in window)) {
+    return
+  }
+
+  const listener = addEventListener(configuration, (window as CookieStoreWindow).cookieStore, 'change', (event) => {
+    event.changed
+      .concat(event.deleted)
+      .filter((change) => change.name === cookieName)
+      .forEach((change) => {
+        callback({
+          name: change.name,
+          value: change.value,
+        })
+      })
+  })
+
+  return listener.stop
+}
+
+export const WATCH_COOKIE_INTERVAL_DELAY = ONE_SECOND
+
+function watchCookieFallback(
+  cookieName: string,
+  callback: (event: { name: string; value: string | undefined }) => void
+) {
+  const watchCookieIntervalId = setInterval(() => {
+    callback({ name: cookieName, value: findCommaSeparatedValue(document.cookie, cookieName) })
+  }, WATCH_COOKIE_INTERVAL_DELAY)
+
+  return () => {
+    clearInterval(watchCookieIntervalId)
+  }
+}

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

@@ -9,13 +9,7 @@ import {
   setNavigatorConnection,
 } from '@datadog/browser-core/test'
 import type { TestSetupBuilder } from '../../test'
-import {
-  createRumSessionManagerMock,
-  mockCiVisibilityWindowValues,
-  setup,
-  createRawRumEvent,
-  cleanupCiVisibilityWindowValues,
-} from '../../test'
+import { createRumSessionManagerMock, setup, createRawRumEvent, cleanupCiVisibilityValues } from '../../test'
 import type { RumEventDomainContext } from '../domainContext.types'
 import type { RawRumActionEvent, RawRumEvent } from '../rawRumEvent.types'
 import { RumEventType } from '../rawRumEvent.types'
@@ -26,6 +20,7 @@ import { LifeCycleEventType } from './lifeCycle'
 import type { RumConfiguration } from './configuration'
 import type { ViewContext } from './contexts/viewContexts'
 import type { CommonContext } from './contexts/commonContext'
+import type { CiVisibilityContext } from './contexts/ciVisibilityContext'
 
 describe('rum assembly', () => {
   let setupBuilder: TestSetupBuilder
@@ -34,6 +29,8 @@ describe('rum assembly', () => {
   let extraConfigurationOptions: Partial<RumConfiguration> = {}
   let findView: () => ViewContext
   let reportErrorSpy: jasmine.Spy<jasmine.Func>
+  let ciVisibilityContext: { test_execution_id: string } | undefined
+
   beforeEach(() => {
     findView = () => ({
       id: '7890',
@@ -46,6 +43,8 @@ describe('rum assembly', () => {
       user: {},
       hasReplay: undefined,
     }
+    ciVisibilityContext = undefined
+
     setupBuilder = setup()
       .withViewContexts({
         findView: () => findView(),
@@ -67,6 +66,7 @@ describe('rum assembly', () => {
             urlContexts,
             actionContexts,
             displayContext,
+            { get: () => ciVisibilityContext } as CiVisibilityContext,
             () => commonContext,
             reportErrorSpy
           )
@@ -76,7 +76,7 @@ describe('rum assembly', () => {
 
   afterEach(() => {
     cleanupSyntheticsWorkerValues()
-    cleanupCiVisibilityWindowValues()
+    cleanupCiVisibilityValues()
   })
 
   describe('beforeSend', () => {
@@ -674,8 +674,8 @@ describe('rum assembly', () => {
       expect(serverRumEvents[0].session.type).toEqual('synthetics')
     })
 
-    it('should detect ci visibility tests based on ci visibility global window values', () => {
-      mockCiVisibilityWindowValues('traceId')
+    it('should detect ci visibility tests', () => {
+      ciVisibilityContext = { test_execution_id: 'traceId' }
 
       const { lifeCycle } = setupBuilder.build()
       notifyRawRumEvent(lifeCycle, {
@@ -798,7 +798,7 @@ describe('rum assembly', () => {
 
   describe('ci visibility context', () => {
     it('includes the ci visibility context', () => {
-      mockCiVisibilityWindowValues('traceId')
+      ciVisibilityContext = { test_execution_id: 'traceId' }
 
       const { lifeCycle } = setupBuilder.build()
       notifyRawRumEvent(lifeCycle, {

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

@@ -24,7 +24,7 @@ import type {
 import { RumEventType } from '../rawRumEvent.types'
 import type { RumEvent } from '../rumEvent.types'
 import { getSyntheticsContext } from './contexts/syntheticsContext'
-import { getCiTestContext } from './contexts/ciTestContext'
+import type { CiVisibilityContext } from './contexts/ciVisibilityContext'
 import type { LifeCycle } from './lifeCycle'
 import { LifeCycleEventType } from './lifeCycle'
 import type { ViewContexts } from './contexts/viewContexts'
@@ -68,6 +68,7 @@ export function startRumAssembly(
   urlContexts: UrlContexts,
   actionContexts: ActionContexts,
   displayContext: DisplayContext,
+  ciVisibilityContext: CiVisibilityContext,
   getCommonContext: () => CommonContext,
   reportError: (error: RawError) => void
 ) {
@@ -122,7 +123,6 @@ export function startRumAssembly(
   }
 
   const syntheticsContext = getSyntheticsContext()
-  const ciTestContext = getCiTestContext()
   lifeCycle.subscribe(
     LifeCycleEventType.RAW_RUM_EVENT_COLLECTED,
     ({ startTime, rawRumEvent, domainContext, savedCommonContext, customerContext }) => {
@@ -152,7 +152,11 @@ export function startRumAssembly(
           source: 'browser',
           session: {
             id: session.id,
-            type: syntheticsContext ? SessionType.SYNTHETICS : ciTestContext ? SessionType.CI_TEST : SessionType.USER,
+            type: syntheticsContext
+              ? SessionType.SYNTHETICS
+              : ciVisibilityContext.get()
+                ? SessionType.CI_TEST
+                : SessionType.USER,
           },
           view: {
             id: viewContext.id,
@@ -162,7 +166,7 @@ export function startRumAssembly(
           },
           action: needToAssembleWithAction(rawRumEvent) && actionId ? { id: actionId } : undefined,
           synthetics: syntheticsContext,
-          ci_test: ciTestContext,
+          ci_test: ciVisibilityContext.get(),
           display: displayContext.get(),
           connectivity: getConnectivity(),
         }