feat(browser): Add graphqlClientIntegration

Added support for graphql query with `xhr` with tests.

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

Author: Zen-cronic

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

@@ -0,0 +1,14 @@
+import * as Sentry from '@sentry/browser';
+
+window.Sentry = Sentry;
+
+Sentry.init({
+  dsn: 'https://[email protected]/1337',
+  integrations: [
+    Sentry.browserTracingIntegration(),
+    Sentry.graphqlClientIntegration({
+      endpoints: ['http://sentry-test.io/foo'],
+    }),
+  ],
+  tracesSampleRate: 1,
+});

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

@@ -0,0 +1,16 @@
+const xhr = new XMLHttpRequest();
+
+xhr.open('POST', 'http://sentry-test.io/foo');
+xhr.setRequestHeader('Accept', 'application/json');
+xhr.setRequestHeader('Content-Type', 'application/json');
+
+const query = `query Test{
+
+    people {
+      name
+      pet
+    }
+}`;
+
+const requestBody = JSON.stringify({ query });
+xhr.send(requestBody);

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

@@ -0,0 +1,51 @@
+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 XHR 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,
+    data: {
+      type: 'xhr',
+      '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',
+    },
+  });
+});

packages/browser/src/index.ts

@@ -3,6 +3,7 @@ export * from './exports';
 export { reportingObserverIntegration } from './integrations/reportingobserver';
 export { httpClientIntegration } from './integrations/httpclient';
 export { contextLinesIntegration } from './integrations/contextlines';
+export { graphqlClientIntegration } from './integrations/graphqlClient';
 
 export {
   captureConsoleIntegration,
@@ -13,10 +14,7 @@ export {
   captureFeedback,
 } from '@sentry/core';
 
-export {
-  replayIntegration,
-  getReplay,
-} from '@sentry-internal/replay';
+export { replayIntegration, getReplay } from '@sentry-internal/replay';
 export type {
   ReplayEventType,
   ReplayEventWithTime,
@@ -34,17 +32,11 @@ export { replayCanvasIntegration } from '@sentry-internal/replay-canvas';
 import { feedbackAsyncIntegration } from './feedbackAsync';
 import { feedbackSyncIntegration } from './feedbackSync';
 export { feedbackAsyncIntegration, feedbackSyncIntegration, feedbackSyncIntegration as feedbackIntegration };
-export {
-  getFeedback,
-  sendFeedback,
-} from '@sentry-internal/feedback';
+export { getFeedback, sendFeedback } from '@sentry-internal/feedback';
 
 export * from './metrics';
 
-export {
-  defaultRequestInstrumentationOptions,
-  instrumentOutgoingRequests,
-} from './tracing/request';
+export { defaultRequestInstrumentationOptions, instrumentOutgoingRequests } from './tracing/request';
 export {
   browserTracingIntegration,
   startBrowserTracingNavigationSpan,

packages/browser/src/integrations/graphqlClient.ts

@@ -0,0 +1,48 @@
+import { SEMANTIC_ATTRIBUTE_SENTRY_OP, defineIntegration, spanToJSON } from '@sentry/core';
+import type { IntegrationFn } from '@sentry/types';
+import { parseGraphQLQuery } from '@sentry/utils';
+
+interface GraphQLClientOptions {
+  endpoints: Array<string>;
+}
+
+const INTEGRATION_NAME = 'GraphQLClient';
+
+const _graphqlClientIntegration = ((options: GraphQLClientOptions) => {
+  return {
+    name: INTEGRATION_NAME,
+    setup(client) {
+      client.on('spanStart', span => {
+        const spanJSON = spanToJSON(span);
+
+        const spanAttributes = spanJSON.data || {};
+
+        const spanOp = spanAttributes[SEMANTIC_ATTRIBUTE_SENTRY_OP];
+        const isHttpClientSpan = spanOp === 'http.client';
+
+        if (isHttpClientSpan) {
+          const httpUrl = 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 { operationName, operationType } = parseGraphQLQuery(graphqlQuery);
+            const newOperation = operationName ? `${operationType} ${operationName}` : `${operationType}`;
+
+            span.updateName(`${httpMethod} ${httpUrl} (${newOperation})`);
+          }
+        }
+      });
+    },
+  };
+}) satisfies IntegrationFn;
+
+/**
+ * GraphQL Client integration for the browser.
+ */
+export const graphqlClientIntegration = defineIntegration(_graphqlClientIntegration);

packages/browser/src/tracing/request.ts

@@ -357,6 +357,8 @@ 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;
 
@@ -374,6 +376,7 @@ export function xhrCallback(
             'server.address': host,
             [SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: 'auto.http.browser',
             [SEMANTIC_ATTRIBUTE_SENTRY_OP]: 'http.client',
+            body: requestBody,
           },
         })
       : new SentryNonRecordingSpan();

packages/utils/src/graphql.ts

@@ -0,0 +1,26 @@
+interface GraphQLOperation {
+  operationType: string | undefined;
+  operationName: string | undefined;
+}
+
+/**
+ * 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 matched = query.match(queryRe);
+
+  if (matched) {
+    return {
+      operationType: matched[1],
+      operationName: matched[2],
+    };
+  }
+  return {
+    operationType: undefined,
+    operationName: undefined,
+  };
+}

packages/utils/src/index.ts

@@ -39,3 +39,4 @@ export * from './lru';
 export * from './buildPolyfills';
 export * from './propagationContext';
 export * from './version';
+export * from './graphql';

packages/utils/test/graphql.test.ts

@@ -0,0 +1,41 @@
+import { parseGraphQLQuery } from '../src';
+
+describe('parseGraphQLQuery', () => {
+  const queryOne = `query Test {
+    items {
+        id
+        }
+    }`;
+
+  const queryTwo = `mutation AddTestItem($input: TestItem!) {
+    addItem(input: $input) {
+        name
+        }
+    }`;
+
+  const queryThree = `subscription OnTestItemAdded($itemID: ID!) {
+    itemAdded(itemID: $itemID) {
+        id
+        }
+    }`;
+
+  // TODO: support name-less queries
+  //   const queryFour = `   query   {
+  //     items {
+  //         id
+  //         }
+  //     }`;
+
+  test.each([
+    ['should handle query type', queryOne, { operationName: 'Test', operationType: 'query' }],
+    ['should handle mutation type', queryTwo, { operationName: 'AddTestItem', operationType: 'mutation' }],
+    [
+      'should handle subscription type',
+      queryThree,
+      { operationName: 'OnTestItemAdded', operationType: 'subscription' },
+    ],
+    // ['should handle query without name', queryFour, { operationName: undefined, operationType: 'query' }],
+  ])('%s', (_, input, output) => {
+    expect(parseGraphQLQuery(input)).toEqual(output);
+  });
+});