Add graphqlclient CDN bundle & fix bundle tests

Author: mydea

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

@@ -2,7 +2,7 @@ import { expect } from '@playwright/test';
 import type { Event } from '@sentry/core';
 
 import { sentryTest } from '../../../../utils/fixtures';
-import { getFirstSentryEnvelopeRequest } from '../../../../utils/helpers';
+import { getFirstSentryEnvelopeRequest, shouldSkipTracingTest } from '../../../../utils/helpers';
 
 // Duplicate from subject.js
 const query = `query Test{
@@ -13,7 +13,11 @@ const query = `query Test{
 }`;
 const queryPayload = JSON.stringify({ query });
 
-sentryTest('should update spans for GraphQL Fetch requests', async ({ getLocalTestUrl, page }) => {
+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 => {
@@ -57,7 +61,11 @@ sentryTest('should update spans for GraphQL Fetch requests', async ({ getLocalTe
   });
 });
 
-sentryTest('should update breadcrumbs for GraphQL Fetch requests', async ({ getLocalTestUrl, page }) => {
+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 => {

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

@@ -1,12 +1,14 @@
 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(),
-    Sentry.graphqlClientIntegration({
+    graphqlClientIntegration({
       endpoints: ['http://sentry-test.io/foo'],
     }),
   ],

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

@@ -2,7 +2,7 @@ import { expect } from '@playwright/test';
 import type { Event } from '@sentry/core';
 
 import { sentryTest } from '../../../../utils/fixtures';
-import { getFirstSentryEnvelopeRequest } from '../../../../utils/helpers';
+import { getFirstSentryEnvelopeRequest, shouldSkipTracingTest } from '../../../../utils/helpers';
 
 // Duplicate from subject.js
 const query = `query Test{
@@ -14,6 +14,10 @@ const query = `query Test{
 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 => {
@@ -58,6 +62,10 @@ sentryTest('should update spans for GraphQL XHR requests', async ({ getLocalTest
 });
 
 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 => {

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/rollup.bundle.config.mjs

@@ -12,6 +12,7 @@ const reexportedPluggableIntegrationFiles = [
   'rewriteframes',
   'feedback',
   'modulemetadata',
+  'graphqlclient',
 ];
 
 browserPluggableIntegrationFiles.forEach(integrationName => {

packages/browser/src/integrations-bundle/index.graphqlclient.ts

@@ -0,0 +1 @@
+export { graphqlClientIntegration } from '../integrations/graphqlClient';

packages/browser/src/integrations/graphqlClient.ts

@@ -193,6 +193,7 @@ export function getGraphQLRequestPayload(payload: string): GraphQLRequestPayload
 }
 
 /**
- * GraphQL Client integration for the browser.
+ * This integration ensures that GraphQL requests made in the browser
+ * have their GraphQL-specific data captured and attached to spans and breadcrumbs.
  */
 export const graphqlClientIntegration = defineIntegration(_graphqlClientIntegration);

packages/browser/src/utils/lazyLoadIntegration.ts

@@ -15,6 +15,7 @@ const LazyLoadableIntegrations = {
   linkedErrorsIntegration: 'linkederrors',
   dedupeIntegration: 'dedupe',
   extraErrorDataIntegration: 'extraerrordata',
+  graphqlClientIntegration: 'graphqlclient',
   httpClientIntegration: 'httpclient',
   reportingObserverIntegration: 'reportingobserver',
   rewriteFramesIntegration: 'rewriteframes',