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,95 @@
+import { expect } from '@playwright/test';
+import type { Event } from '@sentry/core';
+
+import { sentryTest } from '../../../../utils/fixtures';
+import { getFirstSentryEnvelopeRequest } 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 }) => {
+  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 }) => {
+  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,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,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,94 @@
+import { expect } from '@playwright/test';
+import type { Event } from '@sentry/core';
+
+import { sentryTest } from '../../../../utils/fixtures';
+import { getFirstSentryEnvelopeRequest } 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 }) => {
+  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 }) => {
+  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',
+    },
+  });
+});

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

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

packages/browser-utils/src/networkUtils.ts

@@ -0,0 +1,72 @@
+import type { ConsoleLevel, Logger } from '@sentry/core';
+import { DEBUG_BUILD } from './debug-build';
+import type { NetworkMetaWarning } from './types';
+
+type ReplayConsoleLevels = Extract<ConsoleLevel, 'info' | 'warn' | 'error' | 'log'>;
+type LoggerMethod = (...args: unknown[]) => void;
+type LoggerConsoleMethods = Record<ReplayConsoleLevels, LoggerMethod>;
+
+interface LoggerConfig {
+  captureExceptions: boolean;
+  traceInternals: boolean;
+}
+
+// Duplicate from replay-internal
+interface ReplayLogger extends LoggerConsoleMethods {
+  /**
+   * Calls `logger.info` but saves breadcrumb in the next tick due to race
+   * conditions before replay is initialized.
+   */
+  infoTick: LoggerMethod;
+  /**
+   * Captures exceptions (`Error`) if "capture internal exceptions" is enabled
+   */
+  exception: LoggerMethod;
+  /**
+   * Configures the logger with additional debugging behavior
+   */
+  setConfig(config: Partial<LoggerConfig>): void;
+}
+
+function _serializeFormData(formData: FormData): string {
+  // 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'
+  // @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 | ReplayLogger,
+): [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) {
+    // RelayLogger
+    if (DEBUG_BUILD && logger && 'exception' in logger) {
+      logger.exception(error, 'Failed to serialize body', body);
+    } else if (DEBUG_BUILD && logger) {
+      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'];
+}

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;
+};