✨ [RUM-12133] Track GraphQl Response

packages/core/src/domain/telemetry/telemetryEvent.types.ts

@@ -217,6 +217,10 @@ export type TelemetryConfigurationEvent = CommonTelemetryProperties & {
        * Whether GraphQL payload tracking is used for at least one GraphQL endpoint
        */
       use_track_graph_ql_payload?: boolean
+      /**
+       * Whether GraphQL response errors tracking is used for at least one GraphQL endpoint
+       */
+      use_track_graph_ql_response_errors?: boolean
       /**
        * A list of selected tracing propagators
        */

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

@@ -524,8 +524,8 @@ describe('validateAndBuildRumConfiguration', () => {
         allowedGraphQlUrls: ['https://api.example.com/graphql', '/graphql'],
       })!
       expect(configuration.allowedGraphQlUrls).toEqual([
-        { match: 'https://api.example.com/graphql', trackPayload: false },
-        { match: '/graphql', trackPayload: false },
+        { match: 'https://api.example.com/graphql', trackPayload: false, trackResponseErrors: false },
+        { match: '/graphql', trackPayload: false, trackResponseErrors: false },
       ])
     })
 
@@ -535,8 +535,8 @@ describe('validateAndBuildRumConfiguration', () => {
         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 },
+        { match: /\/graphql$/i, trackPayload: false, trackResponseErrors: false },
+        { match: 'https://api.example.com/graphql', trackPayload: false, trackResponseErrors: false },
       ])
     })
 
@@ -546,15 +546,29 @@ describe('validateAndBuildRumConfiguration', () => {
         ...DEFAULT_INIT_CONFIGURATION,
         allowedGraphQlUrls: [{ match: customMatcher }],
       })!
-      expect(configuration.allowedGraphQlUrls).toEqual([{ match: customMatcher, trackPayload: false }])
+      expect(configuration.allowedGraphQlUrls).toEqual([
+        { match: customMatcher, trackPayload: false, trackResponseErrors: 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 }])
+      expect(configuration.allowedGraphQlUrls).toEqual([
+        { match: '/graphql', trackPayload: true, trackResponseErrors: false },
+      ])
+    })
+
+    it('should accept GraphQL options with trackResponseErrors', () => {
+      const configuration = validateAndBuildRumConfiguration({
+        ...DEFAULT_INIT_CONFIGURATION,
+        allowedGraphQlUrls: [{ match: '/graphql', trackResponseErrors: true }],
+      })!
+      expect(configuration.allowedGraphQlUrls).toEqual([
+        { match: '/graphql', trackResponseErrors: true, trackPayload: false },
+      ])
     })
 
     it('should reject invalid values', () => {
@@ -621,6 +635,7 @@ describe('serializeRumConfiguration', () => {
       | MapRumInitConfigurationKey<keyof RumInitConfiguration>
       | 'selected_tracing_propagators'
       | 'use_track_graph_ql_payload'
+      | 'use_track_graph_ql_response_errors'
     > = serializeRumConfiguration(exhaustiveRumInitConfiguration)
 
     expect(serializedConfiguration).toEqual({
@@ -632,6 +647,7 @@ describe('serializeRumConfiguration', () => {
       use_allowed_tracing_urls: true,
       use_allowed_graph_ql_urls: true,
       use_track_graph_ql_payload: false,
+      use_track_graph_ql_response_errors: false,
       selected_tracing_propagators: ['tracecontext', 'datadog'],
       use_excluded_activity_urls: true,
       track_user_interactions: true,

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

@@ -280,6 +280,7 @@ export type FeatureFlagsForEvents = 'vital' | 'action' | 'long_task' | 'resource
 export interface GraphQlUrlOption {
   match: MatchOption
   trackPayload?: boolean
+  trackResponseErrors?: boolean
 }
 
 export interface RumConfiguration extends Configuration {
@@ -461,11 +462,12 @@ function validateAndBuildGraphQlOptions(initConfiguration: RumInitConfiguration)
 
   initConfiguration.allowedGraphQlUrls.forEach((option) => {
     if (isMatchOption(option)) {
-      graphQlOptions.push({ match: option, trackPayload: false })
+      graphQlOptions.push({ match: option, trackPayload: false, trackResponseErrors: false })
     } else if (option && typeof option === 'object' && 'match' in option && isMatchOption(option.match)) {
       graphQlOptions.push({
         match: option.match,
         trackPayload: !!option.trackPayload,
+        trackResponseErrors: !!option.trackResponseErrors,
       })
     }
   })
@@ -485,6 +487,18 @@ function hasGraphQlPayloadTracking(allowedGraphQlUrls: RumInitConfiguration['all
   )
 }
 
+function hasGraphQlResponseErrorsTracking(allowedGraphQlUrls: RumInitConfiguration['allowedGraphQlUrls']): boolean {
+  return (
+    isNonEmptyArray(allowedGraphQlUrls) &&
+    allowedGraphQlUrls.some((option) => {
+      if (typeof option === 'object' && 'trackResponseErrors' in option) {
+        return !!option.trackResponseErrors
+      }
+      return false
+    })
+  )
+}
+
 export function serializeRumConfiguration(configuration: RumInitConfiguration) {
   const baseSerializedConfiguration = serializeConfiguration(configuration)
 
@@ -498,6 +512,7 @@ export function serializeRumConfiguration(configuration: RumInitConfiguration) {
     use_allowed_tracing_urls: isNonEmptyArray(configuration.allowedTracingUrls),
     use_allowed_graph_ql_urls: isNonEmptyArray(configuration.allowedGraphQlUrls),
     use_track_graph_ql_payload: hasGraphQlPayloadTracking(configuration.allowedGraphQlUrls),
+    use_track_graph_ql_response_errors: hasGraphQlResponseErrorsTracking(configuration.allowedGraphQlUrls),
     selected_tracing_propagators: getSelectedTracingPropagators(configuration),
     default_privacy_level: configuration.defaultPrivacyLevel,
     enable_privacy_for_action_name: configuration.enablePrivacyForActionName,

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

@@ -35,7 +35,7 @@ describe('collect fetch', () => {
         context.spanId = createSpanIdentifier()
       },
     }
-    ;({ stop: stopFetchTracking } = trackFetch(lifeCycle, tracerStub as Tracer))
+    ;({ stop: stopFetchTracking } = trackFetch(lifeCycle, mockRumConfiguration(), tracerStub as Tracer))
 
     fetch = window.fetch as MockFetch
 
@@ -335,3 +335,70 @@ describe('collect xhr', () => {
     })
   })
 })
+
+describe('GraphQL response errors tracking', () => {
+  const FAKE_GRAPHQL_URL = 'http://fake-url/graphql'
+
+  it('should extract GraphQL errors when trackResponseErrors is enabled', (done) => {
+    const mockFetchManager = mockFetch()
+    const completeSpy = jasmine.createSpy('requestComplete')
+    const lifeCycle = new LifeCycle()
+    lifeCycle.subscribe(LifeCycleEventType.REQUEST_COMPLETED, completeSpy)
+
+    const configuration = mockRumConfiguration({
+      allowedGraphQlUrls: [{ match: /\/graphql$/, trackResponseErrors: true }],
+    })
+    const tracerStub: Partial<Tracer> = { clearTracingIfNeeded, traceFetch: jasmine.createSpy() }
+    const { stop } = trackFetch(lifeCycle, configuration, tracerStub as Tracer)
+    registerCleanupTask(stop)
+
+    const fetch = window.fetch as MockFetch
+    fetch(FAKE_GRAPHQL_URL, {
+      method: 'POST',
+      body: JSON.stringify({ query: 'query Test { test }' }),
+    }).resolveWith({
+      status: 200,
+      responseText: JSON.stringify({
+        data: null,
+        errors: [{ message: 'Not found' }, { message: 'Unauthorized' }],
+      }),
+    })
+
+    mockFetchManager.whenAllComplete(() => {
+      const request = completeSpy.calls.argsFor(0)[0]
+      expect(request.graphqlErrorsCount).toBe(2)
+      expect(request.graphqlErrors).toEqual([{ message: 'Not found' }, { message: 'Unauthorized' }])
+      done()
+    })
+  })
+
+  it('should not extract GraphQL errors when trackResponseErrors is false', (done) => {
+    const mockFetchManager = mockFetch()
+    const completeSpy = jasmine.createSpy('requestComplete')
+    const lifeCycle = new LifeCycle()
+    lifeCycle.subscribe(LifeCycleEventType.REQUEST_COMPLETED, completeSpy)
+
+    const configuration = mockRumConfiguration({
+      allowedGraphQlUrls: [{ match: /\/graphql$/, trackResponseErrors: false }],
+    })
+    const tracerStub: Partial<Tracer> = { clearTracingIfNeeded, traceFetch: jasmine.createSpy() }
+    const { stop } = trackFetch(lifeCycle, configuration, tracerStub as Tracer)
+    registerCleanupTask(stop)
+
+    const fetch = window.fetch as MockFetch
+    fetch(FAKE_GRAPHQL_URL, {
+      method: 'POST',
+      body: JSON.stringify({ query: 'query Test { test }' }),
+    }).resolveWith({
+      status: 200,
+      responseText: JSON.stringify({ errors: [{ message: 'Error' }] }),
+    })
+
+    mockFetchManager.whenAllComplete(() => {
+      const request = completeSpy.calls.argsFor(0)[0]
+      expect(request.graphqlErrorsCount).toBeUndefined()
+      expect(request.graphqlErrors).toBeUndefined()
+      done()
+    })
+  })
+})

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

@@ -24,6 +24,8 @@ import { isAllowedRequestUrl } from './resource/resourceUtils'
 import type { Tracer } from './tracing/tracer'
 import { startTracer } from './tracing/tracer'
 import type { SpanIdentifier, TraceIdentifier } from './tracing/identifier'
+import type { GraphQlError } from './resource/graphql'
+import { findGraphQlConfiguration, parseGraphQlResponse } from './resource/graphql'
 
 export interface CustomContext {
   requestIndex: number
@@ -60,6 +62,8 @@ export interface RequestCompleteEvent {
   isAborted: boolean
   handlingStack?: string
   body?: unknown
+  graphqlErrorsCount?: number
+  graphqlErrors?: GraphQlError[]
 }
 
 let nextRequestIndex = 1
@@ -73,7 +77,7 @@ export function startRequestCollection(
 ) {
   const tracer = startTracer(configuration, sessionManager, userContext, accountContext)
   trackXhr(lifeCycle, configuration, tracer)
-  trackFetch(lifeCycle, tracer)
+  trackFetch(lifeCycle, configuration, tracer)
 }
 
 export function trackXhr(lifeCycle: LifeCycle, configuration: RumConfiguration, tracer: Tracer) {
@@ -118,7 +122,7 @@ export function trackXhr(lifeCycle: LifeCycle, configuration: RumConfiguration,
   return { stop: () => subscription.unsubscribe() }
 }
 
-export function trackFetch(lifeCycle: LifeCycle, tracer: Tracer) {
+export function trackFetch(lifeCycle: LifeCycle, configuration: RumConfiguration, tracer: Tracer) {
   const subscription = initFetchObservable().subscribe((rawContext) => {
     const context = rawContext as RumFetchResolveContext | RumFetchStartContext
     if (!isAllowedRequestUrl(context.url)) {
@@ -136,28 +140,34 @@ export function trackFetch(lifeCycle: LifeCycle, tracer: Tracer) {
         })
         break
       case 'resolve':
-        waitForResponseToComplete(context, (duration: Duration) => {
-          tracer.clearTracingIfNeeded(context)
-          lifeCycle.notify(LifeCycleEventType.REQUEST_COMPLETED, {
-            duration,
-            method: context.method,
-            requestIndex: context.requestIndex,
-            responseType: context.responseType,
-            spanId: context.spanId,
-            startClocks: context.startClocks,
-            status: context.status,
-            traceId: context.traceId,
-            traceSampled: context.traceSampled,
-            type: RequestType.FETCH,
-            url: context.url,
-            response: context.response,
-            init: context.init,
-            input: context.input,
-            isAborted: context.isAborted,
-            handlingStack: context.handlingStack,
-            body: context.init?.body,
-          })
-        })
+        waitForResponseToComplete(
+          context,
+          configuration,
+          (duration: Duration, graphqlErrorsCount?: number, graphqlErrors?: GraphQlError[]) => {
+            tracer.clearTracingIfNeeded(context)
+            lifeCycle.notify(LifeCycleEventType.REQUEST_COMPLETED, {
+              duration,
+              method: context.method,
+              requestIndex: context.requestIndex,
+              responseType: context.responseType,
+              spanId: context.spanId,
+              startClocks: context.startClocks,
+              status: context.status,
+              traceId: context.traceId,
+              traceSampled: context.traceSampled,
+              type: RequestType.FETCH,
+              url: context.url,
+              response: context.response,
+              init: context.init,
+              input: context.input,
+              isAborted: context.isAborted,
+              handlingStack: context.handlingStack,
+              body: context.init?.body,
+              graphqlErrorsCount,
+              graphqlErrors,
+            })
+          }
+        )
         break
     }
   })
@@ -170,21 +180,37 @@ function getNextRequestIndex() {
   return result
 }
 
-function waitForResponseToComplete(context: RumFetchResolveContext, callback: (duration: Duration) => void) {
+function waitForResponseToComplete(
+  context: RumFetchResolveContext,
+  configuration: RumConfiguration,
+  callback: (duration: Duration, graphqlErrorsCount?: number, graphqlErrors?: GraphQlError[]) => void
+) {
   const clonedResponse = context.response && tryToClone(context.response)
   if (!clonedResponse || !clonedResponse.body) {
     // do not try to wait for the response if the clone failed, fetch error or null body
     callback(elapsed(context.startClocks.timeStamp, timeStampNow()))
-  } else {
-    readBytesFromStream(
-      clonedResponse.body,
-      () => {
-        callback(elapsed(context.startClocks.timeStamp, timeStampNow()))
-      },
-      {
-        bytesLimit: Number.POSITIVE_INFINITY,
-        collectStreamBody: false,
-      }
-    )
+    return
   }
+
+  const graphQlConfig = findGraphQlConfiguration(context.url, configuration)
+  const shouldExtractGraphQlErrors = graphQlConfig?.trackResponseErrors
+
+  readBytesFromStream(
+    clonedResponse.body,
+    (error?: Error, bytes?: Uint8Array) => {
+      const duration = elapsed(context.startClocks.timeStamp, timeStampNow())
+
+      if (shouldExtractGraphQlErrors && !error && bytes) {
+        parseGraphQlResponse(new TextDecoder().decode(bytes), (errorsCount, errors) => {
+          callback(duration, errorsCount, errors)
+        })
+      } else {
+        callback(duration)
+      }
+    },
+    {
+      bytesLimit: Number.POSITIVE_INFINITY,
+      collectStreamBody: shouldExtractGraphQlErrors,
+    }
+  )
 }