feat(browser): Add graphqlClientIntegration

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://public@dsn.ingest.sentry.io/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);
+ });
+});