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,97 @@
+import { expect } from '@playwright/test';
+import type { Event } from '@sentry/types';
+
+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 ({ getLocalTestPath, page }) => {
+ 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,
+ 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',
+ body: queryPayload,
+ }),
+ });
+});
+
+sentryTest('should update breadcrumbs for GraphQL Fetch requests', async ({ getLocalTestPath, page }) => {
+ 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);
+
+ 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: {
+ query: query,
+ operationName: '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://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,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,96 @@
+import { expect } from '@playwright/test';
+import type { Event } from '@sentry/types';
+
+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 ({ getLocalTestPath, page }) => {
+ 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,
+ 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',
+ body: queryPayload,
+ },
+ });
+});
+
+sentryTest('should update breadcrumbs for GraphQL XHR requests', async ({ getLocalTestPath, page }) => {
+ 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);
+
+ 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: {
+ query: query,
+ operationName: 'query Test',
+ },
+ },
+ });
+});

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/breadcrumbs.ts

@@ -17,6 +17,7 @@ import type {
  HandlerDataHistory,
  HandlerDataXhr,
  IntegrationFn,
+ SeverityLevel,
  XhrBreadcrumbData,
  XhrBreadcrumbHint,
 } from '@sentry/types';
@@ -26,6 +27,7 @@ import {
  getBreadcrumbLogLevelFromHttpStatusCode,
  getComponentName,
  getEventDescription,
+ getGraphQLRequestPayload,
  htmlTreeAsString,
  logger,
  parseUrl,
@@ -248,17 +250,16 @@ function _getXhrBreadcrumbHandler(client: Client): (handlerData: HandlerDataXhr)
  endTimestamp,
  };
 
- const level = getBreadcrumbLogLevelFromHttpStatusCode(status_code);
+ const breadcrumb = {
+ category: 'xhr',
+ data,
+ type: 'http',
+ level: getBreadcrumbLogLevelFromHttpStatusCode(status_code),
+ };
 
- addBreadcrumb(
- {
- category: 'xhr',
- data,
- type: 'http',
- level,
- },
- hint,
- );
+ client.emit('outgoingRequestBreadcrumbStart', breadcrumb, { body: getGraphQLRequestPayload(body as string) });
+
+ addBreadcrumb(breadcrumb, hint);
  };
 }
 
@@ -292,15 +293,18 @@ function _getFetchBreadcrumbHandler(client: Client): (handlerData: HandlerDataFe
  endTimestamp,
  };
 
- addBreadcrumb(
- {
- category: 'fetch',
- data,
- level: 'error',
- type: 'http',
- },
- hint,
- );
+ const breadcrumb = {
+ category: 'fetch',
+ data,
+ level: 'error' as SeverityLevel,
+ type: 'http',
+ };
+
+ client.emit('outgoingRequestBreadcrumbStart', breadcrumb, {
+ body: getGraphQLRequestPayload(handlerData.fetchData.body as string),
+ });
+
+ addBreadcrumb(breadcrumb, hint);
  } else {
  const response = handlerData.response as Response | undefined;
  const data: FetchBreadcrumbData = {
@@ -313,17 +317,19 @@ function _getFetchBreadcrumbHandler(client: Client): (handlerData: HandlerDataFe
  startTimestamp,
  endTimestamp,
  };
- const level = getBreadcrumbLogLevelFromHttpStatusCode(data.status_code);
-
- addBreadcrumb(
- {
- category: 'fetch',
- data,
- type: 'http',
- level,
- },
- hint,
- );
+
+ const breadcrumb = {
+ category: 'fetch',
+ data,
+ type: 'http',
+ level: getBreadcrumbLogLevelFromHttpStatusCode(data.status_code),
+ };
+
+ client.emit('outgoingRequestBreadcrumbStart', breadcrumb, {
+ body: getGraphQLRequestPayload(handlerData.fetchData.body as string),
+ });
+
+ addBreadcrumb(breadcrumb, hint);
  }
  };
 }