⚗️[RUM-2889] Bootstrap custom vital APIs

developer-extension/src/panel/components/tabs/eventsTab/eventRow.tsx

@@ -11,6 +11,7 @@ import type {
   RumLongTaskEvent,
   RumResourceEvent,
   RumViewEvent,
+  RumVitalEvent,
 } from '../../../../../../packages/rum-core/src/rumEvent.types'
 import type { SdkEvent } from '../../../sdkEvent'
 import { isTelemetryEvent, isLogEvent, isRumEvent } from '../../../sdkEvent'
@@ -32,6 +33,7 @@ const RUM_EVENT_TYPE_COLOR = {
   view: 'blue',
   resource: 'cyan',
   telemetry: 'teal',
+  vital: 'orange',
 }
 
 const LOG_STATUS_COLOR = {
@@ -260,6 +262,8 @@ export const EventDescription = React.memo(({ event }: { event: SdkEvent }) => {
         return <ResourceDescription event={event} />
       case 'action':
         return <ActionDescription event={event} />
+      case 'vital':
+        return <VitalDescription event={event} />
     }
   } else if (isLogEvent(event)) {
     return <LogDescription event={event} />
@@ -322,6 +326,17 @@ function LongTaskDescription({ event }: { event: RumLongTaskEvent }) {
   )
 }
 
+function VitalDescription({ event }: { event: RumVitalEvent }) {
+  const vitalName = Object.keys(event.vital.custom!)[0]
+  const vitalValue = event.vital.custom![vitalName]
+  return (
+    <>
+      Custom <Emphasis>{event.vital.type}</Emphasis> vital: <Emphasis>{vitalName}</Emphasis> of{' '}
+      <Emphasis>{vitalValue}</Emphasis>
+    </>
+  )
+}
+
 function ErrorDescription({ event }: { event: RumErrorEvent }) {
   return (
     <>

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

@@ -101,6 +101,7 @@ export function startRumAssembly(
       VIEW_MODIFIABLE_FIELD_PATHS
     ),
     [RumEventType.LONG_TASK]: assign({}, USER_CUSTOMIZABLE_FIELD_PATHS, VIEW_MODIFIABLE_FIELD_PATHS),
+    [RumEventType.VITAL]: assign({}, USER_CUSTOMIZABLE_FIELD_PATHS, VIEW_MODIFIABLE_FIELD_PATHS),
   }
   const eventRateLimiters = {
     [RumEventType.ERROR]: createEventRateLimiter(

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

@@ -27,11 +27,12 @@ describe('trackEventCounts', () => {
     notifyCollectedRawRumEvent({ type: RumEventType.LONG_TASK })
     expect(eventCounts.longTaskCount).toBe(1)
   })
-
-  it("doesn't track views", () => {
-    const { eventCounts } = trackEventCounts({ lifeCycle, isChildEvent: () => true })
-    notifyCollectedRawRumEvent({ type: RumEventType.VIEW })
-    expect(objectValues(eventCounts as unknown as { [key: string]: number }).every((value) => value === 0)).toBe(true)
+  ;[RumEventType.VIEW, RumEventType.VITAL].forEach((eventType) => {
+    it(`doesn't track ${eventType} events`, () => {
+      const { eventCounts } = trackEventCounts({ lifeCycle, isChildEvent: () => true })
+      notifyCollectedRawRumEvent({ type: eventType })
+      expect(objectValues(eventCounts as unknown as { [key: string]: number }).every((value) => value === 0)).toBe(true)
+    })
   })
 
   it('tracks actions', () => {

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

@@ -30,7 +30,7 @@ export function trackEventCounts({
   }
 
   const subscription = lifeCycle.subscribe(LifeCycleEventType.RUM_EVENT_COLLECTED, (event): void => {
-    if (event.type === 'view' || !isChildEvent(event)) {
+    if (event.type === 'view' || event.type === 'vital' || !isChildEvent(event)) {
       return
     }
     switch (event.type) {

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

@@ -14,7 +14,9 @@ export type RumEventDomainContext<T extends RumEventType = any> = T extends RumE
         ? RumErrorEventDomainContext
         : T extends RumEventType.LONG_TASK
           ? RumLongTaskEventDomainContext
-          : never
+          : T extends RumEventType.VITAL
+            ? RumVitalEventDomainContext
+            : never
 
 export interface RumViewEventDomainContext {
   location: Readonly<Location>
@@ -48,3 +50,5 @@ export interface RumErrorEventDomainContext {
 export interface RumLongTaskEventDomainContext {
   performanceEntry: PerformanceEntry
 }
+
+export interface RumVitalEventDomainContext {}

packages/rum-core/src/index.ts

@@ -8,6 +8,7 @@ export {
   RumViewEvent,
   RumResourceEvent,
   RumLongTaskEvent,
+  RumVitalEvent,
 } from './rumEvent.types'
 export {
   RumLongTaskEventDomainContext,

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

@@ -18,6 +18,7 @@ export const enum RumEventType {
   LONG_TASK = 'long_task',
   VIEW = 'view',
   RESOURCE = 'resource',
+  VITAL = 'vital',
 }
 
 export interface RawRumResourceEvent {
@@ -215,12 +216,29 @@ export const enum FrustrationType {
   DEAD_CLICK = 'dead_click',
 }
 
+export interface RawRumVitalEvent {
+  date: TimeStamp
+  type: RumEventType.VITAL
+  vital: {
+    id: string
+    type: VitalType
+    custom: {
+      [key: string]: number
+    }
+  }
+}
+
+export const enum VitalType {
+  DURATION = 'duration',
+}
+
 export type RawRumEvent =
   | RawRumErrorEvent
   | RawRumResourceEvent
   | RawRumViewEvent
   | RawRumLongTaskEvent
   | RawRumActionEvent
+  | RawRumVitalEvent
 
 export interface RumContext {
   date: TimeStamp

packages/rum-core/test/fixtures.ts

@@ -8,7 +8,6 @@ import {
   relativeNow,
   ResourceType,
 } from '@datadog/browser-core'
-import { RumPerformanceEntryType } from '../src/browser/performanceCollection'
 import type {
   RumFirstInputTiming,
   RumLargestContentfulPaintTiming,
@@ -19,8 +18,9 @@ import type {
   RumPerformancePaintTiming,
   RumPerformanceResourceTiming,
 } from '../src/browser/performanceCollection'
+import { RumPerformanceEntryType } from '../src/browser/performanceCollection'
 import type { RawRumEvent } from '../src/rawRumEvent.types'
-import { ActionType, RumEventType, ViewLoadingType } from '../src/rawRumEvent.types'
+import { VitalType, ActionType, RumEventType, ViewLoadingType } from '../src/rawRumEvent.types'
 
 export function createRawRumEvent(type: RumEventType, overrides?: Context): RawRumEvent {
   switch (type) {
@@ -39,6 +39,21 @@ export function createRawRumEvent(type: RumEventType, overrides?: Context): RawR
         },
         overrides
       )
+    case RumEventType.VITAL:
+      return combine(
+        {
+          type,
+          date: 0 as TimeStamp,
+          vital: {
+            id: generateUUID(),
+            type: VitalType.DURATION,
+            custom: {
+              timing: 0 as ServerDuration,
+            },
+          },
+        },
+        overrides
+      )
     case RumEventType.LONG_TASK:
       return combine(
         {

packages/rum/src/entries/main.ts

@@ -18,6 +18,7 @@ export {
   RumLongTaskEvent,
   RumResourceEvent,
   RumViewEvent,
+  RumVitalEvent,
   // Events context
   RumEventDomainContext,
   RumViewEventDomainContext,