Track graphql payload

cdn34dd · cdn34dd · commit f131f7ddc261 · 2025-12-18T10:42:39.000Z
diff --git a/packages/core/src/index.tsx b/packages/core/src/index.tsx
@@ -34,7 +34,8 @@ import {
 import {
     DATADOG_GRAPH_QL_OPERATION_NAME_HEADER,
     DATADOG_GRAPH_QL_OPERATION_TYPE_HEADER,
-    DATADOG_GRAPH_QL_VARIABLES_HEADER
+    DATADOG_GRAPH_QL_VARIABLES_HEADER,
+    DATADOG_GRAPH_QL_PAYLOAD_HEADER
 } from './rum/instrumentation/resourceTracking/graphql/graphqlHeaders';
 import type { FirstPartyHost } from './rum/types';
 import { ErrorSource, PropagatorType, RumActionType } from './rum/types';
@@ -74,6 +75,7 @@ export {
     DATADOG_GRAPH_QL_OPERATION_TYPE_HEADER,
     DATADOG_GRAPH_QL_OPERATION_NAME_HEADER,
     DATADOG_GRAPH_QL_VARIABLES_HEADER,
+    DATADOG_GRAPH_QL_PAYLOAD_HEADER,
     TracingIdType,
     TracingIdFormat,
     DatadogTracingIdentifier,
diff --git a/packages/core/src/rum/instrumentation/resourceTracking/graphql/graphqlHeaders.ts b/packages/core/src/rum/instrumentation/resourceTracking/graphql/graphqlHeaders.ts
@@ -1,10 +1,11 @@
-import { DATADOG_CUSTOM_HEADER_PREFIX } from '../headers';
-
 /*
  * Unless explicitly stated otherwise all files in this repository are licensed under the Apache License Version 2.0.
  * This product includes software developed at Datadog (https://www.datadoghq.com/).
  * Copyright 2016-Present Datadog, Inc.
  */
+import { DATADOG_CUSTOM_HEADER_PREFIX } from '../headers';
+
 export const DATADOG_GRAPH_QL_OPERATION_NAME_HEADER = `${DATADOG_CUSTOM_HEADER_PREFIX}-graph-ql-operation-name`;
 export const DATADOG_GRAPH_QL_VARIABLES_HEADER = `${DATADOG_CUSTOM_HEADER_PREFIX}-graph-ql-variables`;
 export const DATADOG_GRAPH_QL_OPERATION_TYPE_HEADER = `${DATADOG_CUSTOM_HEADER_PREFIX}-graph-ql-operation-type`;
+export const DATADOG_GRAPH_QL_PAYLOAD_HEADER = `${DATADOG_CUSTOM_HEADER_PREFIX}-graph-ql-payload`;
diff --git a/packages/core/src/rum/instrumentation/resourceTracking/requestProxy/XHRProxy/DatadogRumResource/ResourceReporter.ts b/packages/core/src/rum/instrumentation/resourceTracking/requestProxy/XHRProxy/DatadogRumResource/ResourceReporter.ts
@@ -74,6 +74,10 @@ const formatResourceStopContext = (
         if (graphqlAttributes.variables) {
             attributes['_dd.graphql.variables'] = graphqlAttributes.variables;
         }
+
+        if (graphqlAttributes.payload) {
+            attributes['_dd.graphql.payload'] = graphqlAttributes.payload;
+        }
     }
 
     return attributes;
diff --git a/packages/core/src/rum/instrumentation/resourceTracking/requestProxy/XHRProxy/XHRProxy.ts b/packages/core/src/rum/instrumentation/resourceTracking/requestProxy/XHRProxy/XHRProxy.ts
@@ -15,6 +15,7 @@ import { getTracingAttributes } from '../../distributedTracing/distributedTracin
 import {
     DATADOG_GRAPH_QL_OPERATION_NAME_HEADER,
     DATADOG_GRAPH_QL_OPERATION_TYPE_HEADER,
+    DATADOG_GRAPH_QL_PAYLOAD_HEADER,
     DATADOG_GRAPH_QL_VARIABLES_HEADER
 } from '../../graphql/graphqlHeaders';
 import { DATADOG_BAGGAGE_HEADER, isDatadogCustomHeader } from '../../headers';
@@ -37,6 +38,7 @@ interface DdRumXhrContext {
         operationType?: string;
         operationName?: string;
         variables?: string;
+        payload?: string;
     };
     method: string;
     url: string;
@@ -228,6 +230,7 @@ const proxySetRequestHeader = (providers: XHRProxyProviders): void => {
         value: string
     ) {
         const key = header.toLowerCase();
+        console.log('HeaderKey: ', key);
         if (isDatadogCustomHeader(key)) {
             switch (key) {
                 case DATADOG_GRAPH_QL_OPERATION_NAME_HEADER:
@@ -239,6 +242,9 @@ const proxySetRequestHeader = (providers: XHRProxyProviders): void => {
                 case DATADOG_GRAPH_QL_VARIABLES_HEADER:
                     this._datadog_xhr.graphql.variables = value;
                     break;
+                case DATADOG_GRAPH_QL_PAYLOAD_HEADER:
+                    this._datadog_xhr.graphql.payload = value;
+                    break;
                 case DATADOG_BAGGAGE_HEADER:
                     // Apply Baggage Header only if pre-processed by Datadog
                     return originalXhrSetRequestHeader.apply(this, [
diff --git a/packages/core/src/rum/instrumentation/resourceTracking/requestProxy/interfaces/RumResource.ts b/packages/core/src/rum/instrumentation/resourceTracking/requestProxy/interfaces/RumResource.ts
@@ -32,4 +32,5 @@ export type DdRumResourceGraphqlAttributes = {
     operationType?: string;
     operationName?: string;
     variables?: string;
+    payload?: string;
 };
diff --git a/packages/react-native-apollo-client/package.json b/packages/react-native-apollo-client/package.json
@@ -37,10 +37,12 @@
         "lint": "eslint .",
         "prepare": "rm -rf lib && yarn bob build"
     },
+    "dependencies": {
+        "graphql": "^16.8.0"
+    },
     "devDependencies": {
         "@apollo/client": "^3.8.3",
         "@testing-library/react-native": "7.0.2",
-        "graphql": "^16.8.0",
         "react-native-builder-bob": "0.26.0"
     },
     "peerDependencies": {
diff --git a/packages/react-native-apollo-client/src/DatadogLink.ts b/packages/react-native-apollo-client/src/DatadogLink.ts
@@ -8,17 +8,32 @@ import { ApolloLink } from '@apollo/client';
 import {
     DATADOG_GRAPH_QL_OPERATION_TYPE_HEADER,
     DATADOG_GRAPH_QL_OPERATION_NAME_HEADER,
-    DATADOG_GRAPH_QL_VARIABLES_HEADER
+    DATADOG_GRAPH_QL_VARIABLES_HEADER,
+    DATADOG_GRAPH_QL_PAYLOAD_HEADER
 } from '@datadog/mobile-react-native';
 
-import { getOperationName, getVariables, getOperationType } from './helpers';
+import {
+    getOperationName,
+    getVariables,
+    getOperationType,
+    getPayload
+} from './helpers';
+
+export type DatadogLinkOptions = {
+    trackPayload: boolean;
+};
 
 export class DatadogLink extends ApolloLink {
-    constructor() {
+    private trackPayload = false;
+
+    constructor(options: DatadogLinkOptions = { trackPayload: false }) {
         super((operation, forward) => {
             const operationName = getOperationName(operation);
             const formattedVariables = getVariables(operation);
             const operationType = getOperationType(operation);
+            const payload = getPayload(operation, this.trackPayload);
+
+            console.log('Payload: ', payload);
 
             operation.setContext(({ headers = {} }) => {
                 const newHeaders: Record<string, string | null> = {
@@ -34,6 +49,7 @@ export class DatadogLink extends ApolloLink {
                 newHeaders[
                     DATADOG_GRAPH_QL_VARIABLES_HEADER
                 ] = formattedVariables;
+                newHeaders[DATADOG_GRAPH_QL_PAYLOAD_HEADER] = payload;
 
                 return {
                     headers: newHeaders
@@ -42,5 +58,7 @@ export class DatadogLink extends ApolloLink {
 
             return forward(operation);
         });
+
+        this.trackPayload = options.trackPayload;
     }
 }
diff --git a/packages/react-native-apollo-client/src/__tests__/helpers.test.ts b/packages/react-native-apollo-client/src/__tests__/helpers.test.ts
@@ -4,7 +4,12 @@
  * Copyright 2016-Present Datadog, Inc.
  */
 
-import { getOperationName, getVariables, getOperationType } from '../helpers';
+import {
+    getOperationName,
+    getVariables,
+    getOperationType,
+    getPayload
+} from '../helpers';
 
 import {
     createCatOperation,
@@ -62,4 +67,75 @@ describe('helpers', () => {
             expect(getOperationType({ query: { definitions: [] } })).toBeNull();
         });
     });
+
+    describe('getPayload', () => {
+        it('returns null when trackPayload is false', () => {
+            expect(getPayload(getCountryOperation, false)).toBeNull();
+        });
+
+        it('returns null when trackPayload is not provided (defaults to false)', () => {
+            expect(getPayload(getCountryOperation)).toBeNull();
+        });
+
+        it('returns the query string when trackPayload is true', () => {
+            const payload = getPayload(getCountryOperation, true);
+            expect(payload).toBeTruthy();
+            expect(payload).toContain('query CountryDetails');
+            expect(payload).toContain('country');
+        });
+
+        it('returns the query string for mutations', () => {
+            const payload = getPayload(createCatOperation, true);
+            expect(payload).toBeTruthy();
+            expect(payload).toContain('mutation CreateCat');
+        });
+
+        it('trims whitespace from the query string', () => {
+            const payload = getPayload(getCountryOperation, true);
+            expect(payload).toBeTruthy();
+            // Check that there's no leading/trailing whitespace
+            expect(payload).toBe(payload?.trim());
+        });
+
+        it('truncates query strings longer than 32 KiB', () => {
+            // Create a mock operation with a very long query
+            // Generate a query with a lot of fields to exceed 32 KiB
+            const fields = 'a'.repeat(1000);
+            const mockOperation: any = {
+                query: {
+                    kind: 'Document',
+                    definitions: [
+                        {
+                            kind: 'OperationDefinition',
+                            operation: 'query',
+                            selectionSet: {
+                                kind: 'SelectionSet',
+                                selections: Array.from(
+                                    { length: 100 },
+                                    (_, i) => ({
+                                        kind: 'Field',
+                                        name: {
+                                            kind: 'Name',
+                                            value: `field${i}_${fields}`
+                                        }
+                                    })
+                                )
+                            }
+                        }
+                    ]
+                }
+            };
+
+            const payload = getPayload(mockOperation, true);
+            expect(payload).toBeTruthy();
+            expect(payload?.length).toBe(32 * 1024 + 3); // 32 KiB + '...'
+            expect(payload?.endsWith('...')).toBe(true);
+        });
+
+        it('does not crash if the operation is malformed', () => {
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-ignore
+            expect(getPayload({}, true)).toBeNull();
+        });
+    });
 });
diff --git a/packages/react-native-apollo-client/src/helpers.ts b/packages/react-native-apollo-client/src/helpers.ts
@@ -12,11 +12,14 @@ import { version } from '@apollo/client/package.json';
 import type { Operation } from '@apollo/client';
 import { DdSdk } from '@datadog/mobile-react-native';
 import type { DefinitionNode, OperationDefinitionNode } from 'graphql';
+import { print } from 'graphql';
 
 import { ErrorCode, errorMessages } from './types';
 
 const apolloVersion = `[Apollo v${version}]`;
 
+const GRAPHQL_PAYLOAD_LIMIT = 32 * 1024;
+
 export const getVariables = (operation: Operation): string | null => {
     if (operation.variables) {
         try {
@@ -70,6 +73,32 @@ export const getOperationType = (
     }
 };
 
+export const getPayload = (
+    operation: Operation,
+    trackPayload: boolean = false
+): string | null => {
+    if (!trackPayload) {
+        return null;
+    }
+
+    try {
+        const queryString = print(operation.query);
+        const trimmedQuery = queryString.trim();
+
+        return safeTruncate(trimmedQuery, GRAPHQL_PAYLOAD_LIMIT, '...');
+    } catch (e) {
+        DdSdk?.telemetryError(
+            _getErrorMessage(
+                ErrorCode.GQL_VARIABLE_RETRIEVAL_ERROR,
+                apolloVersion
+            ),
+            _getErrorStack(e),
+            ErrorCode.GQL_VARIABLE_RETRIEVAL_ERROR
+        );
+        return null;
+    }
+};
+
 const _getErrorMessage = (code: ErrorCode, details: string) =>
     `${errorMessages[code]} - ${details}`;
 
@@ -82,3 +111,15 @@ const _getErrorStack = (error: unknown): string => {
         ? error.stack ?? 'No stack trace available'
         : `Non-Error thrown: ${error}`;
 };
+
+const safeTruncate = (candidate: string, length: number, suffix = '') => {
+    const lastChar = candidate.charCodeAt(length - 1);
+    const isLastCharSurrogatePair = lastChar >= 0xd800 && lastChar <= 0xdbff;
+    const correctedLength = isLastCharSurrogatePair ? length + 1 : length;
+
+    if (candidate.length <= correctedLength) {
+        return candidate;
+    }
+
+    return `${candidate.slice(0, correctedLength)}${suffix}`;
+};

Original file line number	Diff line number	Diff line change
`@@ -74,6 +74,10 @@ const formatResourceStopContext = (`
`74`	`74`	`if (graphqlAttributes.variables) {`
`75`	`75`	`attributes['_dd.graphql.variables'] = graphqlAttributes.variables;`
`76`	`76`	`}`
	`77`	`+`
	`78`	`+ if (graphqlAttributes.payload) {`
	`79`	`+ attributes['_dd.graphql.payload'] = graphqlAttributes.payload;`
	`80`	`+ }`
`77`	`81`	`}`
`78`	`82`
`79`	`83`	`return attributes;`