Skip to content

[ci-visibility] Implement driver-agnostic integration with CI Visibility #2639

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 8 commits into from
Apr 3, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 4 additions & 2 deletions packages/core/src/browser/addEventListener.ts
Original file line number Diff line number Diff line change
@@ -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 }

Expand Down Expand Up @@ -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
Expand Down
17 changes: 17 additions & 0 deletions packages/core/src/browser/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -38,3 +38,20 @@ export interface VisualViewport extends EventTarget {
options?: boolean | EventListenerOptions
): void
}

// Those are native API types that are not official supported by TypeScript yet

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 {}
10 changes: 9 additions & 1 deletion packages/core/src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -88,7 +88,15 @@ 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 { CookieStore } from './browser/types'
export { initXhrObservable, XhrCompleteContext, XhrStartContext } from './browser/xhrObservable'
export { initFetchObservable, FetchResolveContext, FetchStartContext, FetchContext } from './browser/fetchObservable'
export { createPageExitObservable, PageExitEvent, PageExitReason, isPageExitReason } from './browser/pageExitObservable'
Expand Down
4 changes: 4 additions & 0 deletions packages/rum-core/src/boot/startRum.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -230,6 +231,7 @@ export function startRumEventCollection(
)

const displayContext = startDisplayContext(configuration)
const ciVisibilityContext = startCiVisibilityContext(configuration)

startRumAssembly(
configuration,
Expand All @@ -239,6 +241,7 @@ export function startRumEventCollection(
urlContexts,
actionContexts,
displayContext,
ciVisibilityContext,
getCommonContext,
reportError
)
Expand All @@ -250,6 +253,7 @@ export function startRumEventCollection(
addAction,
actionContexts,
stop: () => {
ciVisibilityContext.stop()
displayContext.stop()
pageStateHistory.stop()
urlContexts.stop()
Expand Down
68 changes: 68 additions & 0 deletions packages/rum-core/src/browser/cookieObservable.spec.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
import type { Subscription } from '@datadog/browser-core'
import { ONE_MINUTE, deleteCookie, setCookie } from '@datadog/browser-core'
import type { Clock } from '@datadog/browser-core/test'
import { mockClock } from '@datadog/browser-core/test'
import type { RumConfiguration } from '../domain/configuration'
import { WATCH_COOKIE_INTERVAL_DELAY, createCookieObservable } from './cookieObservable'

const COOKIE_NAME = 'cookie_name'
const COOKIE_DURATION = ONE_MINUTE

describe('cookieObservable', () => {
let subscription: Subscription
let originalSupportedEntryTypes: PropertyDescriptor | undefined
let clock: Clock
beforeEach(() => {
clock = mockClock()
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) => {
const observable = createCookieObservable({} as RumConfiguration, COOKIE_NAME)

subscription = observable.subscribe((cookieChange) => {
expect(cookieChange).toEqual('foo')

done()
})
setCookie(COOKIE_NAME, 'foo', COOKIE_DURATION)
clock.tick(WATCH_COOKIE_INTERVAL_DELAY)
})

it('should notify observers on cookie change when cookieStore is not supported', () => {
Object.defineProperty(window, 'cookieStore', { get: () => undefined, configurable: true })
const observable = createCookieObservable({} as RumConfiguration, COOKIE_NAME)

let cookieChange: string | undefined
subscription = observable.subscribe((change) => (cookieChange = change))

setCookie(COOKIE_NAME, 'foo', COOKIE_DURATION)
clock.tick(WATCH_COOKIE_INTERVAL_DELAY)

expect(cookieChange).toEqual('foo')
})

it('should not notify observers on cookie change when the cookie value as not changed when cookieStore is not supported', () => {
Object.defineProperty(window, 'cookieStore', { get: () => undefined, configurable: true })
const observable = createCookieObservable({} as RumConfiguration, COOKIE_NAME)

setCookie(COOKIE_NAME, 'foo', COOKIE_DURATION)

let cookieChange: string | undefined
subscription = observable.subscribe((change) => (cookieChange = change))

setCookie(COOKIE_NAME, 'foo', COOKIE_DURATION)
clock.tick(WATCH_COOKIE_INTERVAL_DELAY)

expect(cookieChange).toBeUndefined()
})
})
64 changes: 64 additions & 0 deletions packages/rum-core/src/browser/cookieObservable.ts
Copy link
Collaborator

@amortemousque amortemousque Mar 28, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The goal is to use this observable to also watch the session cookie. (in a following PR)

Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
import type { Configuration, CookieStore } from '@datadog/browser-core'
import {
setInterval,
clearInterval,
Observable,
addEventListener,
ONE_SECOND,
findCommaSeparatedValue,
DOM_EVENT,
find,
} from '@datadog/browser-core'

export interface CookieStoreWindow extends Window {
cookieStore?: CookieStore
}

export type CookieObservable = ReturnType<typeof createCookieObservable>

export function createCookieObservable(configuration: Configuration, cookieName: string) {
const detectCookieChangeStrategy = (window as CookieStoreWindow).cookieStore
? listenToCookieStoreChange(configuration)
: watchCookieFallback

return new Observable<string | undefined>((observable) =>
detectCookieChangeStrategy(cookieName, (event) => observable.notify(event))
)
}

function listenToCookieStoreChange(configuration: Configuration) {
return (cookieName: string, callback: (event: string | undefined) => void) => {
const listener = addEventListener(
configuration,
(window as CookieStoreWindow).cookieStore!,
DOM_EVENT.CHANGE,
(event) => {
// Based on our experimentation, we're assuming that entries for the same cookie cannot be in both the 'changed' and 'deleted' arrays.
// However, due to ambiguity in the specification, we asked for clarification: https://github.com/WICG/cookie-store/issues/226
const changeEvent =
find(event.changed, (event) => event.name === cookieName) ||
find(event.deleted, (event) => event.name === cookieName)
if (changeEvent) {
callback(changeEvent.value)
}
}
)
return listener.stop
}
}

export const WATCH_COOKIE_INTERVAL_DELAY = ONE_SECOND

function watchCookieFallback(cookieName: string, callback: (event: string | undefined) => void) {
const previousCookieValue = findCommaSeparatedValue(document.cookie, cookieName)
const watchCookieIntervalId = setInterval(() => {
const cookieValue = findCommaSeparatedValue(document.cookie, cookieName)
if (cookieValue !== previousCookieValue) {
callback(cookieValue)
}
}, WATCH_COOKIE_INTERVAL_DELAY)

return () => {
clearInterval(watchCookieIntervalId)
}
}
21 changes: 10 additions & 11 deletions packages/rum-core/src/domain/assembly.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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 } from '../../test'
import type { RumEventDomainContext } from '../domainContext.types'
import type { RawRumActionEvent, RawRumEvent } from '../rawRumEvent.types'
import { RumEventType } from '../rawRumEvent.types'
Expand All @@ -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
Expand All @@ -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',
Expand All @@ -46,6 +43,8 @@ describe('rum assembly', () => {
user: {},
hasReplay: undefined,
}
ciVisibilityContext = undefined

setupBuilder = setup()
.withViewContexts({
findView: () => findView(),
Expand All @@ -67,6 +66,7 @@ describe('rum assembly', () => {
urlContexts,
actionContexts,
displayContext,
{ get: () => ciVisibilityContext } as CiVisibilityContext,
() => commonContext,
reportErrorSpy
)
Expand All @@ -76,7 +76,6 @@ describe('rum assembly', () => {

afterEach(() => {
cleanupSyntheticsWorkerValues()
cleanupCiVisibilityWindowValues()
})

describe('beforeSend', () => {
Expand Down Expand Up @@ -674,8 +673,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, {
Expand Down Expand Up @@ -798,7 +797,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, {
Expand Down
12 changes: 8 additions & 4 deletions packages/rum-core/src/domain/assembly.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down Expand Up @@ -68,6 +68,7 @@ export function startRumAssembly(
urlContexts: UrlContexts,
actionContexts: ActionContexts,
displayContext: DisplayContext,
ciVisibilityContext: CiVisibilityContext,
getCommonContext: () => CommonContext,
reportError: (error: RawError) => void
) {
Expand Down Expand Up @@ -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 }) => {
Expand Down Expand Up @@ -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,
Expand All @@ -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(),
}
Expand Down
28 changes: 0 additions & 28 deletions packages/rum-core/src/domain/contexts/ciTestContext.spec.ts

This file was deleted.

15 changes: 0 additions & 15 deletions packages/rum-core/src/domain/contexts/ciTestContext.ts

This file was deleted.

Loading