✨ Implement addTiming

packages/core/src/tools/utils.ts

@@ -252,6 +252,14 @@ export function isEmptyObject(object: object) {
   return Object.keys(object).length === 0
 }
 
+export function mapValues<A, B>(object: { [key: string]: A }, fn: (arg: A) => B) {
+  const newObject: { [key: string]: B } = {}
+  for (const key of Object.keys(object)) {
+    newObject[key] = fn(object[key])
+  }
+  return newObject
+}
+
 /**
  * inspired by https://mathiasbynens.be/notes/globalthis
  */

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

@@ -34,7 +34,7 @@ export function startRum(userConfiguration: RumUserConfiguration, getCommonConte
     )
   })
 
-  const { parentContexts, addError, addAction } = startRumEventCollection(
+  const { parentContexts, addError, addAction, addTiming } = startRumEventCollection(
     userConfiguration.applicationId,
     location,
     lifeCycle,
@@ -52,6 +52,8 @@ export function startRum(userConfiguration: RumUserConfiguration, getCommonConte
   return {
     addAction,
     addError,
+    addTiming,
+    configuration,
     getInternalContext: internalContext.get,
   }
 }
@@ -69,7 +71,7 @@ export function startRumEventCollection(
   startRumAssembly(applicationId, configuration, lifeCycle, session, parentContexts, getCommonContext)
   startLongTaskCollection(lifeCycle, configuration)
   startResourceCollection(lifeCycle, configuration, session)
-  startViewCollection(lifeCycle, configuration, location)
+  const { addTiming } = startViewCollection(lifeCycle, configuration, location)
   const { addError } = startErrorCollection(lifeCycle, configuration)
   const { addAction } = startActionCollection(lifeCycle, configuration)
 
@@ -78,6 +80,8 @@ export function startRumEventCollection(
     addError,
     parentContexts,
 
+    addTiming,
+
     stop() {
       // prevent batch from previous tests to keep running and send unwanted requests
       // could be replaced by stopping all the component when they will all have a stop method

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

@@ -1,11 +1,16 @@
-import { ErrorSource, ONE_SECOND } from '@datadog/browser-core'
+import { Configuration, ErrorSource, ONE_SECOND } from '@datadog/browser-core'
 import { setup, TestSetupBuilder } from '../../test/specHelper'
 import { ActionType } from '../domain/rumEventsCollection/action/trackActions'
 import { makeRumPublicApi, RumPublicApi, RumUserConfiguration, StartRum } from './rumPublicApi'
 
+const configuration: Partial<Configuration> = {
+  isEnabled: () => false,
+}
 const noopStartRum = () => ({
   addAction: () => undefined,
   addError: () => undefined,
+  addTiming: () => undefined,
+  configuration: configuration as Configuration,
   getInternalContext: () => undefined,
 })
 const DEFAULT_INIT_CONFIGURATION = { applicationId: 'xxx', clientToken: 'xxx' }
@@ -385,4 +390,37 @@ describe('rum entry', () => {
       expect(errorSpy).toHaveBeenCalledTimes(3)
     })
   })
+
+  describe('addTiming', () => {
+    let addTimingSpy: jasmine.Spy<ReturnType<StartRum>['addTiming']>
+    let errorSpy: jasmine.Spy<() => void>
+    let rumGlobal: RumPublicApi
+    let setupBuilder: TestSetupBuilder
+
+    beforeEach(() => {
+      addTimingSpy = jasmine.createSpy()
+      errorSpy = spyOn(console, 'error')
+      const otherConfiguration: Partial<Configuration> = {
+        isEnabled: () => true,
+      }
+      rumGlobal = makeRumPublicApi(() => ({
+        ...noopStartRum(),
+        addTiming: addTimingSpy,
+        configuration: otherConfiguration as Configuration,
+      }))
+      setupBuilder = setup()
+    })
+
+    afterEach(() => {
+      setupBuilder.cleanup()
+    })
+
+    it('should add custom timings', () => {
+      rumGlobal.init(DEFAULT_INIT_CONFIGURATION)
+      // tslint:disable-next-line: no-unsafe-any
+      ;(rumGlobal as any).addTiming('foo')
+      expect(addTimingSpy.calls.argsFor(0)[0]).toEqual('foo')
+      expect(errorSpy).not.toHaveBeenCalled()
+    })
+  })
 })

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

@@ -3,6 +3,7 @@ import {
   buildCookieOptions,
   checkCookiesAuthorized,
   checkIsNotLocalFile,
+  Configuration,
   Context,
   createContextManager,
   deepClone,
@@ -67,7 +68,11 @@ export function makeRumPublicApi(startRumImpl: StartRum) {
         userConfiguration.clientToken = userConfiguration.publicApiKey
       }
 
+      let configuration: Configuration
+      let addTiming: ReturnType<StartRum>['addTiming']
       ;({
+        addTiming,
+        configuration,
         addAction: addActionStrategy,
         addError: addErrorStrategy,
         getInternalContext: getInternalContextStrategy,
@@ -78,6 +83,10 @@ export function makeRumPublicApi(startRumImpl: StartRum) {
       beforeInitAddAction.drain(([action, commonContext]) => addActionStrategy(action, commonContext))
       beforeInitAddError.drain(([error, commonContext]) => addErrorStrategy(error, commonContext))
 
+      if (configuration.isEnabled('custom-timings')) {
+        ;(rumGlobal as any).addTiming = addTiming
+      }
+
       isAlreadyInitialized = true
     }),
 

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

@@ -829,3 +829,91 @@ describe('rum view measures', () => {
     })
   })
 })
+
+describe('rum track custom timings', () => {
+  let setupBuilder: TestSetupBuilder
+  let handler: jasmine.Spy
+  let getViewEvent: (index: number) => View
+  let addTiming: (name: string, inInitialView?: boolean, time?: number) => void
+
+  beforeEach(() => {
+    ;({ handler, getViewEvent } = spyOnViews())
+
+    setupBuilder = setup()
+      .withFakeLocation('/foo')
+      .withFakeClock()
+      .beforeBuild(({ location, lifeCycle }) => {
+        lifeCycle.subscribe(LifeCycleEventType.VIEW_UPDATED, handler)
+        ;({ addTiming } = trackViews(location, lifeCycle))
+      })
+  })
+
+  afterEach(() => {
+    setupBuilder.cleanup()
+  })
+
+  it('should add custom timing to current view', () => {
+    const { clock } = setupBuilder.build()
+    history.pushState({}, '', '/bar')
+    const currentViewId = getViewEvent(2).id
+    clock.tick(20)
+    addTiming('foo', false)
+
+    const event = getViewEvent(3)
+    expect(event.id).toEqual(currentViewId)
+    expect(event.customTimings).toEqual({ foo: 20 })
+  })
+
+  it('should add custom timing to initial view', () => {
+    const { clock } = setupBuilder.build()
+    clock.tick(20)
+    history.pushState({}, '', '/bar')
+    const initialViewId = getViewEvent(0).id
+
+    clock.tick(20)
+    addTiming('foo', true)
+
+    const event = getViewEvent(3)
+    expect(event.id).toEqual(initialViewId)
+    expect(event.customTimings).toEqual({ foo: 40 })
+  })
+
+  it('should add multiple custom timings', () => {
+    const { clock } = setupBuilder.build()
+    clock.tick(20)
+    addTiming('foo', false)
+
+    clock.tick(10)
+    addTiming('bar', false)
+
+    const event = getViewEvent(2)
+    expect(event.customTimings).toEqual({
+      bar: 30,
+      foo: 20,
+    })
+  })
+
+  it('should update custom timing', () => {
+    const { clock } = setupBuilder.build()
+    clock.tick(20)
+    addTiming('foo', false)
+
+    clock.tick(10)
+    addTiming('bar', false)
+
+    let event = getViewEvent(2)
+    expect(event.customTimings).toEqual({
+      bar: 30,
+      foo: 20,
+    })
+
+    clock.tick(20)
+    addTiming('foo', false)
+
+    event = getViewEvent(3)
+    expect(event.customTimings).toEqual({
+      bar: 30,
+      foo: 50,
+    })
+  })
+})

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

@@ -1,4 +1,13 @@
-import { addEventListener, DOM_EVENT, generateUUID, monitor, noop, ONE_MINUTE, throttle } from '@datadog/browser-core'
+import {
+  addEventListener,
+  DOM_EVENT,
+  generateUUID,
+  monitor,
+  msToNs,
+  noop,
+  ONE_MINUTE,
+  throttle,
+} from '@datadog/browser-core'
 
 import { supportPerformanceTimingEvent } from '../../../browser/performanceCollection'
 import { LifeCycle, LifeCycleEventType } from '../../lifeCycle'
@@ -11,6 +20,7 @@ export interface View {
   location: Location
   referrer: string
   timings: Timings
+  customTimings: ViewCustomTimings
   eventCounts: EventCounts
   documentVersion: number
   startTime: number
@@ -33,6 +43,10 @@ export enum ViewLoadingType {
   ROUTE_CHANGE = 'route_change',
 }
 
+export interface ViewCustomTimings {
+  [key: string]: number
+}
+
 export const THROTTLE_VIEW_UPDATE_PERIOD = 3000
 export const SESSION_KEEP_ALIVE_INTERVAL = 5 * ONE_MINUTE
 
@@ -83,6 +97,11 @@ export function trackViews(location: Location, lifeCycle: LifeCycle) {
   )
 
   return {
+    addTiming(name: string, inInitialView = false) {
+      const view = inInitialView ? initialView : currentView
+      view.addTiming(name)
+      view.triggerUpdate()
+    },
     stop() {
       stopTimingsTracking()
       currentView.end()
@@ -107,6 +126,7 @@ function newView(
     userActionCount: 0,
   }
   let timings: Timings = {}
+  const customTimings: ViewCustomTimings = {}
   let documentVersion = 0
   let cumulativeLayoutShift: number | undefined
   let loadingTime: number | undefined
@@ -154,6 +174,7 @@ function newView(
     documentVersion += 1
     lifeCycle.notify(LifeCycleEventType.VIEW_UPDATED, {
       cumulativeLayoutShift,
+      customTimings,
       documentVersion,
       eventCounts,
       id,
@@ -193,6 +214,9 @@ function newView(
         setLoadEvent(newTimings.loadEvent)
       }
     },
+    addTiming(name: string) {
+      customTimings[name] = performance.now() - startTime
+    },
     updateLocation(newLocation: Location) {
       location = { ...newLocation }
     },

packages/rum-core/src/domain/rumEventsCollection/view/viewCollection.spec.ts

@@ -23,8 +23,13 @@ describe('viewCollection', () => {
 
   it('should create view from view update', () => {
     const { lifeCycle, rawRumEvents } = setupBuilder.build()
+    const location: Partial<Location> = {}
     const view = {
       cumulativeLayoutShift: 1,
+      customTimings: {
+        bar: 20,
+        foo: 10,
+      },
       documentVersion: 3,
       duration: 100,
       eventCounts: {
@@ -37,7 +42,7 @@ describe('viewCollection', () => {
       isActive: false,
       loadingTime: 20,
       loadingType: ViewLoadingType.INITIAL_LOAD,
-      location: {},
+      location: location as Location,
       referrer: '',
       startTime: 1234,
       timings: {
@@ -51,7 +56,7 @@ describe('viewCollection', () => {
         loadEvent: 10,
       },
     }
-    lifeCycle.notify(LifeCycleEventType.VIEW_UPDATED, view as View)
+    lifeCycle.notify(LifeCycleEventType.VIEW_UPDATED, view)
 
     expect(rawRumEvents[rawRumEvents.length - 1].startTime).toBe(1234)
     expect(rawRumEvents[rawRumEvents.length - 1].rawRumEvent).toEqual({
@@ -65,6 +70,10 @@ describe('viewCollection', () => {
           count: 10,
         },
         cumulativeLayoutShift: 1,
+        customTimings: {
+          bar: 20 * 1e6,
+          foo: 10 * 1e6,
+        },
         domComplete: 10 * 1e6,
         domContentLoaded: 10 * 1e6,
         domInteractive: 10 * 1e6,

packages/rum-core/src/domain/rumEventsCollection/view/viewCollection.ts

@@ -1,4 +1,4 @@
-import { Configuration, getTimestamp, msToNs } from '@datadog/browser-core'
+import { Configuration, getTimestamp, isEmptyObject, mapValues, msToNs } from '@datadog/browser-core'
 import { RawRumViewEvent, RumEventType } from '../../../rawRumEvent.types'
 import { LifeCycle, LifeCycleEventType } from '../../lifeCycle'
 import { trackViews, View } from './trackViews'
@@ -46,6 +46,9 @@ function processViewUpdate(view: View) {
       timeSpent: msToNs(view.duration),
     },
   }
+  if (!isEmptyObject(view.customTimings)) {
+    viewEvent.view.customTimings = mapValues(view.customTimings, msToNs)
+  }
   return {
     rawRumEvent: viewEvent,
     startTime: view.startTime,

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

@@ -1,7 +1,7 @@
 import { Context, ErrorSource, ResourceType } from '@datadog/browser-core'
 import { ActionType } from './domain/rumEventsCollection/action/trackActions'
 import { PerformanceResourceDetailsElement } from './domain/rumEventsCollection/resource/resourceUtils'
-import { ViewLoadingType } from './domain/rumEventsCollection/view/trackViews'
+import { ViewCustomTimings, ViewLoadingType } from './domain/rumEventsCollection/view/trackViews'
 
 export enum RumEventType {
   ACTION = 'action',
@@ -60,6 +60,7 @@ export interface RawRumViewEvent {
     firstInputDelay?: number
     firstInputTime?: number
     cumulativeLayoutShift?: number
+    customTimings?: ViewCustomTimings
     largestContentfulPaint?: number
     domInteractive?: number
     domContentLoaded?: number

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

@@ -459,6 +459,12 @@ export type RumViewEvent = CommonProperties & {
      * Duration in ns to the end of the load event handler execution
      */
     readonly load_event?: number
+    /**
+     * User custom timings of the view
+     */
+    readonly custom_timings?: {
+      [k: string]: number
+    }
     /**
      * Whether the View corresponding to this event is considered active
      */