pr(fix): improve fetch tracking support

Author: marco-saia-datadog

packages/core/README.md

@@ -85,6 +85,11 @@ export default function App() {
 `fetch`. Direct imports retained from `expo/fetch` are not intercepted. XHR
 tracking remains enabled for clients such as axios.
 
+GraphQL error extraction (via `DatadogLink({ trackErrors: true })`) for
+requests made through `expo/fetch` requires Expo SDK 56 or later, as older
+versions of `expo/fetch` do not implement `Response.clone()`. On earlier
+versions, GraphQL metadata is still reported, but response errors are not.
+
 ### Track view navigation
 
 Because React Native offers a wide range of libraries to create screen navigation, by default only manual View tracking is supported. You can manually start and stop a View using the following `startView()` and `stopView` methods.

packages/core/src/rum/instrumentation/resourceTracking/requestProxy/FetchProxy/FetchProxy.ts

@@ -4,6 +4,10 @@
  * Copyright 2016-Present Datadog, Inc.
  */
 
+import { InternalLog } from '../../../../../InternalLog';
+import { SdkVerbosity } from '../../../../../config/types';
+import { extractGraphQLErrors } from '../../graphql/graphqlUtils';
+import { getErrorData } from '../XHRProxy/xhrUtils';
 import { callOriginalFetch } from '../common/FetchProxyState';
 import type { RequestContext } from '../common/RequestContext';
 import { createRequestContext } from '../common/RequestContext';
@@ -51,13 +55,14 @@ export class FetchProxy extends RequestProxy {
 
     onTrackingStart = (context: RequestProxyOptions) => {
         this.context = context;
-        this.originalFetch = this.providers.fetchGlobal.fetch;
+        const originalFetch = this.providers.fetchGlobal.fetch;
+        this.originalFetch = originalFetch;
 
         const installedFetch: typeof fetch = (input, init) => {
             return trackFetch({
                 input,
                 init,
-                originalFetch: this.originalFetch as typeof fetch,
+                originalFetch,
                 fetchThis: this.providers.fetchGlobal,
                 headersType: this.providers.headersType,
                 resourceReporter: this.providers.resourceReporter,
@@ -124,7 +129,15 @@ const trackFetch = async ({
 
         context.timer.recordTick(RESPONSE_START_LABEL);
         context.timer.stop();
-        reportFetch({ context, response, resourceReporter });
+        reportFetch({ context, response, resourceReporter }).catch(error => {
+            const errorData = getErrorData(error);
+            if (errorData) {
+                InternalLog.log(
+                    `reportFetch failed: ${errorData}`,
+                    SdkVerbosity.WARN
+                );
+            }
+        });
         return response;
     } catch (error) {
         context.timer.stop();
@@ -215,15 +228,36 @@ const applyHeader = ({
     }
 };
 
-const reportFetch = ({
+const reportFetch = async ({
     context,
     response,
     resourceReporter
 }: {
     context: RequestContext;
     response: Response;
     resourceReporter: ResourceReporter;
-}) => {
+}): Promise<void> => {
+    // Only extract GraphQL errors if operationType is set AND error tracking is enabled
+    if (context.graphql.operationType && context.graphql.trackErrors) {
+        try {
+            const body = await response.clone().json();
+
+            const errors = body?.errors;
+            if (Array.isArray(errors) && errors.length > 0) {
+                const filtered = extractGraphQLErrors(errors);
+
+                if (filtered.length > 0) {
+                    context.graphql.errors = filtered;
+                }
+            }
+        } catch (error) {
+            const errorData = getErrorData(error);
+            if (errorData) {
+                InternalLog.log(`reportFetch: ${errorData}`, SdkVerbosity.WARN);
+            }
+        }
+    }
+
     resourceReporter.reportResource({
         key: `${context.timer.startTime}/${context.method}`,
         request: {

packages/core/src/rum/instrumentation/resourceTracking/requestProxy/FetchProxy/__tests__/FetchProxy.test.ts

@@ -12,7 +12,10 @@ import {
     TRACKED_BY_HEADER_KEY,
     TRACKED_BY_HEADER_VALUE
 } from '../../../distributedTracing/headers';
-import { DATADOG_GRAPH_QL_OPERATION_TYPE_HEADER } from '../../../graphql/graphqlHeaders';
+import {
+    DATADOG_GRAPH_QL_ERROR_HEADER,
+    DATADOG_GRAPH_QL_OPERATION_TYPE_HEADER
+} from '../../../graphql/graphqlHeaders';
 import type { ResourceReporter } from '../../common/ResourceReporter';
 import type { RUMResource } from '../../interfaces/RumResource';
 import { FetchProxy } from '../FetchProxy';
@@ -65,17 +68,28 @@ const getOptions = (traceSampleRate = 100) => ({
 
 const createResponse = ({
     status = 200,
-    headers = {}
+    headers = {},
+    body
 }: {
     status?: number;
     headers?: Record<string, string>;
+    body?: unknown;
 } = {}) => {
-    return ({
+    const response = ({
         status,
-        headers: new HeadersMock(headers)
+        headers: new HeadersMock(headers),
+        clone() {
+            return response;
+        },
+        json: () => Promise.resolve(body)
     } as unknown) as Response;
+
+    return response;
 };
 
+const flushPromises = () =>
+    new Promise(jest.requireActual('timers').setImmediate);
+
 const createProxy = ({
     originalFetch,
     reportResource
@@ -246,4 +260,134 @@ describe('FetchProxy', () => {
 
         expect(fetchGlobal.fetch).toBe(laterFetch);
     });
+
+    it('keeps a Fetch wrapper retained by another library callable after tracking stops', async () => {
+        const response = createResponse();
+        const originalFetch = jest
+            .fn()
+            .mockResolvedValue(response) as jest.MockedFunction<typeof fetch>;
+        const { fetchGlobal, proxy } = createProxy({
+            originalFetch,
+            reportResource: jest.fn()
+        });
+        proxy.onTrackingStart(getOptions());
+
+        // Another library installs its own wrapper after Datadog, capturing
+        // Datadog's installed Fetch as its own "original" delegate.
+        const capturedDatadogFetch = fetchGlobal.fetch;
+        fetchGlobal.fetch = ((input, init) =>
+            capturedDatadogFetch(input, init)) as typeof fetch;
+
+        proxy.onTrackingStop();
+
+        await expect(
+            capturedDatadogFetch('https://api.example.com/users')
+        ).resolves.toBe(response);
+    });
+
+    describe('GraphQL error filtering', () => {
+        it('extracts GraphQL errors from the response body when error tracking is enabled', async () => {
+            const graphqlResponse = {
+                data: { user: null },
+                errors: [
+                    {
+                        message: 'User not found',
+                        locations: [{ line: 2, column: 3 }],
+                        path: ['user', 0, 'id'],
+                        extensions: { code: 'NOT_FOUND' }
+                    }
+                ]
+            };
+            const originalFetch = jest
+                .fn()
+                .mockResolvedValue(
+                    createResponse({ body: graphqlResponse })
+                ) as jest.MockedFunction<typeof fetch>;
+            const reportResource = jest.fn();
+            const { fetchGlobal, proxy } = createProxy({
+                originalFetch,
+                reportResource
+            });
+            proxy.onTrackingStart(getOptions());
+
+            await fetchGlobal.fetch('https://api.example.com/graphql', {
+                headers: {
+                    [DATADOG_GRAPH_QL_OPERATION_TYPE_HEADER]: 'query',
+                    [DATADOG_GRAPH_QL_ERROR_HEADER]: 'true'
+                }
+            });
+            await flushPromises();
+
+            const resource = reportResource.mock.calls[0][0] as RUMResource;
+            expect(resource.graphqlAttributes?.errors).toEqual([
+                {
+                    message: 'User not found',
+                    code: 'NOT_FOUND',
+                    locations: [{ line: 2, column: 3 }],
+                    path: ['user', 0, 'id']
+                }
+            ]);
+        });
+
+        it('reports without errors when the Fetch implementation does not support clone()', async () => {
+            // Some Fetch implementations (e.g. `expo/fetch` prior to Expo SDK
+            // 56) throw on `response.clone()`.
+            const response = createResponse({ body: { data: {} } });
+            response.clone = () => {
+                throw new Error('Not implemented');
+            };
+            const originalFetch = jest
+                .fn()
+                .mockResolvedValue(response) as jest.MockedFunction<
+                typeof fetch
+            >;
+            const reportResource = jest.fn();
+            const { fetchGlobal, proxy } = createProxy({
+                originalFetch,
+                reportResource
+            });
+            proxy.onTrackingStart(getOptions());
+
+            await expect(
+                fetchGlobal.fetch('https://api.example.com/graphql', {
+                    headers: {
+                        [DATADOG_GRAPH_QL_OPERATION_TYPE_HEADER]: 'query',
+                        [DATADOG_GRAPH_QL_ERROR_HEADER]: 'true'
+                    }
+                })
+            ).resolves.toBe(response);
+            await flushPromises();
+
+            const resource = reportResource.mock.calls[0][0] as RUMResource;
+            expect(resource.graphqlAttributes?.operationType).toBe('query');
+            expect(resource.graphqlAttributes?.errors).toBeUndefined();
+        });
+
+        it('does not read the response body when error tracking is disabled', async () => {
+            const response = createResponse({ body: { data: {} } });
+            const cloneSpy = jest.spyOn(response, 'clone');
+            const originalFetch = jest
+                .fn()
+                .mockResolvedValue(response) as jest.MockedFunction<
+                typeof fetch
+            >;
+            const reportResource = jest.fn();
+            const { fetchGlobal, proxy } = createProxy({
+                originalFetch,
+                reportResource
+            });
+            proxy.onTrackingStart(getOptions());
+
+            await fetchGlobal.fetch('https://api.example.com/graphql', {
+                headers: {
+                    [DATADOG_GRAPH_QL_OPERATION_TYPE_HEADER]: 'query'
+                }
+            });
+            await flushPromises();
+
+            expect(cloneSpy).not.toHaveBeenCalled();
+            const resource = reportResource.mock.calls[0][0] as RUMResource;
+            expect(resource.graphqlAttributes?.errors).toBeUndefined();
+        });
+    });
 });