⚗️ [RUM-11434] GraphQL support (#3805)

* ✨ Add support for GraphQL URL configuration and metadata extraction

* mend

* 🎨 prettier

* update rum-event format

* extract function  computeGraphQlData  / utilize truncate function from repo /

* update path

* update path

* nit and return definition

* remove trim for query

* ✨ Add XHR support

* Trim body

* Shorter function, isNonEmptyArray function, unify naming

* Add E2E test

* Add a warning for non supported Request object

* Add a feature flag for graphql tracking

* Rum event format

* update e2e test

* 🥜 Nitpick, Mapping and logic extraction

* 🐛 Missing test and warning for all types

* 🐛 Add missing test for warning

* 🐛 Improve warning detection + remove unecesseray undefined

* 🐛 prettier

* 🐛 update e2e expectation value for warning

* Remove warning for saving bytes

* nitpick : Inline requestBody

Author: rgaignault

packages/core/src/browser/xhrObservable.ts

@@ -20,6 +20,7 @@ export interface XhrStartContext extends Omit<XhrOpenContext, 'state'> {
   isAborted: boolean
   xhr: XMLHttpRequest
   handlingStack?: string
+  body?: unknown
 }
 
 export interface XhrCompleteContext extends Omit<XhrStartContext, 'state'> {
@@ -72,7 +73,7 @@ function openXhr({ target: xhr, parameters: [method, url] }: InstrumentedMethodC
 }
 
 function sendXhr(
-  { target: xhr, handlingStack }: InstrumentedMethodCall<XMLHttpRequest, 'send'>,
+  { target: xhr, parameters: [body], handlingStack }: InstrumentedMethodCall<XMLHttpRequest, 'send'>,
   configuration: Configuration,
   observable: Observable<XhrContext>
 ) {
@@ -87,6 +88,7 @@ function sendXhr(
   startContext.isAborted = false
   startContext.xhr = xhr
   startContext.handlingStack = handlingStack
+  startContext.body = body
 
   let hasBeenReported = false
 

packages/core/src/tools/experimentalFeatures.ts

@@ -18,6 +18,7 @@ export enum ExperimentalFeature {
   WRITABLE_RESOURCE_GRAPHQL = 'writable_resource_graphql',
   EARLY_REQUEST_COLLECTION = 'early_request_collection',
   USE_TREE_WALKER_FOR_ACTION_NAME = 'use_tree_walker_for_action_name',
+  GRAPHQL_TRACKING = 'graphql_tracking',
   FEATURE_OPERATION_VITAL = 'feature_operation_vital',
   SHORT_SESSION_INVESTIGATION = 'short_session_investigation',
 }

packages/core/src/tools/utils/arrayUtils.ts

@@ -10,3 +10,6 @@ export function removeItem<T>(array: T[], item: T) {
     array.splice(index, 1)
   }
 }
+export function isNonEmptyArray<T>(value: unknown): value is T[] {
+  return Array.isArray(value) && value.length > 0
+}

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

@@ -511,6 +511,60 @@ describe('validateAndBuildRumConfiguration', () => {
       expect(displayWarnSpy).toHaveBeenCalledOnceWith('trackFeatureFlagsForEvents should be an array')
     })
   })
+
+  describe('allowedGraphQlUrls', () => {
+    it('defaults to an empty array', () => {
+      const configuration = validateAndBuildRumConfiguration(DEFAULT_INIT_CONFIGURATION)!
+      expect(configuration.allowedGraphQlUrls).toEqual([])
+    })
+
+    it('should accept string URLs', () => {
+      const configuration = validateAndBuildRumConfiguration({
+        ...DEFAULT_INIT_CONFIGURATION,
+        allowedGraphQlUrls: ['https://api.example.com/graphql', '/graphql'],
+      })!
+      expect(configuration.allowedGraphQlUrls).toEqual([
+        { match: 'https://api.example.com/graphql', trackPayload: false },
+        { match: '/graphql', trackPayload: false },
+      ])
+    })
+
+    it('should accept MatchOption objects', () => {
+      const configuration = validateAndBuildRumConfiguration({
+        ...DEFAULT_INIT_CONFIGURATION,
+        allowedGraphQlUrls: [{ match: /\/graphql$/i }, { match: 'https://api.example.com/graphql' }],
+      })!
+      expect(configuration.allowedGraphQlUrls).toEqual([
+        { match: /\/graphql$/i, trackPayload: false },
+        { match: 'https://api.example.com/graphql', trackPayload: false },
+      ])
+    })
+
+    it('should accept function matchers', () => {
+      const customMatcher = (url: string) => url.includes('graphql')
+      const configuration = validateAndBuildRumConfiguration({
+        ...DEFAULT_INIT_CONFIGURATION,
+        allowedGraphQlUrls: [{ match: customMatcher }],
+      })!
+      expect(configuration.allowedGraphQlUrls).toEqual([{ match: customMatcher, trackPayload: false }])
+    })
+
+    it('should accept GraphQL options with trackPayload', () => {
+      const configuration = validateAndBuildRumConfiguration({
+        ...DEFAULT_INIT_CONFIGURATION,
+        allowedGraphQlUrls: [{ match: '/graphql', trackPayload: true }],
+      })!
+      expect(configuration.allowedGraphQlUrls).toEqual([{ match: '/graphql', trackPayload: true }])
+    })
+
+    it('should reject invalid values', () => {
+      validateAndBuildRumConfiguration({
+        ...DEFAULT_INIT_CONFIGURATION,
+        allowedGraphQlUrls: 'not-an-array' as any,
+      })
+      expect(displayWarnSpy).toHaveBeenCalledOnceWith('allowedGraphQlUrls should be an array')
+    })
+  })
 })
 
 describe('serializeRumConfiguration', () => {
@@ -523,6 +577,7 @@ describe('serializeRumConfiguration', () => {
       workerUrl: './worker.js',
       compressIntakeRequests: true,
       allowedTracingUrls: ['foo'],
+      allowedGraphQlUrls: ['bar'],
       traceSampleRate: 50,
       traceContextInjection: TraceContextInjection.ALL,
       defaultPrivacyLevel: 'allow',
@@ -546,7 +601,12 @@ describe('serializeRumConfiguration', () => {
 
     type MapRumInitConfigurationKey<Key extends string> = Key extends keyof InitConfiguration
       ? MapInitConfigurationKey<Key>
-      : Key extends 'workerUrl' | 'allowedTracingUrls' | 'excludedActivityUrls' | 'remoteConfigurationProxy'
+      : Key extends
+            | 'workerUrl'
+            | 'allowedTracingUrls'
+            | 'excludedActivityUrls'
+            | 'remoteConfigurationProxy'
+            | 'allowedGraphQlUrls'
         ? `use_${CamelToSnakeCase<Key>}`
         : Key extends 'trackLongTasks'
           ? 'track_long_task' // oops
@@ -557,7 +617,9 @@ describe('serializeRumConfiguration', () => {
     // By specifying the type here, we can ensure that serializeConfiguration is returning an
     // object containing all expected properties.
     const serializedConfiguration: ExtractTelemetryConfiguration<
-      MapRumInitConfigurationKey<keyof RumInitConfiguration> | 'selected_tracing_propagators'
+      | MapRumInitConfigurationKey<keyof RumInitConfiguration>
+      | 'selected_tracing_propagators'
+      | 'use_track_graph_ql_payload'
     > = serializeRumConfiguration(exhaustiveRumInitConfiguration)
 
     expect(serializedConfiguration).toEqual({
@@ -567,6 +629,8 @@ describe('serializeRumConfiguration', () => {
       trace_context_injection: TraceContextInjection.ALL,
       propagate_trace_baggage: true,
       use_allowed_tracing_urls: true,
+      use_allowed_graph_ql_urls: true,
+      use_track_graph_ql_payload: false,
       selected_tracing_propagators: ['tracecontext', 'datadog'],
       use_excluded_activity_urls: true,
       track_user_interactions: true,

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

@@ -10,6 +10,7 @@ import {
   validateAndBuildConfiguration,
   isSampleRate,
   isNumber,
+  isNonEmptyArray,
 } from '@datadog/browser-core'
 import type { RumEventDomainContext } from '../../domainContext.types'
 import type { RumEvent } from '../../rumEvent.types'
@@ -220,12 +221,24 @@ export interface RumInitConfiguration extends InitConfiguration {
    * @defaultValue 0
    */
   profilingSampleRate?: number | undefined
+
+  /**
+   * A list of GraphQL endpoint URLs to track and enrich with GraphQL-specific metadata.
+   *
+   * @category Data Collection
+   */
+  allowedGraphQlUrls?: Array<MatchOption | GraphQlUrlOption> | undefined
 }
 
 export type HybridInitConfiguration = Omit<RumInitConfiguration, 'applicationId' | 'clientToken'>
 
 export type FeatureFlagsForEvents = 'vital' | 'action' | 'long_task' | 'resource'
 
+export interface GraphQlUrlOption {
+  match: MatchOption
+  trackPayload?: boolean
+}
+
 export interface RumConfiguration extends Configuration {
   // Built from init configuration
   actionNameAttribute: string | undefined
@@ -254,6 +267,7 @@ export interface RumConfiguration extends Configuration {
   trackFeatureFlagsForEvents: FeatureFlagsForEvents[]
   profilingSampleRate: number
   propagateTraceBaggage: boolean
+  allowedGraphQlUrls: GraphQlUrlOption[]
 }
 
 export function validateAndBuildRumConfiguration(
@@ -288,6 +302,8 @@ export function validateAndBuildRumConfiguration(
     return
   }
 
+  const allowedGraphQlUrls = validateAndBuildGraphQlOptions(initConfiguration)
+
   const baseConfiguration = validateAndBuildConfiguration(initConfiguration)
   if (!baseConfiguration) {
     return
@@ -329,6 +345,7 @@ export function validateAndBuildRumConfiguration(
     trackFeatureFlagsForEvents: initConfiguration.trackFeatureFlagsForEvents || [],
     profilingSampleRate: initConfiguration.profilingSampleRate ?? 0,
     propagateTraceBaggage: !!initConfiguration.propagateTraceBaggage,
+    allowedGraphQlUrls,
     ...baseConfiguration,
   }
 }
@@ -372,7 +389,7 @@ function validateAndBuildTracingOptions(initConfiguration: RumInitConfiguration)
 function getSelectedTracingPropagators(configuration: RumInitConfiguration): PropagatorType[] {
   const usedTracingPropagators = new Set<PropagatorType>()
 
-  if (Array.isArray(configuration.allowedTracingUrls) && configuration.allowedTracingUrls.length > 0) {
+  if (isNonEmptyArray(configuration.allowedTracingUrls)) {
     configuration.allowedTracingUrls.forEach((option) => {
       if (isMatchOption(option)) {
         DEFAULT_PROPAGATOR_TYPES.forEach((propagatorType) => usedTracingPropagators.add(propagatorType))
@@ -386,6 +403,47 @@ function getSelectedTracingPropagators(configuration: RumInitConfiguration): Pro
   return Array.from(usedTracingPropagators)
 }
 
+/**
+ * Build GraphQL options from configuration
+ */
+function validateAndBuildGraphQlOptions(initConfiguration: RumInitConfiguration): GraphQlUrlOption[] {
+  if (!initConfiguration.allowedGraphQlUrls) {
+    return []
+  }
+
+  if (!Array.isArray(initConfiguration.allowedGraphQlUrls)) {
+    display.warn('allowedGraphQlUrls should be an array')
+    return []
+  }
+
+  const graphQlOptions: GraphQlUrlOption[] = []
+
+  initConfiguration.allowedGraphQlUrls.forEach((option) => {
+    if (isMatchOption(option)) {
+      graphQlOptions.push({ match: option, trackPayload: false })
+    } else if (option && typeof option === 'object' && 'match' in option && isMatchOption(option.match)) {
+      graphQlOptions.push({
+        match: option.match,
+        trackPayload: !!option.trackPayload,
+      })
+    }
+  })
+
+  return graphQlOptions
+}
+
+function hasGraphQlPayloadTracking(allowedGraphQlUrls: RumInitConfiguration['allowedGraphQlUrls']): boolean {
+  return (
+    isNonEmptyArray(allowedGraphQlUrls) &&
+    allowedGraphQlUrls.some((option) => {
+      if (typeof option === 'object' && 'trackPayload' in option) {
+        return !!option.trackPayload
+      }
+      return false
+    })
+  )
+}
+
 export function serializeRumConfiguration(configuration: RumInitConfiguration) {
   const baseSerializedConfiguration = serializeConfiguration(configuration)
 
@@ -396,13 +454,13 @@ export function serializeRumConfiguration(configuration: RumInitConfiguration) {
     trace_context_injection: configuration.traceContextInjection,
     propagate_trace_baggage: configuration.propagateTraceBaggage,
     action_name_attribute: configuration.actionNameAttribute,
-    use_allowed_tracing_urls:
-      Array.isArray(configuration.allowedTracingUrls) && configuration.allowedTracingUrls.length > 0,
+    use_allowed_tracing_urls: isNonEmptyArray(configuration.allowedTracingUrls),
+    use_allowed_graph_ql_urls: isNonEmptyArray(configuration.allowedGraphQlUrls),
+    use_track_graph_ql_payload: hasGraphQlPayloadTracking(configuration.allowedGraphQlUrls),
     selected_tracing_propagators: getSelectedTracingPropagators(configuration),
     default_privacy_level: configuration.defaultPrivacyLevel,
     enable_privacy_for_action_name: configuration.enablePrivacyForActionName,
-    use_excluded_activity_urls:
-      Array.isArray(configuration.excludedActivityUrls) && configuration.excludedActivityUrls.length > 0,
+    use_excluded_activity_urls: isNonEmptyArray(configuration.excludedActivityUrls),
     use_worker_url: !!configuration.workerUrl,
     compress_intake_requests: configuration.compressIntakeRequests,
     track_views_manually: configuration.trackViewsManually,

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

@@ -59,6 +59,7 @@ export interface RequestCompleteEvent {
   error?: Error
   isAborted: boolean
   handlingStack?: string
+  body?: unknown
 }
 
 let nextRequestIndex = 1
@@ -108,6 +109,7 @@ export function trackXhr(lifeCycle: LifeCycle, configuration: RumConfiguration,
           xhr: context.xhr,
           isAborted: context.isAborted,
           handlingStack: context.handlingStack,
+          body: context.body,
         })
         break
     }
@@ -153,6 +155,7 @@ export function trackFetch(lifeCycle: LifeCycle, tracer: Tracer) {
             input: context.input,
             isAborted: context.isAborted,
             handlingStack: context.handlingStack,
+            body: context.init?.body,
           })
         })
         break