feat(browser): Add graphqlClientIntegration

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,103 @@
+import { expect } from '@playwright/test';
+import type { Event } from '@sentry/core';
+
+import { sentryTest } from '../../../../utils/fixtures';
+import { getFirstSentryEnvelopeRequest, shouldSkipTracingTest } from '../../../../utils/helpers';
+
+// Duplicate from subject.js
+const query = `query Test{
+  people {
+    name
+    pet
+  }
+}`;
+const queryPayload = JSON.stringify({ query });
+
+sentryTest('should update spans for GraphQL fetch requests', async ({ getLocalTestUrl, page }) => {
+  if (shouldSkipTracingTest()) {
+    return;
+  }
+
+  const url = await getLocalTestUrl({ 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',
+      'graphql.document': queryPayload,
+    }),
+  });
+});
+
+sentryTest('should update breadcrumbs for GraphQL fetch requests', async ({ getLocalTestUrl, page }) => {
+  if (shouldSkipTracingTest()) {
+    return;
+  }
+
+  const url = await getLocalTestUrl({ 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.document': query,
+      'graphql.operation': 'query Test',
+    },
+  });
+});

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

@@ -0,0 +1,16 @@
+import * as Sentry from '@sentry/browser';
+// Must import this like this to ensure the test transformation for CDN bundles works
+import { graphqlClientIntegration } from '@sentry/browser';
+
+window.Sentry = Sentry;
+
+Sentry.init({
+  dsn: 'https://[email protected]/1337',
+  integrations: [
+    Sentry.browserTracingIntegration(),
+    graphqlClientIntegration({
+      endpoints: ['http://sentry-test.io/foo'],
+    }),
+  ],
+  tracesSampleRate: 1,
+});

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

@@ -0,0 +1,15 @@
+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,102 @@
+import { expect } from '@playwright/test';
+import type { Event } from '@sentry/core';
+
+import { sentryTest } from '../../../../utils/fixtures';
+import { getFirstSentryEnvelopeRequest, shouldSkipTracingTest } from '../../../../utils/helpers';
+
+// Duplicate from subject.js
+const query = `query Test{
+  people {
+    name
+    pet
+  }
+}`;
+const queryPayload = JSON.stringify({ query });
+
+sentryTest('should update spans for GraphQL XHR requests', async ({ getLocalTestUrl, page }) => {
+  if (shouldSkipTracingTest()) {
+    return;
+  }
+
+  const url = await getLocalTestUrl({ 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: {
+      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',
+      'graphql.document': queryPayload,
+    },
+  });
+});
+
+sentryTest('should update breadcrumbs for GraphQL XHR requests', async ({ getLocalTestUrl, page }) => {
+  if (shouldSkipTracingTest()) {
+    return;
+  }
+
+  const url = await getLocalTestUrl({ 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.document': query,
+      'graphql.operation': 'query Test',
+    },
+  });
+});

dev-packages/browser-integration-tests/utils/generatePlugin.ts

@@ -36,6 +36,7 @@ const IMPORTED_INTEGRATION_CDN_BUNDLE_PATHS: Record<string, string> = {
   reportingObserverIntegration: 'reportingobserver',
   feedbackIntegration: 'feedback',
   moduleMetadataIntegration: 'modulemetadata',
+  graphqlClientIntegration: 'graphqlclient',
   // technically, this is not an integration, but let's add it anyway for simplicity
   makeMultiplexedTransport: 'multiplexedtransport',
 };

packages/browser-utils/package.json

@@ -56,9 +56,9 @@
     "clean": "rimraf build coverage sentry-internal-browser-utils-*.tgz",
     "fix": "eslint . --format stylish --fix",
     "lint": "eslint . --format stylish",
-    "test:unit": "jest",
-    "test": "jest",
-    "test:watch": "jest --watch",
+    "test:unit": "vitest run",
+    "test": "vitest run",
+    "test:watch": "vitest --watch",
     "yalc:publish": "yalc publish --push --sig"
   },
   "volta": {

packages/browser-utils/src/index.ts

@@ -26,3 +26,7 @@ export { addHistoryInstrumentationHandler } from './instrument/history';
 export { fetch, setTimeout, clearCachedImplementation, getNativeImplementation } from './getNativeImplementation';
 
 export { addXhrInstrumentationHandler, SENTRY_XHR_DATA_KEY } from './instrument/xhr';
+
+export { getBodyString, getFetchRequestArgBody, serializeFormData } from './networkUtils';
+
+export type { FetchHint, NetworkMetaWarning, XhrHint } from './types';

packages/browser-utils/src/networkUtils.ts

@@ -0,0 +1,57 @@
+import { logger } from '@sentry/core';
+import type { Logger } from '@sentry/core';
+import { DEBUG_BUILD } from './debug-build';
+import type { NetworkMetaWarning } from './types';
+
+/**
+ * Serializes FormData.
+ *
+ * This is a bit simplified, but gives us a decent estimate.
+ * This converts e.g. { name: 'Anne Smith', age: 13 } to 'name=Anne+Smith&age=13'.
+ *
+ */
+export function serializeFormData(formData: FormData): string {
+  // @ts-expect-error passing FormData to URLSearchParams actually works
+  return new URLSearchParams(formData).toString();
+}
+
+/** Get the string representation of a body. */
+export function getBodyString(body: unknown, _logger: Logger = logger): [string | undefined, NetworkMetaWarning?] {
+  try {
+    if (typeof body === 'string') {
+      return [body];
+    }
+
+    if (body instanceof URLSearchParams) {
+      return [body.toString()];
+    }
+
+    if (body instanceof FormData) {
+      return [serializeFormData(body)];
+    }
+
+    if (!body) {
+      return [undefined];
+    }
+  } catch (error) {
+    DEBUG_BUILD && logger.error(error, 'Failed to serialize body', body);
+    return [undefined, 'BODY_PARSE_ERROR'];
+  }
+
+  DEBUG_BUILD && logger.info('Skipping network body because of body type', body);
+
+  return [undefined, 'UNPARSEABLE_BODY_TYPE'];
+}
+
+/**
+ * Parses the fetch arguments to extract the request payload.
+ *
+ * We only support getting the body from the fetch options.
+ */
+export function getFetchRequestArgBody(fetchArgs: unknown[] = []): RequestInit['body'] | undefined {
+  if (fetchArgs.length !== 2 || typeof fetchArgs[1] !== 'object') {
+    return undefined;
+  }
+
+  return (fetchArgs[1] as RequestInit).body;
+}

packages/browser-utils/src/types.ts

@@ -1,6 +1,31 @@
+import type {
+  FetchBreadcrumbHint,
+  HandlerDataFetch,
+  SentryWrappedXMLHttpRequest,
+  XhrBreadcrumbHint,
+} from '@sentry/core';
 import { GLOBAL_OBJ } from '@sentry/core';
 
 export const WINDOW = GLOBAL_OBJ as typeof GLOBAL_OBJ &
   // document is not available in all browser environments (webworkers). We make it optional so you have to explicitly check for it
   Omit<Window, 'document'> &
   Partial<Pick<Window, 'document'>>;
+
+export type NetworkMetaWarning =
+  | 'MAYBE_JSON_TRUNCATED'
+  | 'TEXT_TRUNCATED'
+  | 'URL_SKIPPED'
+  | 'BODY_PARSE_ERROR'
+  | 'BODY_PARSE_TIMEOUT'
+  | 'UNPARSEABLE_BODY_TYPE';
+
+type RequestBody = null | Blob | BufferSource | FormData | URLSearchParams | string;
+
+export type XhrHint = XhrBreadcrumbHint & {
+  xhr: XMLHttpRequest & SentryWrappedXMLHttpRequest;
+  input?: RequestBody;
+};
+export type FetchHint = FetchBreadcrumbHint & {
+  input: HandlerDataFetch['args'];
+  response: Response;
+};