feat(browser): Add support for fetch graphql request

Added test for fetch graphql.
Created new utility functions and added tests.
Updated `instrumentFetch` to collect fetch request payload.

Signed-off-by: Kaung Zin Hein <[email protected]>

Author: Zen-cronic

dev-packages/browser-integration-tests/suites/integrations/graphqlClient/fetch/subject.js

@@ -0,0 +1,17 @@
+const query = `query Test{
+  people {
+    name
+    pet
+  }
+}`;
+
+const requestBody = JSON.stringify({ query });
+
+fetch('http://sentry-test.io/foo', {
+  method: 'POST',
+  headers: {
+    Accept: 'application/json',
+    'Content-Type': 'application/json',
+  },
+  body: requestBody,
+});

dev-packages/browser-integration-tests/suites/integrations/graphqlClient/fetch/test.ts

@@ -0,0 +1,55 @@
+import { expect } from '@playwright/test';
+import type { Event } from '@sentry/types';
+
+import { sentryTest } from '../../../../utils/fixtures';
+import { getFirstSentryEnvelopeRequest, shouldSkipTracingTest } from '../../../../utils/helpers';
+
+sentryTest.only('should create spans for GraphQL Fetch requests', async ({ getLocalTestPath, page }) => {
+  if (shouldSkipTracingTest()) {
+    sentryTest.skip();
+  }
+
+  const url = await getLocalTestPath({ testDir: __dirname });
+
+  await page.route('**/foo', route => {
+    return route.fulfill({
+      status: 200,
+      body: JSON.stringify({
+        people: [
+          { name: 'Amy', pet: 'dog' },
+          { name: 'Jay', pet: 'cat' },
+        ],
+      }),
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    });
+  });
+
+  const eventData = await getFirstSentryEnvelopeRequest<Event>(page, url);
+  const requestSpans = eventData.spans?.filter(({ op }) => op === 'http.client');
+
+  expect(requestSpans).toHaveLength(1);
+
+  expect(requestSpans![0]).toMatchObject({
+    description: 'POST http://sentry-test.io/foo (query Test)',
+    parent_span_id: eventData.contexts?.trace?.span_id,
+    span_id: expect.any(String),
+    start_timestamp: expect.any(Number),
+    timestamp: expect.any(Number),
+    trace_id: eventData.contexts?.trace?.trace_id,
+    status: 'ok',
+    data: expect.objectContaining({
+      type: 'fetch',
+      'http.method': 'POST',
+      'http.url': 'http://sentry-test.io/foo',
+      url: 'http://sentry-test.io/foo',
+      'server.address': 'sentry-test.io',
+      'sentry.op': 'http.client',
+      'sentry.origin': 'auto.http.browser',
+      body: {
+        query: expect.any(String),
+      },
+    }),
+  });
+});

dev-packages/browser-integration-tests/suites/integrations/graphqlClient/xhr/test.ts

@@ -38,6 +38,7 @@ sentryTest.only('should create spans for GraphQL XHR requests', async ({ getLoca
     start_timestamp: expect.any(Number),
     timestamp: expect.any(Number),
     trace_id: eventData.contexts?.trace?.trace_id,
+    status: 'ok',
     data: {
       type: 'xhr',
       'http.method': 'POST',
@@ -46,6 +47,9 @@ sentryTest.only('should create spans for GraphQL XHR requests', async ({ getLoca
       'server.address': 'sentry-test.io',
       'sentry.op': 'http.client',
       'sentry.origin': 'auto.http.browser',
+      body: {
+        query: expect.any(String),
+      },
     },
   });
 });

packages/browser/src/integrations/graphqlClient.ts

@@ -1,4 +1,10 @@
-import { SEMANTIC_ATTRIBUTE_SENTRY_OP, defineIntegration, spanToJSON } from '@sentry/core';
+import {
+  SEMANTIC_ATTRIBUTE_HTTP_REQUEST_METHOD,
+  SEMANTIC_ATTRIBUTE_SENTRY_OP,
+  SEMANTIC_ATTRIBUTE_URL_FULL,
+  defineIntegration,
+  spanToJSON,
+} from '@sentry/core';
 import type { IntegrationFn } from '@sentry/types';
 import { parseGraphQLQuery } from '@sentry/utils';
 
@@ -13,6 +19,10 @@ const _graphqlClientIntegration = ((options: GraphQLClientOptions) => {
     name: INTEGRATION_NAME,
     setup(client) {
       client.on('spanStart', span => {
+        client.emit('outgoingRequestSpanStart', span);
+      });
+
+      client.on('outgoingRequestSpanStart', span => {
         const spanJSON = spanToJSON(span);
 
         const spanAttributes = spanJSON.data || {};
@@ -21,17 +31,21 @@ const _graphqlClientIntegration = ((options: GraphQLClientOptions) => {
         const isHttpClientSpan = spanOp === 'http.client';
 
         if (isHttpClientSpan) {
-          const httpUrl = spanAttributes['http.url'];
+          const httpUrl = spanAttributes[SEMANTIC_ATTRIBUTE_URL_FULL] || spanAttributes['http.url'];
 
           const { endpoints } = options;
 
           const isTracedGraphqlEndpoint = endpoints.includes(httpUrl);
 
           if (isTracedGraphqlEndpoint) {
-            const httpMethod = spanAttributes['http.method'];
-            const graphqlQuery = spanAttributes['body']?.query as string;
+            const httpMethod = spanAttributes[SEMANTIC_ATTRIBUTE_HTTP_REQUEST_METHOD] || spanAttributes['http.method'];
+            const graphqlBody = spanAttributes['body'];
+
+            // Standard graphql request shape: https://graphql.org/learn/serving-over-http/#post-request
+            const graphqlQuery = graphqlBody && (graphqlBody['query'] as string);
+            const graphqlOperationName = graphqlBody && (graphqlBody['operationName'] as string);
 
-            const { operationName, operationType } = parseGraphQLQuery(graphqlQuery);
+            const { operationName = graphqlOperationName, operationType } = parseGraphQLQuery(graphqlQuery);
             const newOperation = operationName ? `${operationType} ${operationName}` : `${operationType}`;
 
             span.updateName(`${httpMethod} ${httpUrl} (${newOperation})`);

packages/browser/src/tracing/request.ts

@@ -28,6 +28,7 @@ import {
   browserPerformanceTimeOrigin,
   dynamicSamplingContextToSentryBaggageHeader,
   generateSentryTraceHeader,
+  getGraphQLRequestPayload,
   parseUrl,
   stringMatchesSomePattern,
 } from '@sentry/utils';
@@ -357,13 +358,13 @@ export function xhrCallback(
     return undefined;
   }
 
-  const requestBody = JSON.parse(sentryXhrData.body as string);
-
   const fullUrl = getFullURL(sentryXhrData.url);
   const host = fullUrl ? parseUrl(fullUrl).host : undefined;
 
   const hasParent = !!getActiveSpan();
 
+  const graphqlRequest = getGraphQLRequestPayload(sentryXhrData.body as string);
+
   const span =
     shouldCreateSpanResult && hasParent
       ? startInactiveSpan({
@@ -376,7 +377,7 @@ export function xhrCallback(
             'server.address': host,
             [SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: 'auto.http.browser',
             [SEMANTIC_ATTRIBUTE_SENTRY_OP]: 'http.client',
-            body: requestBody,
+            body: graphqlRequest,
           },
         })
       : new SentryNonRecordingSpan();

packages/core/src/baseclient.ts

@@ -462,6 +462,9 @@ export abstract class BaseClient<O extends ClientOptions> implements Client<O> {
   /** @inheritdoc */
   public on(hook: 'startNavigationSpan', callback: (options: StartSpanOptions) => void): () => void;
 
+  /** @inheritdoc */
+  public on(hook: 'outgoingRequestSpanStart', callback: (span: Span) => void): () => void;
+
   public on(hook: 'flush', callback: () => void): () => void;
 
   public on(hook: 'close', callback: () => void): () => void;
@@ -540,6 +543,9 @@ export abstract class BaseClient<O extends ClientOptions> implements Client<O> {
   /** @inheritdoc */
   public emit(hook: 'startNavigationSpan', options: StartSpanOptions): void;
 
+  /** @inheritdoc */
+  public emit(hook: 'outgoingRequestSpanStart', span: Span): void;
+
   /** @inheritdoc */
   public emit(hook: 'flush'): void;
 

packages/core/src/fetch.ts

@@ -3,6 +3,7 @@ import {
   BAGGAGE_HEADER_NAME,
   dynamicSamplingContextToSentryBaggageHeader,
   generateSentryTraceHeader,
+  getGraphQLRequestPayload,
   isInstanceOf,
   parseUrl,
 } from '@sentry/utils';
@@ -65,13 +66,15 @@ export function instrumentFetchRequest(
   const scope = getCurrentScope();
   const client = getClient();
 
-  const { method, url } = handlerData.fetchData;
+  const { method, url, body } = handlerData.fetchData;
 
   const fullUrl = getFullURL(url);
   const host = fullUrl ? parseUrl(fullUrl).host : undefined;
 
   const hasParent = !!getActiveSpan();
 
+  const graphqlRequest = getGraphQLRequestPayload(body as string);
+
   const span =
     shouldCreateSpanResult && hasParent
       ? startInactiveSpan({
@@ -84,6 +87,7 @@ export function instrumentFetchRequest(
             'server.address': host,
             [SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: spanOrigin,
             [SEMANTIC_ATTRIBUTE_SENTRY_OP]: 'http.client',
+            body: graphqlRequest,
           },
         })
       : new SentryNonRecordingSpan();

packages/types/src/client.ts

@@ -291,6 +291,12 @@ export interface Client<O extends ClientOptions = ClientOptions> {
    */
   on(hook: 'startNavigationSpan', callback: (options: StartSpanOptions) => void): () => void;
 
+  /**
+   * A hook for GraphQL client integration to enhance a span and breadcrumbs with request data.
+   * @returns A function that, when executed, removes the registered callback.
+   */
+  on(hook: 'outgoingRequestSpanStart', callback: (span: Span) => void): () => void;
+
   /**
    * A hook that is called when the client is flushing
    * @returns A function that, when executed, removes the registered callback.
@@ -387,6 +393,11 @@ export interface Client<O extends ClientOptions = ClientOptions> {
    */
   emit(hook: 'startNavigationSpan', options: StartSpanOptions): void;
 
+  /**
+   * Emit a hook event for GraphQL client integration to enhance a span and breadcrumbs with request data.
+   */
+  emit(hook: 'outgoingRequestSpanStart', span: Span): void;
+
   /**
    * Emit a hook event for client flush
    */

packages/types/src/instrument.ts

@@ -6,6 +6,8 @@ import type { WebFetchHeaders } from './webfetchapi';
 // Make sure to cast it where needed!
 type XHRSendInput = unknown;
 
+type FetchInput = unknown;
+
 export type ConsoleLevel = 'debug' | 'info' | 'warn' | 'error' | 'log' | 'assert' | 'trace';
 
 export interface SentryWrappedXMLHttpRequest {
@@ -37,6 +39,7 @@ export interface HandlerDataXhr {
 interface SentryFetchData {
   method: string;
   url: string;
+  body?: FetchInput;
   request_body_size?: number;
   response_body_size?: number;
   // span_id for the fetch request

packages/utils/src/graphql.ts

@@ -6,10 +6,9 @@ interface GraphQLOperation {
 /**
  * Extract the name and type of the operation from the GraphQL query.
  * @param query
- * @returns
  */
 export function parseGraphQLQuery(query: string): GraphQLOperation {
-  const queryRe = /^(?:\s*)(query|mutation|subscription)(?:\s*)(\w+)(?:\s*)[\{\(]/;
+  const queryRe = /^(?:\s*)(query|mutation|subscription)(?:\s*)(\w+)(?:\s*)[{(]/;
 
   const matched = query.match(queryRe);
 
@@ -24,3 +23,23 @@ export function parseGraphQLQuery(query: string): GraphQLOperation {
     operationName: undefined,
   };
 }
+
+/**
+ * Extract the payload of a request ONLY if it's GraphQL.
+ * @param payload - A valid JSON string
+ */
+export function getGraphQLRequestPayload(payload: string): any | undefined {
+  let graphqlBody = undefined;
+  try {
+    const requestBody = JSON.parse(payload);
+    const isGraphQLRequest = !!requestBody['query'];
+    if (isGraphQLRequest) {
+      graphqlBody = requestBody;
+    }
+  } finally {
+    // Fallback to undefined if payload is an invalid JSON (SyntaxError)
+
+    /* eslint-disable no-unsafe-finally */
+    return graphqlBody;
+  }
+}