feat(browser): Update breadcrumbs with graphql request data

Zen-cronic · Zen-cronic · commit 55e6f1b8db2f · 2024-09-29T11:25:08.000-04:00
Signed-off-by: Kaung Zin Hein &lt;kaungzinhein113@gmail.com&gt;
diff --git a/dev-packages/browser-integration-tests/suites/integrations/graphqlClient/fetch/test.ts b/dev-packages/browser-integration-tests/suites/integrations/graphqlClient/fetch/test.ts
@@ -13,7 +13,7 @@ const query = `query Test{
 }`;
 const queryPayload = JSON.stringify({ query });
 
-sentryTest('should create spans for GraphQL Fetch requests', async ({ getLocalTestPath, page }) => {
+sentryTest('should update spans for GraphQL Fetch requests', async ({ getLocalTestPath, page }) => {
   const url = await getLocalTestPath({ testDir: __dirname });
 
   await page.route('**/foo', route => {
@@ -56,3 +56,42 @@ sentryTest('should create spans for GraphQL Fetch requests', async ({ getLocalTe
     }),
   });
 });
+
+sentryTest('should update breadcrumbs for GraphQL Fetch requests', async ({ getLocalTestPath, page }) => {
+  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);
+
+  expect(eventData?.breadcrumbs?.length).toBe(1);
+
+  expect(eventData!.breadcrumbs![0]).toEqual({
+    timestamp: expect.any(Number),
+    category: 'fetch',
+    type: 'http',
+    data: {
+      method: 'POST',
+      status_code: 200,
+      url: 'http://sentry-test.io/foo',
+      __span: expect.any(String),
+      graphql: {
+        query: query,
+        operationName: 'query Test',
+      },
+    },
+  });
+});
diff --git a/dev-packages/browser-integration-tests/suites/integrations/graphqlClient/xhr/test.ts b/dev-packages/browser-integration-tests/suites/integrations/graphqlClient/xhr/test.ts
@@ -13,7 +13,7 @@ const query = `query Test{
 }`;
 const queryPayload = JSON.stringify({ query });
 
-sentryTest('should create spans for GraphQL XHR requests', async ({ getLocalTestPath, page }) => {
+sentryTest('should update spans for GraphQL XHR requests', async ({ getLocalTestPath, page }) => {
   const url = await getLocalTestPath({ testDir: __dirname });
 
   await page.route('**/foo', route => {
@@ -56,3 +56,41 @@ sentryTest('should create spans for GraphQL XHR requests', async ({ getLocalTest
     },
   });
 });
+
+sentryTest('should update breadcrumbs for GraphQL XHR requests', async ({ getLocalTestPath, page }) => {
+  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);
+
+  expect(eventData?.breadcrumbs?.length).toBe(1);
+
+  expect(eventData!.breadcrumbs![0]).toEqual({
+    timestamp: expect.any(Number),
+    category: 'xhr',
+    type: 'http',
+    data: {
+      method: 'POST',
+      status_code: 200,
+      url: 'http://sentry-test.io/foo',
+      graphql: {
+        query: query,
+        operationName: 'query Test',
+      },
+    },
+  });
+});
diff --git a/packages/browser/src/integrations/breadcrumbs.ts b/packages/browser/src/integrations/breadcrumbs.ts
@@ -17,6 +17,7 @@ import type {
   HandlerDataHistory,
   HandlerDataXhr,
   IntegrationFn,
+  SeverityLevel,
   XhrBreadcrumbData,
   XhrBreadcrumbHint,
 } from '@sentry/types';
@@ -26,6 +27,7 @@ import {
   getBreadcrumbLogLevelFromHttpStatusCode,
   getComponentName,
   getEventDescription,
+  getGraphQLRequestPayload,
   htmlTreeAsString,
   logger,
   parseUrl,
@@ -248,17 +250,16 @@ function _getXhrBreadcrumbHandler(client: Client): (handlerData: HandlerDataXhr)
       endTimestamp,
     };
 
-    const level = getBreadcrumbLogLevelFromHttpStatusCode(status_code);
+    const breadcrumb = {
+      category: 'xhr',
+      data,
+      type: 'http',
+      level: getBreadcrumbLogLevelFromHttpStatusCode(status_code),
+    };
 
-    addBreadcrumb(
-      {
-        category: 'xhr',
-        data,
-        type: 'http',
-        level,
-      },
-      hint,
-    );
+    client.emit('outgoingRequestBreadcrumbStart', breadcrumb, { body: getGraphQLRequestPayload(body as string) });
+
+    addBreadcrumb(breadcrumb, hint);
   };
 }
 
@@ -292,15 +293,18 @@ function _getFetchBreadcrumbHandler(client: Client): (handlerData: HandlerDataFe
         endTimestamp,
       };
 
-      addBreadcrumb(
-        {
-          category: 'fetch',
-          data,
-          level: 'error',
-          type: 'http',
-        },
-        hint,
-      );
+      const breadcrumb = {
+        category: 'fetch',
+        data,
+        level: 'error' as SeverityLevel,
+        type: 'http',
+      };
+
+      client.emit('outgoingRequestBreadcrumbStart', breadcrumb, {
+        body: getGraphQLRequestPayload(handlerData.fetchData.body as string),
+      });
+
+      addBreadcrumb(breadcrumb, hint);
     } else {
       const response = handlerData.response as Response | undefined;
       const data: FetchBreadcrumbData = {
@@ -313,17 +317,19 @@ function _getFetchBreadcrumbHandler(client: Client): (handlerData: HandlerDataFe
         startTimestamp,
         endTimestamp,
       };
-      const level = getBreadcrumbLogLevelFromHttpStatusCode(data.status_code);
-
-      addBreadcrumb(
-        {
-          category: 'fetch',
-          data,
-          type: 'http',
-          level,
-        },
-        hint,
-      );
+
+      const breadcrumb = {
+        category: 'fetch',
+        data,
+        type: 'http',
+        level: getBreadcrumbLogLevelFromHttpStatusCode(data.status_code),
+      };
+
+      client.emit('outgoingRequestBreadcrumbStart', breadcrumb, {
+        body: getGraphQLRequestPayload(handlerData.fetchData.body as string),
+      });
+
+      addBreadcrumb(breadcrumb, hint);
     }
   };
 }
diff --git a/packages/browser/src/integrations/graphqlClient.ts b/packages/browser/src/integrations/graphqlClient.ts
@@ -5,7 +5,7 @@ import {
   defineIntegration,
   spanToJSON,
 } from '@sentry/core';
-import type { IntegrationFn } from '@sentry/types';
+import type { Client, IntegrationFn } from '@sentry/types';
 import { parseGraphQLQuery } from '@sentry/utils';
 
 interface GraphQLClientOptions {
@@ -24,39 +24,82 @@ const _graphqlClientIntegration = ((options: GraphQLClientOptions) => {
   return {
     name: INTEGRATION_NAME,
     setup(client) {
-      client.on('outgoingRequestSpanStart', (span, { body }) => {
-        const spanJSON = spanToJSON(span);
+      _updateSpanWithGraphQLData(client, options);
+      _updateBreadcrumbWithGraphQLData(client, options);
+    },
+  };
+}) satisfies IntegrationFn;
+
+function _updateSpanWithGraphQLData(client: Client, options: GraphQLClientOptions): void {
+  client.on('outgoingRequestSpanStart', (span, { body }) => {
+    const spanJSON = spanToJSON(span);
+
+    const spanAttributes = spanJSON.data || {};
+    const spanOp = spanAttributes[SEMANTIC_ATTRIBUTE_SENTRY_OP];
 
-        const spanAttributes = spanJSON.data || {};
+    const isHttpClientSpan = spanOp === 'http.client';
 
-        const spanOp = spanAttributes[SEMANTIC_ATTRIBUTE_SENTRY_OP];
-        const isHttpClientSpan = spanOp === 'http.client';
+    if (isHttpClientSpan) {
+      const httpUrl = spanAttributes[SEMANTIC_ATTRIBUTE_URL_FULL] || spanAttributes['http.url'];
 
-        if (isHttpClientSpan) {
-          const httpUrl = spanAttributes[SEMANTIC_ATTRIBUTE_URL_FULL] || spanAttributes['http.url'];
+      const { endpoints } = options;
+      const isTracedGraphqlEndpoint = endpoints.includes(httpUrl);
 
-          const { endpoints } = options;
-          const isTracedGraphqlEndpoint = endpoints.includes(httpUrl);
+      if (isTracedGraphqlEndpoint) {
+        const httpMethod = spanAttributes[SEMANTIC_ATTRIBUTE_HTTP_REQUEST_METHOD] || spanAttributes['http.method'];
 
-          if (isTracedGraphqlEndpoint) {
-            const httpMethod = spanAttributes[SEMANTIC_ATTRIBUTE_HTTP_REQUEST_METHOD] || spanAttributes['http.method'];
-            const graphqlBody = body as GraphQLRequestPayload;
+        const operationInfo = _getGraphQLOperation(body);
+        span.updateName(`${httpMethod} ${httpUrl} (${operationInfo})`);
+        span.setAttribute('body', JSON.stringify(body));
+      }
+    }
+  });
+}
+
+function _updateBreadcrumbWithGraphQLData(client: Client, options: GraphQLClientOptions): void {
+  client.on('outgoingRequestBreadcrumbStart', (breadcrumb, { body }) => {
+    const { category, type, data } = breadcrumb;
+
+    const isFetch = category === 'fetch';
+    const isXhr = category === 'xhr';
+    const isHttpBreadcrumb = type === 'http';
 
-            // Standard graphql request shape: https://graphql.org/learn/serving-over-http/#post-request
-            const graphqlQuery = graphqlBody.query;
-            const graphqlOperationName = graphqlBody.operationName;
+    if (isHttpBreadcrumb && (isFetch || isXhr)) {
+      const httpUrl = data && data.url;
+      const { endpoints } = options;
 
-            const { operationName = graphqlOperationName, operationType } = parseGraphQLQuery(graphqlQuery);
-            const newOperation = operationName ? `${operationType} ${operationName}` : `${operationType}`;
+      const isTracedGraphqlEndpoint = endpoints.includes(httpUrl);
 
-            span.updateName(`${httpMethod} ${httpUrl} (${newOperation})`);
-            span.setAttribute('body', JSON.stringify(graphqlBody));
-          }
+      if (isTracedGraphqlEndpoint && data) {
+        if (!data.graphql) {
+          const operationInfo = _getGraphQLOperation(body);
+
+          data.graphql = {
+            query: (body as GraphQLRequestPayload).query,
+            operationName: operationInfo,
+          };
         }
-      });
-    },
-  };
-}) satisfies IntegrationFn;
+
+        // The body prop attached to HandlerDataFetch for the span should be removed.
+        if (isFetch && data.body) {
+          delete data.body;
+        }
+      }
+    }
+  });
+}
+
+function _getGraphQLOperation(requestBody: unknown): string {
+  // Standard graphql request shape: https://graphql.org/learn/serving-over-http/#post-request
+  const graphqlBody = requestBody as GraphQLRequestPayload;
+  const graphqlQuery = graphqlBody.query;
+  const graphqlOperationName = graphqlBody.operationName;
+
+  const { operationName = graphqlOperationName, operationType } = parseGraphQLQuery(graphqlQuery);
+  const operationInfo = operationName ? `${operationType} ${operationName}` : `${operationType}`;
+
+  return operationInfo;
+}
 
 /**
  * GraphQL Client integration for the browser.
diff --git a/packages/core/src/baseclient.ts b/packages/core/src/baseclient.ts
@@ -465,6 +465,12 @@ export abstract class BaseClient<O extends ClientOptions> implements Client<O> {
   /** @inheritdoc */
   public on(hook: 'outgoingRequestSpanStart', callback: (span: Span, { body }: { body: unknown }) => void): () => void;
 
+  /** @inheritdoc */
+  public on(
+    hook: 'outgoingRequestBreadcrumbStart',
+    callback: (breadcrumb: Breadcrumb, { body }: { body: unknown }) => void,
+  ): () => void;
+
   public on(hook: 'flush', callback: () => void): () => void;
 
   public on(hook: 'close', callback: () => void): () => void;
@@ -546,6 +552,9 @@ export abstract class BaseClient<O extends ClientOptions> implements Client<O> {
   /** @inheritdoc */
   public emit(hook: 'outgoingRequestSpanStart', span: Span, { body }: { body: unknown }): void;
 
+  /** @inheritdoc */
+  public emit(hook: 'outgoingRequestBreadcrumbStart', breadcrumb: Breadcrumb, { body }: { body: unknown }): void;
+
   /** @inheritdoc */
   public emit(hook: 'flush'): void;
 
diff --git a/packages/types/src/client.ts b/packages/types/src/client.ts
@@ -292,11 +292,20 @@ 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.
+   * A hook for GraphQL client integration to enhance a span with request data.
    * @returns A function that, when executed, removes the registered callback.
    */
   on(hook: 'outgoingRequestSpanStart', callback: (span: Span, { body }: { body: unknown }) => void): () => void;
 
+  /**
+   * A hook for GraphQL client integration to enhance a breadcrumb with request data.
+   * @returns A function that, when executed, removes the registered callback.
+   */
+  on(
+    hook: 'outgoingRequestBreadcrumbStart',
+    callback: (breadcrumb: Breadcrumb, { body }: { body: unknown }) => void,
+  ): () => void;
+
   /**
    * A hook that is called when the client is flushing
    * @returns A function that, when executed, removes the registered callback.
@@ -394,10 +403,15 @@ 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 a hook event for GraphQL client integration to enhance a span with request data.
    */
   emit(hook: 'outgoingRequestSpanStart', span: Span, { body }: { body: unknown }): void;
 
+  /**
+   * Emit a hook event for GraphQL client integration to enhance a breadcrumb with request data.
+   */
+  emit(hook: 'outgoingRequestBreadcrumbStart', breadcrumb: Breadcrumb, { body }: { body: unknown }): void;
+
   /**
    * Emit a hook event for client flush
    */
