feat(browser): Add support for GraphQL persisted operations

CHANGELOG.md

@@ -2,6 +2,31 @@
 
 ## Unreleased
 
+### Important Changes
+
+- **feat(browser): Add support for GraphQL persisted operations ([#18505](https://github.com/getsentry/sentry-javascript/pull/18505))**
+
+The `graphqlClientIntegration` now supports GraphQL persisted operations (queries). When a persisted query is detected, the integration will capture the operation hash and version as span attributes:
+
+- `graphql.persisted_query.hash.sha256` - The SHA-256 hash of the persisted query
+- `graphql.persisted_query.version` - The version of the persisted query protocol
+
+Additionally, the `graphql.document` attribute format has changed to align with OpenTelemetry semantic conventions. It now contains only the GraphQL query string instead of the full JSON request payload.
+
+**Before:**
+
+```javascript
+"graphql.document": "{\"query\":\"query Test { user { id } }\"}"
+```
+
+**After:**
+
+```javascript
+"graphql.document": "query Test { user { id } }"
+```
+
+### Other Changes
+
 - "You miss 100 percent of the chances you don't take. — Wayne Gretzky" — Michael Scott
 
 Work in this release was contributed by @sebws. Thank you for your contribution!

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

@@ -10,7 +10,6 @@ const query = `query Test{
     pet
   }
 }`;
-const queryPayload = JSON.stringify({ query });
 
 sentryTest('should update spans for GraphQL fetch requests', async ({ getLocalTestUrl, page }) => {
   if (shouldSkipTracingTest()) {
@@ -55,7 +54,7 @@ sentryTest('should update spans for GraphQL fetch requests', async ({ getLocalTe
       'server.address': 'sentry-test.io',
       'sentry.op': 'http.client',
       'sentry.origin': 'auto.http.browser',
-      'graphql.document': queryPayload,
+      'graphql.document': query,
     }),
   });
 });

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

@@ -9,7 +9,7 @@ Sentry.init({
   integrations: [
     Sentry.browserTracingIntegration(),
     graphqlClientIntegration({
-      endpoints: ['http://sentry-test.io/foo'],
+      endpoints: ['http://sentry-test.io/foo', 'http://sentry-test.io/graphql'],
     }),
   ],
   tracesSampleRate: 1,

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

@@ -0,0 +1,19 @@
+const requestBody = JSON.stringify({
+  operationName: 'GetUser',
+  variables: { id: '123' },
+  extensions: {
+    persistedQuery: {
+      version: 1,
+      sha256Hash: 'ecf4edb46db40b5132295c0291d62fb65d6759a9eedfa4d5d612dd5ec54a6b38',
+    },
+  },
+});
+
+fetch('http://sentry-test.io/graphql', {
+  method: 'POST',
+  headers: {
+    Accept: 'application/json',
+    'Content-Type': 'application/json',
+  },
+  body: requestBody,
+});

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

@@ -0,0 +1,102 @@
+import { expect } from '@playwright/test';
+import type { Event } from '@sentry/core';
+import { sentryTest } from '../../../../utils/fixtures';
+import { getFirstSentryEnvelopeRequest, shouldSkipTracingTest } from '../../../../utils/helpers';
+
+sentryTest('should update spans for GraphQL persisted query fetch requests', async ({ getLocalTestUrl, page }) => {
+  if (shouldSkipTracingTest()) {
+    return;
+  }
+
+  const url = await getLocalTestUrl({ testDir: __dirname });
+
+  await page.route('**/graphql', route => {
+    return route.fulfill({
+      status: 200,
+      body: JSON.stringify({
+        data: {
+          user: {
+            id: '123',
+            name: 'Test User',
+          },
+        },
+      }),
+      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/graphql (persisted GetUser)',
+    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/graphql',
+      url: 'http://sentry-test.io/graphql',
+      'server.address': 'sentry-test.io',
+      'sentry.op': 'http.client',
+      'sentry.origin': 'auto.http.browser',
+      'graphql.persisted_query.hash.sha256': 'ecf4edb46db40b5132295c0291d62fb65d6759a9eedfa4d5d612dd5ec54a6b38',
+      'graphql.persisted_query.version': 1,
+    }),
+  });
+});
+
+sentryTest(
+  'should update breadcrumbs for GraphQL persisted query fetch requests',
+  async ({ getLocalTestUrl, page }) => {
+    if (shouldSkipTracingTest()) {
+      return;
+    }
+
+    const url = await getLocalTestUrl({ testDir: __dirname });
+
+    await page.route('**/graphql', route => {
+      return route.fulfill({
+        status: 200,
+        body: JSON.stringify({
+          data: {
+            user: {
+              id: '123',
+              name: 'Test User',
+            },
+          },
+        }),
+        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/graphql',
+        __span: expect.any(String),
+        'graphql.operation': 'persisted GetUser',
+        'graphql.persisted_query.hash.sha256': 'ecf4edb46db40b5132295c0291d62fb65d6759a9eedfa4d5d612dd5ec54a6b38',
+        'graphql.persisted_query.version': 1,
+      },
+    });
+  },
+);

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

@@ -0,0 +1,18 @@
+const xhr = new XMLHttpRequest();
+
+xhr.open('POST', 'http://sentry-test.io/graphql');
+xhr.setRequestHeader('Accept', 'application/json');
+xhr.setRequestHeader('Content-Type', 'application/json');
+
+const requestBody = JSON.stringify({
+  operationName: 'GetUser',
+  variables: { id: '123' },
+  extensions: {
+    persistedQuery: {
+      version: 1,
+      sha256Hash: 'ecf4edb46db40b5132295c0291d62fb65d6759a9eedfa4d5d612dd5ec54a6b38',
+    },
+  },
+});
+
+xhr.send(requestBody);

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

@@ -0,0 +1,98 @@
+import { expect } from '@playwright/test';
+import type { Event } from '@sentry/core';
+import { sentryTest } from '../../../../utils/fixtures';
+import { getFirstSentryEnvelopeRequest, shouldSkipTracingTest } from '../../../../utils/helpers';
+
+sentryTest('should update spans for GraphQL persisted query XHR requests', async ({ getLocalTestUrl, page }) => {
+  if (shouldSkipTracingTest()) {
+    return;
+  }
+
+  const url = await getLocalTestUrl({ testDir: __dirname });
+
+  await page.route('**/graphql', route => {
+    return route.fulfill({
+      status: 200,
+      body: JSON.stringify({
+        data: {
+          user: {
+            id: '123',
+            name: 'Test User',
+          },
+        },
+      }),
+      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/graphql (persisted GetUser)',
+    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: {
+      type: 'xhr',
+      'http.method': 'POST',
+      'http.url': 'http://sentry-test.io/graphql',
+      url: 'http://sentry-test.io/graphql',
+      'server.address': 'sentry-test.io',
+      'sentry.op': 'http.client',
+      'sentry.origin': 'auto.http.browser',
+      'graphql.persisted_query.hash.sha256': 'ecf4edb46db40b5132295c0291d62fb65d6759a9eedfa4d5d612dd5ec54a6b38',
+      'graphql.persisted_query.version': 1,
+    },
+  });
+});
+
+sentryTest('should update breadcrumbs for GraphQL persisted query XHR requests', async ({ getLocalTestUrl, page }) => {
+  if (shouldSkipTracingTest()) {
+    return;
+  }
+
+  const url = await getLocalTestUrl({ testDir: __dirname });
+
+  await page.route('**/graphql', route => {
+    return route.fulfill({
+      status: 200,
+      body: JSON.stringify({
+        data: {
+          user: {
+            id: '123',
+            name: 'Test User',
+          },
+        },
+      }),
+      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/graphql',
+      'graphql.operation': 'persisted GetUser',
+      'graphql.persisted_query.hash.sha256': 'ecf4edb46db40b5132295c0291d62fb65d6759a9eedfa4d5d612dd5ec54a6b38',
+      'graphql.persisted_query.version': 1,
+    },
+  });
+});

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

@@ -10,7 +10,6 @@ const query = `query Test{
     pet
   }
 }`;
-const queryPayload = JSON.stringify({ query });
 
 sentryTest('should update spans for GraphQL XHR requests', async ({ getLocalTestUrl, page }) => {
   if (shouldSkipTracingTest()) {
@@ -55,7 +54,7 @@ sentryTest('should update spans for GraphQL XHR requests', async ({ getLocalTest
       'server.address': 'sentry-test.io',
       'sentry.op': 'http.client',
       'sentry.origin': 'auto.http.browser',
-      'graphql.document': queryPayload,
+      'graphql.document': query,
     },
   });
 });