✨ [RUM-12133] Track GraphQl Response (#3921)

* Track GraphQl Request

* format update

* update rum-events-format

* cherry pick commit so view is not optional anymore

* 🥜 nitpicks and format

* 👌 Helper function for request collection test

* 👌 Use a mutable context and update relative test + move xhr extraction

* 👌 Synchronous function / Cast simplification / Error Handling

* 👌 move parseGraphQLResponse function

* 👌 Merge the two readReponseFunction

* 👌 do not collect if not needed / remove useless check / simplify string check

* 🐛 Fix useless cast

* 🥜 Modify comment

* use concatBuffers in readBytesFromStream

* convert readBytesFromStream to an async function

* change fetchObservable to use await

* fetch body directly in `fetchObservable`

* remove bytes limit support from readByteFromStream

* use safeTruncate in logs error collection

* 🐛 Fix Build & Lint

* 👌 Remove some test / rename to requestBody / remove responseText for responseBody

* Add new test after refactor

* 👌 Reduce error check size

* Fix unit test related to errors

* Prettier

* 👌 Nitpick / Add comments on refactor / Add missing tests

* Nitpicks / clean code

* Avoid future issue with fetch test

---------

Co-authored-by: Benoit Zugmeyer <[email protected]>

Author: rgaignault

packages/core/src/browser/fetchObservable.spec.ts

@@ -2,7 +2,7 @@ import type { MockFetch, MockFetchManager } from '../../test'
 import { registerCleanupTask, mockFetch } from '../../test'
 import type { Subscription } from '../tools/observable'
 import type { FetchResolveContext, FetchContext } from './fetchObservable'
-import { initFetchObservable } from './fetchObservable'
+import { initFetchObservable, resetFetchObservable, ResponseBodyAction } from './fetchObservable'
 
 describe('fetch proxy', () => {
   const FAKE_URL = 'http://fake-url/'
@@ -30,6 +30,7 @@ describe('fetch proxy', () => {
     registerCleanupTask(() => {
       requestsTrackingSubscription.unsubscribe()
       contextEditionSubscription?.unsubscribe()
+      resetFetchObservable()
     })
   })
 
@@ -265,3 +266,69 @@ describe('fetch proxy', () => {
     })
   })
 })
+
+describe('fetch proxy with ResponseBodyAction', () => {
+  const FAKE_URL = 'http://fake-url/'
+  let mockFetchManager: MockFetchManager
+  let requestsTrackingSubscription: Subscription
+  let requests: FetchResolveContext[]
+  let fetch: MockFetch
+
+  function setupFetchTracking(responseBodyAction: () => ResponseBodyAction) {
+    mockFetchManager = mockFetch()
+    requests = []
+    requestsTrackingSubscription = initFetchObservable({ responseBodyAction }).subscribe((context) => {
+      if (context.state === 'resolve') {
+        requests.push(context)
+      }
+    })
+    fetch = window.fetch as MockFetch
+  }
+
+  afterEach(() => {
+    requestsTrackingSubscription?.unsubscribe()
+    resetFetchObservable()
+  })
+
+  it('should collect response body with COLLECT action', (done) => {
+    setupFetchTracking(() => ResponseBodyAction.COLLECT)
+
+    fetch(FAKE_URL).resolveWith({ status: 200, responseText: 'response body content' })
+
+    mockFetchManager.whenAllComplete(() => {
+      expect(requests[0].responseBody).toBe('response body content')
+      done()
+    })
+  })
+
+  it('should not collect response body with WAIT or IGNORE action', (done) => {
+    setupFetchTracking(() => ResponseBodyAction.WAIT)
+
+    fetch(FAKE_URL).resolveWith({ status: 200, responseText: 'response body content' })
+
+    mockFetchManager.whenAllComplete(() => {
+      expect(requests[0].responseBody).toBeUndefined()
+      done()
+    })
+  })
+
+  it('should use the highest priority action when multiple getters are registered', (done) => {
+    setupFetchTracking(() => ResponseBodyAction.WAIT)
+
+    initFetchObservable({
+      responseBodyAction: () => ResponseBodyAction.COLLECT,
+    })
+
+    registerCleanupTask(() => {
+      requestsTrackingSubscription.unsubscribe()
+    })
+
+    fetch = window.fetch as MockFetch
+    fetch(FAKE_URL).resolveWith({ status: 200, responseText: 'response body content' })
+
+    mockFetchManager.whenAllComplete(() => {
+      expect(requests[0].responseBody).toBe('response body content')
+      done()
+    })
+  })
+})

packages/core/src/browser/fetchObservable.ts

@@ -1,12 +1,14 @@
 import type { InstrumentedMethodCall } from '../tools/instrumentMethod'
 import { instrumentMethod } from '../tools/instrumentMethod'
-import { monitor } from '../tools/monitor'
+import { monitorError } from '../tools/monitor'
 import { Observable } from '../tools/observable'
 import type { ClocksState } from '../tools/utils/timeUtils'
 import { clocksNow } from '../tools/utils/timeUtils'
 import { normalizeUrl } from '../tools/utils/urlPolyfill'
 import type { GlobalObject } from '../tools/globalObject'
 import { globalObject } from '../tools/globalObject'
+import { readBytesFromStream } from '../tools/readBytesFromStream'
+import { tryToClone } from '../tools/utils/responseUtils'
 
 interface FetchContextBase {
   method: string
@@ -25,16 +27,35 @@ export interface FetchResolveContext extends FetchContextBase {
   state: 'resolve'
   status: number
   response?: Response
+  responseBody?: string
   responseType?: string
   isAborted: boolean
   error?: Error
 }
 
 export type FetchContext = FetchStartContext | FetchResolveContext
 
+type ResponseBodyActionGetter = (context: FetchResolveContext) => ResponseBodyAction
+
+/**
+ * Action to take with the response body of a fetch request.
+ * Values are ordered by priority: higher values take precedence when multiple actions are requested.
+ */
+export const enum ResponseBodyAction {
+  IGNORE = 0,
+  // TODO(next-major): Remove the "WAIT" action when `trackEarlyRequests` is removed, as the
+  // duration of fetch requests will always come from PerformanceResourceTiming
+  WAIT = 1,
+  COLLECT = 2,
+}
+
 let fetchObservable: Observable<FetchContext> | undefined
+const responseBodyActionGetters: ResponseBodyActionGetter[] = []
 
-export function initFetchObservable() {
+export function initFetchObservable({ responseBodyAction }: { responseBodyAction?: ResponseBodyActionGetter } = {}) {
+  if (responseBodyAction) {
+    responseBodyActionGetters.push(responseBodyAction)
+  }
   if (!fetchObservable) {
     fetchObservable = createFetchObservable()
   }
@@ -43,6 +64,7 @@ export function initFetchObservable() {
 
 export function resetFetchObservable() {
   fetchObservable = undefined
+  responseBodyActionGetters.length = 0
 }
 
 function createFetchObservable() {
@@ -90,38 +112,51 @@ function beforeSend(
   parameters[0] = context.input as RequestInfo | URL
   parameters[1] = context.init
 
-  onPostCall((responsePromise) => afterSend(observable, responsePromise, context))
+  onPostCall((responsePromise) => {
+    afterSend(observable, responsePromise, context).catch(monitorError)
+  })
 }
 
-function afterSend(
+async function afterSend(
   observable: Observable<FetchContext>,
   responsePromise: Promise<Response>,
   startContext: FetchStartContext
 ) {
   const context = startContext as unknown as FetchResolveContext
+  context.state = 'resolve'
+
+  let response: Response
 
-  function reportFetch(partialContext: Partial<FetchResolveContext>) {
-    context.state = 'resolve'
-    Object.assign(context, partialContext)
+  try {
+    response = await responsePromise
+  } catch (error) {
+    context.status = 0
+    context.isAborted =
+      context.init?.signal?.aborted || (error instanceof DOMException && error.code === DOMException.ABORT_ERR)
+    context.error = error as Error
     observable.notify(context)
+    return
   }
 
-  responsePromise.then(
-    monitor((response) => {
-      reportFetch({
-        response,
-        responseType: response.type,
-        status: response.status,
-        isAborted: false,
-      })
-    }),
-    monitor((error: Error) => {
-      reportFetch({
-        status: 0,
-        isAborted:
-          context.init?.signal?.aborted || (error instanceof DOMException && error.code === DOMException.ABORT_ERR),
-        error,
+  context.response = response
+  context.status = response.status
+  context.responseType = response.type
+  context.isAborted = false
+
+  const responseBodyCondition = responseBodyActionGetters.reduce(
+    (action, getter) => Math.max(action, getter(context)),
+    ResponseBodyAction.IGNORE
+  ) as ResponseBodyAction
+
+  if (responseBodyCondition !== ResponseBodyAction.IGNORE) {
+    const clonedResponse = tryToClone(response)
+    if (clonedResponse && clonedResponse.body) {
+      const bytes = await readBytesFromStream(clonedResponse.body, {
+        collectStreamBody: responseBodyCondition === ResponseBodyAction.COLLECT,
       })
-    })
-  )
+      context.responseBody = bytes && new TextDecoder().decode(bytes)
+    }
+  }
+
+  observable.notify(context)
 }

packages/core/src/browser/xhrObservable.ts

@@ -20,13 +20,14 @@ export interface XhrStartContext extends Omit<XhrOpenContext, 'state'> {
   isAborted: boolean
   xhr: XMLHttpRequest
   handlingStack?: string
-  body?: unknown
+  requestBody?: unknown
 }
 
 export interface XhrCompleteContext extends Omit<XhrStartContext, 'state'> {
   state: 'complete'
   duration: Duration
   status: number
+  responseBody?: string
 }
 
 export type XhrContext = XhrOpenContext | XhrStartContext | XhrCompleteContext
@@ -88,7 +89,7 @@ function sendXhr(
   startContext.isAborted = false
   startContext.xhr = xhr
   startContext.handlingStack = handlingStack
-  startContext.body = body
+  startContext.requestBody = body
 
   let hasBeenReported = false
 
@@ -114,6 +115,9 @@ function sendXhr(
     completeContext.state = 'complete'
     completeContext.duration = elapsed(startContext.startClocks.timeStamp, timeStampNow())
     completeContext.status = xhr.status
+    if (typeof xhr.response === 'string') {
+      completeContext.responseBody = xhr.response
+    }
     observable.notify(shallowClone(completeContext))
   }
 

packages/core/src/index.ts

@@ -105,7 +105,7 @@ export type { CookieStore, WeakRef, WeakRefConstructor } from './browser/browser
 export type { XhrCompleteContext, XhrStartContext } from './browser/xhrObservable'
 export { initXhrObservable } from './browser/xhrObservable'
 export type { FetchResolveContext, FetchStartContext, FetchContext } from './browser/fetchObservable'
-export { initFetchObservable, resetFetchObservable } from './browser/fetchObservable'
+export { initFetchObservable, resetFetchObservable, ResponseBodyAction } from './browser/fetchObservable'
 export type { PageMayExitEvent } from './browser/pageMayExitObservable'
 export { createPageMayExitObservable, PageExitReason, isPageExitReason } from './browser/pageMayExitObservable'
 export * from './browser/addEventListener'