fix(browser): Ensure request from diagnoseSdkConnectivity does not create span

Author: Lms24

dev-packages/browser-integration-tests/suites/public-api/diagnoseSdkConnectivity/init.js

@@ -0,0 +1,9 @@
+import * as Sentry from '@sentry/browser';
+
+window.Sentry = Sentry;
+
+Sentry.init({
+  dsn: 'https://[email protected]/1337',
+  integrations: [Sentry.browserTracingIntegration({ idleTimeout: 3000, childSpanTimeout: 3000 })],
+  tracesSampleRate: 1,
+});

dev-packages/browser-integration-tests/suites/public-api/diagnoseSdkConnectivity/subject.js

@@ -0,0 +1 @@
+Sentry.diagnoseSdkConnectivity().then(res => console.log('SDK connectivity:', res));

dev-packages/browser-integration-tests/suites/public-api/diagnoseSdkConnectivity/test.ts

@@ -0,0 +1,38 @@
+import { expect } from '@playwright/test';
+import { sentryTest } from '../../../utils/fixtures';
+import { envelopeRequestParser, shouldSkipTracingTest, waitForTransactionRequest } from '../../../utils/helpers';
+
+sentryTest('makes a call to sentry.io to diagnose SDK connectivity', async ({ getLocalTestUrl, page }) => {
+  if (shouldSkipTracingTest()) {
+    sentryTest.skip();
+  }
+
+  const pageloadRequestPromise = waitForTransactionRequest(page, e => e.contexts?.trace?.op === 'pageload');
+
+  // mock sdk connectivity url to avoid making actual request to sentry.io
+  page.route('**/api/4509632503087104/envelope/**/*', route => {
+    return route.fulfill({
+      status: 200,
+      body: '{}',
+    });
+  });
+
+  let diagnoseMessage: string | undefined;
+  page.on('console', msg => {
+    if (msg.text().includes('SDK connectivity:')) {
+      diagnoseMessage = msg.text();
+    }
+  });
+
+  const url = await getLocalTestUrl({ testDir: __dirname });
+  await page.goto(url);
+
+  const pageLoadEvent = envelopeRequestParser(await pageloadRequestPromise);
+
+  // udnefined is expected and means the request was successful
+  expect(diagnoseMessage).toEqual('SDK connectivity: undefined');
+
+  // the request to sentry.io should not be traced, hence no http.client span should be sent.
+  const httpClientSpans = pageLoadEvent.spans?.filter(s => s.op === 'http.client');
+  expect(httpClientSpans).toHaveLength(0);
+});

packages/browser/src/diagnose-sdk.ts

@@ -1,4 +1,4 @@
-import { getClient } from '@sentry/core';
+import { getClient, suppressTracing } from '@sentry/core';
 
 /**
  * A function to diagnose why the SDK might not be successfully sending data.
@@ -23,20 +23,22 @@ export async function diagnoseSdkConnectivity(): Promise<
   }
 
   try {
-    // If fetch throws, there is likely an ad blocker active or there are other connective issues.
-    await fetch(
-      // We are using the
-      // - "sentry-sdks" org with id 447951 not to pollute any actual organizations.
-      // - "diagnose-sdk-connectivity" project with id 4509632503087104
-      // - the public key of said org/project, which is disabled in the project settings
-      // => this DSN: https://[email protected]/4509632503087104 (i.e. disabled)
-      'https://o447951.ingest.sentry.io/api/4509632503087104/envelope/?sentry_version=7&sentry_key=c1dfb07d783ad5325c245c1fd3725390&sentry_client=sentry.javascript.browser%2F1.33.7',
-      {
-        body: '{}',
-        method: 'POST',
-        mode: 'cors',
-        credentials: 'omit',
-      },
+    await suppressTracing(() =>
+      // If fetch throws, there is likely an ad blocker active or there are other connective issues.
+      fetch(
+        // We are using the
+        // - "sentry-sdks" org with id 447951 not to pollute any actual organizations.
+        // - "diagnose-sdk-connectivity" project with id 4509632503087104
+        // - the public key of said org/project, which is disabled in the project settings
+        // => this DSN: https://[email protected]/4509632503087104 (i.e. disabled)
+        'https://o447951.ingest.sentry.io/api/4509632503087104/envelope/?sentry_version=7&sentry_key=c1dfb07d783ad5325c245c1fd3725390&sentry_client=sentry.javascript.browser%2F1.33.7',
+        {
+          body: '{}',
+          method: 'POST',
+          mode: 'cors',
+          credentials: 'omit',
+        },
+      ),
     );
   } catch {
     return 'sentry-unreachable';

packages/browser/test/diagnose-sdk.test.ts

@@ -162,4 +162,18 @@ describe('diagnoseSdkConnectivity', () => {
       credentials: 'omit',
     });
   });
+
+  it('calls suppressTracing to avoid tracing the fetch call to sentry', async () => {
+    const suppressTracingSpy = vi.spyOn(sentryCore, 'suppressTracing');
+
+    const mockClient: Partial<Client> = {
+      getDsn: vi.fn().mockReturnValue('https://[email protected]/123'),
+    };
+    mockGetClient.mockReturnValue(mockClient);
+    mockFetch.mockResolvedValue(new Response('{}', { status: 200 }));
+
+    await diagnoseSdkConnectivity();
+
+    expect(suppressTracingSpy).toHaveBeenCalledTimes(1);
+  });
 });