⚗ [RUM-11393] Add Start/StopResource API

packages/core/src/tools/experimentalFeatures.ts

@@ -20,6 +20,7 @@ export enum ExperimentalFeature {
   SHORT_SESSION_INVESTIGATION = 'short_session_investigation',
   AVOID_FETCH_KEEPALIVE = 'avoid_fetch_keepalive',
   START_STOP_ACTION = 'start_stop_action',
+  START_STOP_RESOURCE = 'start_stop_resource',
   USE_CHANGE_RECORDS = 'use_change_records',
   SOURCE_CODE_CONTEXT = 'source_code_context',
   LCP_SUBPARTS = 'lcp_subparts',

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

@@ -287,6 +287,16 @@ export function createPreStartStrategy(
       bufferApiCalls.add((startRumResult) => startRumResult.stopAction(name, options, stopClocks))
     },
 
+    startResource(url, options) {
+      const startClocks = clocksNow()
+      bufferApiCalls.add((startRumResult) => startRumResult.startResource(url, options, startClocks))
+    },
+
+    stopResource(url, options) {
+      const stopClocks = clocksNow()
+      bufferApiCalls.add((startRumResult) => startRumResult.stopResource(url, options, stopClocks))
+    },
+
     addError(providedError) {
       bufferApiCalls.add((startRumResult) => startRumResult.addError(providedError))
     },

packages/rum-core/src/boot/rumPublicApi.spec.ts

@@ -5,6 +5,7 @@ import {
   DefaultPrivacyLevel,
   timeStampToClocks,
   ExperimentalFeature,
+  ResourceType,
   startTelemetry,
 } from '@datadog/browser-core'
 import type { Clock } from '@datadog/browser-core/test'
@@ -51,6 +52,8 @@ const noopStartRum = (): ReturnType<StartRum> => ({
   addOperationStepVital: () => undefined,
   startAction: () => undefined,
   stopAction: () => undefined,
+  startResource: () => undefined,
+  stopResource: () => undefined,
 })
 const DEFAULT_INIT_CONFIGURATION = { applicationId: 'xxx', clientToken: 'xxx' }
 const FAKE_WORKER = {} as DeflateWorker
@@ -820,6 +823,94 @@ describe('rum public api', () => {
     })
   })
 
+  describe('startResource / stopResource', () => {
+    it('should call startResource and stopResource on the strategy', () => {
+      mockExperimentalFeatures([ExperimentalFeature.START_STOP_RESOURCE])
+
+      const startResourceSpy = jasmine.createSpy()
+      const stopResourceSpy = jasmine.createSpy()
+      const { rumPublicApi } = makeRumPublicApiWithDefaults({
+        startRumResult: {
+          startResource: startResourceSpy,
+          stopResource: stopResourceSpy,
+        },
+      })
+
+      rumPublicApi.init(DEFAULT_INIT_CONFIGURATION)
+      rumPublicApi.startResource('https://api.example.com/data', {
+        type: ResourceType.FETCH,
+        method: 'POST',
+        context: { requestId: 'abc' },
+      })
+      rumPublicApi.stopResource('https://api.example.com/data', {
+        statusCode: 200,
+        context: { responseSize: 1024 },
+      })
+
+      expect(startResourceSpy).toHaveBeenCalledWith(
+        'https://api.example.com/data',
+        jasmine.objectContaining({
+          type: ResourceType.FETCH,
+          method: 'POST',
+          context: { requestId: 'abc' },
+        })
+      )
+      expect(stopResourceSpy).toHaveBeenCalledWith(
+        'https://api.example.com/data',
+        jasmine.objectContaining({
+          statusCode: 200,
+          context: { responseSize: 1024 },
+        })
+      )
+    })
+
+    it('should sanitize startResource and stopResource inputs', () => {
+      mockExperimentalFeatures([ExperimentalFeature.START_STOP_RESOURCE])
+
+      const startResourceSpy = jasmine.createSpy()
+      const { rumPublicApi } = makeRumPublicApiWithDefaults({
+        startRumResult: {
+          startResource: startResourceSpy,
+        },
+      })
+
+      rumPublicApi.init(DEFAULT_INIT_CONFIGURATION)
+      rumPublicApi.startResource('https://api.example.com/data', {
+        type: ResourceType.XHR,
+        method: 'GET',
+        context: { count: 123, nested: { foo: 'bar' } } as any,
+        resourceKey: 'resource_key',
+      })
+
+      expect(startResourceSpy.calls.argsFor(0)[1]).toEqual(
+        jasmine.objectContaining({
+          type: ResourceType.XHR,
+          method: 'GET',
+          context: { count: 123, nested: { foo: 'bar' } },
+          resourceKey: 'resource_key',
+        })
+      )
+    })
+
+    it('should not call startResource/stopResource when feature flag is disabled', () => {
+      const startResourceSpy = jasmine.createSpy()
+      const stopResourceSpy = jasmine.createSpy()
+      const { rumPublicApi } = makeRumPublicApiWithDefaults({
+        startRumResult: {
+          startResource: startResourceSpy,
+          stopResource: stopResourceSpy,
+        },
+      })
+
+      rumPublicApi.init(DEFAULT_INIT_CONFIGURATION)
+      rumPublicApi.startResource('https://api.example.com/data', { type: ResourceType.FETCH })
+      rumPublicApi.stopResource('https://api.example.com/data')
+
+      expect(startResourceSpy).not.toHaveBeenCalled()
+      expect(stopResourceSpy).not.toHaveBeenCalled()
+    })
+  })
+
   describe('addDurationVital', () => {
     it('should call addDurationVital on the startRum result', () => {
       const addDurationVitalSpy = jasmine.createSpy()

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

@@ -14,6 +14,7 @@ import type {
   RumInternalContext,
   Telemetry,
   Encoder,
+  ResourceType,
 } from '@datadog/browser-core'
 import {
   ContextManagerMethod,
@@ -57,6 +58,7 @@ import type { Hooks } from '../domain/hooks'
 import type { SdkName } from '../domain/contexts/defaultContext'
 import type { LongTaskContexts } from '../domain/longTask/longTaskCollection'
 import type { ActionOptions } from '../domain/action/trackManualActions'
+import type { ResourceOptions, ResourceStopOptions } from '../domain/resource/trackManualResources'
 import { createPreStartStrategy } from './preStartRum'
 import type { StartRumResult } from './startRum'
 import { startRum } from './startRum'
@@ -191,6 +193,24 @@ export interface RumPublicApi extends PublicApi {
    */
   stopAction: (name: string, options?: ActionOptions) => void
 
+  /**
+   * [Experimental] Start tracking a resource, stored in `@resource`
+   *
+   * @category Data Collection
+   * @param url - URL of the resource
+   * @param options - Options of the resource (@default type: 'other')
+   */
+  startResource: (url: string, options?: ResourceOptions) => void
+
+  /**
+   * [Experimental] Stop tracking a resource, stored in `@resource`
+   *
+   * @category Data Collection
+   * @param url - URL of the resource
+   * @param options - Options of the resource
+   */
+  stopResource: (url: string, options?: ResourceStopOptions) => void
+
   /**
    * Add a custom error, stored in `@error`.
    *
@@ -548,6 +568,8 @@ export interface Strategy {
   addAction: StartRumResult['addAction']
   startAction: StartRumResult['startAction']
   stopAction: StartRumResult['stopAction']
+  startResource: StartRumResult['startResource']
+  stopResource: StartRumResult['stopResource']
   addError: StartRumResult['addError']
   addFeatureFlagEvaluation: StartRumResult['addFeatureFlagEvaluation']
   startDurationVital: StartRumResult['startDurationVital']
@@ -707,6 +729,32 @@ export function makeRumPublicApi(
       })
     }),
 
+    startResource: monitor((url, options) => {
+      // Check feature flag only after init; pre-init calls should be buffered
+      if (strategy.initConfiguration && !isExperimentalFeatureEnabled(ExperimentalFeature.START_STOP_RESOURCE)) {
+        return
+      }
+      // addTelemetryUsage({ feature: 'start-resource' })
+      strategy.startResource(sanitize(url)!, {
+        type: sanitize(options && options.type) as ResourceType | undefined,
+        method: sanitize(options && options.method) as string | undefined,
+        context: sanitize(options && options.context) as Context,
+        resourceKey: options && options.resourceKey,
+      })
+    }),
+
+    stopResource: monitor((url, options) => {
+      if (strategy.initConfiguration && !isExperimentalFeatureEnabled(ExperimentalFeature.START_STOP_RESOURCE)) {
+        return
+      }
+      // addTelemetryUsage({ feature: 'stop-resource' })
+      strategy.stopResource(sanitize(url)!, {
+        statusCode: options && options.statusCode,
+        context: sanitize(options && options.context) as Context,
+        resourceKey: options && options.resourceKey,
+      })
+    }),
+
     addError: (error, context) => {
       const handlingStack = createHandlingStack('error')
       callMonitored(() => {

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

@@ -224,8 +224,8 @@ export function startRumEventCollection(
 
   cleanupTasks.push(stopViewCollection)
 
-  const { stop: stopResourceCollection } = startResourceCollection(lifeCycle, configuration, pageStateHistory)
-  cleanupTasks.push(stopResourceCollection)
+  const resourceCollection = startResourceCollection(lifeCycle, configuration, pageStateHistory)
+  cleanupTasks.push(resourceCollection.stop)
 
   const { stop: stopLongTaskCollection, longTaskContexts } = startLongTaskCollection(lifeCycle, configuration)
   cleanupTasks.push(stopLongTaskCollection)
@@ -248,6 +248,8 @@ export function startRumEventCollection(
     addAction: actionCollection.addAction,
     startAction: actionCollection.startAction,
     stopAction: actionCollection.stopAction,
+    startResource: resourceCollection.startResource,
+    stopResource: resourceCollection.stopResource,
     addEvent: eventCollection.addEvent,
     addError,
     addTiming,

packages/rum-core/src/domain/action/actionCollection.spec.ts

@@ -11,7 +11,7 @@ import { createHooks } from '../hooks'
 import type { RumMutationRecord } from '../../browser/domMutationObservable'
 import { LONG_TASK_START_TIME_CORRECTION, startActionCollection } from './actionCollection'
 import { ActionNameSource } from './actionNameConstants'
-import type { ActionContexts } from './trackAction'
+import type { ActionContexts } from './actionCollection'
 
 describe('actionCollection', () => {
   const lifeCycle = new LifeCycle()
@@ -172,7 +172,7 @@ describe('actionCollection', () => {
   describe('assembly hook', () => {
     ;[RumEventType.RESOURCE, RumEventType.LONG_TASK, RumEventType.ERROR].forEach((eventType) => {
       it(`should add action properties on ${eventType} from the context`, () => {
-        const actionId = '1'
+        const actionId = ['1']
         spyOn(actionContexts, 'findActionId').and.returnValue(actionId)
         const defaultRumEventAttributes = hooks.triggerHook(HookNames.Assemble, {
           eventType,
@@ -184,7 +184,7 @@ describe('actionCollection', () => {
     })
     ;[RumEventType.VIEW, RumEventType.VITAL].forEach((eventType) => {
       it(`should not add action properties on ${eventType} from the context`, () => {
-        const actionId = '1'
+        const actionId = ['1']
         spyOn(actionContexts, 'findActionId').and.returnValue(actionId)
         const defaultRumEventAttributes = hooks.triggerHook(HookNames.Assemble, {
           eventType,
@@ -197,7 +197,7 @@ describe('actionCollection', () => {
 
     it('should add action properties on long task from the context when the start time is slightly before the action start time', () => {
       const longTaskStartTime = 100 as RelativeTime
-      const findActionIdSpy = spyOn(actionContexts, 'findActionId')
+      const findActionIdSpy = spyOn(actionContexts, 'findActionId').and.returnValue([])
 
       hooks.triggerHook(HookNames.Assemble, {
         eventType: RumEventType.LONG_TASK,
@@ -212,22 +212,22 @@ describe('actionCollection', () => {
 
   describe('assemble telemetry hook', () => {
     it('should add action id', () => {
-      const actionId = '1'
+      const actionId = ['1']
       spyOn(actionContexts, 'findActionId').and.returnValue(actionId)
       const telemetryEventAttributes = hooks.triggerHook(HookNames.AssembleTelemetry, {
         startTime: 0 as RelativeTime,
       }) as DefaultTelemetryEventAttributes
-
-      expect(telemetryEventAttributes.action?.id).toEqual(actionId)
+      // todo: fix telemetry event type
+      expect(telemetryEventAttributes.action?.id).toEqual(actionId as unknown as string)
     })
 
     it('should not add action id if the action is not found', () => {
-      spyOn(actionContexts, 'findActionId').and.returnValue(undefined)
+      spyOn(actionContexts, 'findActionId').and.returnValue([])
       const telemetryEventAttributes = hooks.triggerHook(HookNames.AssembleTelemetry, {
         startTime: 0 as RelativeTime,
       }) as DefaultTelemetryEventAttributes
 
-      expect(telemetryEventAttributes.action?.id).toBeUndefined()
+      expect(telemetryEventAttributes.action?.id).toEqual([] as unknown as string)
     })
   })
 })

packages/rum-core/src/domain/action/actionCollection.ts

@@ -1,4 +1,4 @@
-import type { Duration, Observable } from '@datadog/browser-core'
+import type { Duration, Observable, RelativeTime } from '@datadog/browser-core'
 import { noop, toServerDuration, SKIPPED, HookNames, addDuration } from '@datadog/browser-core'
 import { discardNegativeDuration } from '../discardNegativeDuration'
 import type { RawRumActionEvent } from '../../rawRumEvent.types'
@@ -10,13 +10,15 @@ import type { DefaultRumEventAttributes, DefaultTelemetryEventAttributes, Hooks
 import type { RumMutationRecord } from '../../browser/domMutationObservable'
 import { trackClickActions } from './trackClickActions'
 import type { ClickAction } from './trackClickActions'
-import { startActionTracker } from './trackAction'
-import type { ActionContexts } from './trackAction'
 import { trackManualActions } from './trackManualActions'
 import type { ManualAction } from './trackManualActions'
 
 export type AutoAction = ClickAction
 
+export interface ActionContexts {
+  findActionId: (startTime?: RelativeTime) => string[]
+}
+
 export const LONG_TASK_START_TIME_CORRECTION = 1 as Duration
 
 export function startActionCollection(
@@ -26,34 +28,30 @@ export function startActionCollection(
   windowOpenObservable: Observable<void>,
   configuration: RumConfiguration
 ) {
-  // Shared action tracker for both click and manual actions
-  const actionTracker = startActionTracker(lifeCycle)
-
   const { unsubscribe: unsubscribeAutoAction } = lifeCycle.subscribe(
     LifeCycleEventType.AUTO_ACTION_COMPLETED,
     (action) => {
       lifeCycle.notify(LifeCycleEventType.RAW_RUM_EVENT_COLLECTED, processAction(action))
     }
   )
 
-  let stopClickActions: () => void = noop
+  const stopClickActions: () => void = noop
+  let clickActions: ReturnType<typeof trackClickActions> | undefined
 
   if (configuration.trackUserInteractions) {
-    ;({ stop: stopClickActions } = trackClickActions(
-      lifeCycle,
-      domMutationObservable,
-      windowOpenObservable,
-      configuration,
-      actionTracker
-    ))
+    clickActions = trackClickActions(lifeCycle, domMutationObservable, windowOpenObservable, configuration)
   }
 
-  const manualActions = trackManualActions(lifeCycle, actionTracker, (action) => {
+  const manualActions = trackManualActions(lifeCycle, (action) => {
     lifeCycle.notify(LifeCycleEventType.RAW_RUM_EVENT_COLLECTED, processAction(action))
   })
 
   const actionContexts: ActionContexts = {
-    findActionId: actionTracker.findActionId,
+    findActionId: (startTime?: RelativeTime) => {
+      const manualActionId = manualActions.findActionId(startTime)
+      const clickActionId = clickActions?.findActionId(startTime) ?? []
+      return manualActionId.concat(clickActionId)
+    },
   }
 
   hooks.register(HookNames.Assemble, ({ startTime, eventType }): DefaultRumEventAttributes | SKIPPED => {
@@ -75,7 +73,7 @@ export function startActionCollection(
 
     const actionId = actionContexts.findActionId(correctedStartTime)
 
-    if (!actionId) {
+    if (!actionId.length) {
       return SKIPPED
     }
 
@@ -88,7 +86,8 @@ export function startActionCollection(
   hooks.register(
     HookNames.AssembleTelemetry,
     ({ startTime }): DefaultTelemetryEventAttributes => ({
-      action: { id: actionContexts.findActionId(startTime) as string },
+      // todo: fix telemetry event type
+      action: { id: actionContexts.findActionId(startTime) as unknown as string },
     })
   )
 
@@ -101,7 +100,7 @@ export function startActionCollection(
       unsubscribeAutoAction()
       stopClickActions()
       manualActions.stop()
-      actionTracker.stop()
+      clickActions?.stop()
     },
   }
 }