fix(browser): Respect tunnel in diagnoseSdkConnectivity (#18616)

The example pages the Sentry wizard adds to the codebase use
`.diagnoseSdkConnectivity()`. It's also possible to already set up a
tunnel through the wizard. However, this tunnel was previously not
respected.

Closes #17991

Author: s1gr1d

packages/browser/src/diagnose-sdk.ts

@@ -22,23 +22,28 @@ export async function diagnoseSdkConnectivity(): Promise<
     return 'no-dsn-configured';
   }
 
+  // Check if a tunnel is configured and use it if available
+  const tunnel = client.getOptions().tunnel;
+
+  // 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)
+  const defaultUrl =
+    'https://o447951.ingest.sentry.io/api/4509632503087104/envelope/?sentry_version=7&sentry_key=c1dfb07d783ad5325c245c1fd3725390&sentry_client=sentry.javascript.browser%2F1.33.7';
+
+  const url = tunnel || defaultUrl;
+
   try {
     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',
-        },
-      ),
+      fetch(url, {
+        body: '{}',
+        method: 'POST',
+        mode: 'cors',
+        credentials: 'omit',
+      }),
     );
   } catch {
     return 'sentry-unreachable';

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

@@ -42,6 +42,7 @@ describe('diagnoseSdkConnectivity', () => {
   it('returns "no-dsn-configured" when client.getDsn() returns undefined', async () => {
     const mockClient: Partial<Client> = {
       getDsn: vi.fn().mockReturnValue(undefined),
+      getOptions: vi.fn().mockReturnValue({}),
     };
     mockGetClient.mockReturnValue(mockClient);
 
@@ -55,6 +56,7 @@ describe('diagnoseSdkConnectivity', () => {
   it('returns "sentry-unreachable" when fetch throws an error', async () => {
     const mockClient: Partial<Client> = {
       getDsn: vi.fn().mockReturnValue('https://[email protected]/123'),
+      getOptions: vi.fn().mockReturnValue({}),
     };
     mockGetClient.mockReturnValue(mockClient);
     mockFetch.mockRejectedValue(new Error('Network error'));
@@ -77,6 +79,7 @@ describe('diagnoseSdkConnectivity', () => {
   it('returns "sentry-unreachable" when fetch throws a TypeError (common for network issues)', async () => {
     const mockClient: Partial<Client> = {
       getDsn: vi.fn().mockReturnValue('https://[email protected]/123'),
+      getOptions: vi.fn().mockReturnValue({}),
     };
     mockGetClient.mockReturnValue(mockClient);
     mockFetch.mockRejectedValue(new TypeError('Failed to fetch'));
@@ -91,6 +94,7 @@ describe('diagnoseSdkConnectivity', () => {
   it('returns undefined when connectivity check succeeds', async () => {
     const mockClient: Partial<Client> = {
       getDsn: vi.fn().mockReturnValue('https://[email protected]/123'),
+      getOptions: vi.fn().mockReturnValue({}),
     };
     mockGetClient.mockReturnValue(mockClient);
     mockFetch.mockResolvedValue(new Response('{}', { status: 200 }));
@@ -113,6 +117,7 @@ describe('diagnoseSdkConnectivity', () => {
   it('returns undefined even when fetch returns an error status (4xx, 5xx)', async () => {
     const mockClient: Partial<Client> = {
       getDsn: vi.fn().mockReturnValue('https://[email protected]/123'),
+      getOptions: vi.fn().mockReturnValue({}),
     };
     mockGetClient.mockReturnValue(mockClient);
     // Mock a 403 response (expected since the DSN is disabled)
@@ -129,6 +134,7 @@ describe('diagnoseSdkConnectivity', () => {
   it('uses the correct test endpoint URL', async () => {
     const mockClient: Partial<Client> = {
       getDsn: vi.fn().mockReturnValue('https://[email protected]/123'),
+      getOptions: vi.fn().mockReturnValue({}),
     };
     mockGetClient.mockReturnValue(mockClient);
     mockFetch.mockResolvedValue(new Response('{}', { status: 200 }));
@@ -149,6 +155,7 @@ describe('diagnoseSdkConnectivity', () => {
   it('uses correct fetch options', async () => {
     const mockClient: Partial<Client> = {
       getDsn: vi.fn().mockReturnValue('https://[email protected]/123'),
+      getOptions: vi.fn().mockReturnValue({}),
     };
     mockGetClient.mockReturnValue(mockClient);
     mockFetch.mockResolvedValue(new Response('{}', { status: 200 }));
@@ -168,6 +175,7 @@ describe('diagnoseSdkConnectivity', () => {
 
     const mockClient: Partial<Client> = {
       getDsn: vi.fn().mockReturnValue('https://[email protected]/123'),
+      getOptions: vi.fn().mockReturnValue({}),
     };
     mockGetClient.mockReturnValue(mockClient);
     mockFetch.mockResolvedValue(new Response('{}', { status: 200 }));
@@ -176,4 +184,72 @@ describe('diagnoseSdkConnectivity', () => {
 
     expect(suppressTracingSpy).toHaveBeenCalledTimes(1);
   });
+
+  it('uses tunnel URL when tunnel option is configured', async () => {
+    const tunnelUrl = '/monitor';
+    const mockClient: Partial<Client> = {
+      getDsn: vi.fn().mockReturnValue('https://[email protected]/123'),
+      getOptions: vi.fn().mockReturnValue({ tunnel: tunnelUrl }),
+    };
+    mockGetClient.mockReturnValue(mockClient);
+    mockFetch.mockResolvedValue(new Response('{}', { status: 200 }));
+
+    const result = await diagnoseSdkConnectivity();
+
+    expect(result).toBeUndefined();
+    expect(mockFetch).toHaveBeenCalledWith(
+      tunnelUrl,
+      expect.objectContaining({
+        body: '{}',
+        method: 'POST',
+        mode: 'cors',
+        credentials: 'omit',
+      }),
+    );
+  });
+
+  it('uses default URL when tunnel is not configured', async () => {
+    const mockClient: Partial<Client> = {
+      getDsn: vi.fn().mockReturnValue('https://[email protected]/123'),
+      getOptions: vi.fn().mockReturnValue({}),
+    };
+    mockGetClient.mockReturnValue(mockClient);
+    mockFetch.mockResolvedValue(new Response('{}', { status: 200 }));
+
+    const result = await diagnoseSdkConnectivity();
+
+    expect(result).toBeUndefined();
+    expect(mockFetch).toHaveBeenCalledWith(
+      'https://o447951.ingest.sentry.io/api/4509632503087104/envelope/?sentry_version=7&sentry_key=c1dfb07d783ad5325c245c1fd3725390&sentry_client=sentry.javascript.browser%2F1.33.7',
+      expect.objectContaining({
+        body: '{}',
+        method: 'POST',
+        mode: 'cors',
+        credentials: 'omit',
+      }),
+    );
+  });
+
+  it('returns "sentry-unreachable" when tunnel is configured but unreachable', async () => {
+    const tunnelUrl = '/monitor';
+    const mockClient: Partial<Client> = {
+      getDsn: vi.fn().mockReturnValue('https://[email protected]/123'),
+      getOptions: vi.fn().mockReturnValue({ tunnel: tunnelUrl }),
+    };
+    mockGetClient.mockReturnValue(mockClient);
+    mockFetch.mockRejectedValue(new Error('Network error'));
+
+    const result = await diagnoseSdkConnectivity();
+
+    expect(result).toBe('sentry-unreachable');
+    expect(mockFetch).toHaveBeenCalledWith(
+      tunnelUrl,
+      expect.objectContaining({
+        body: '{}',
+        method: 'POST',
+        mode: 'cors',
+        credentials: 'omit',
+      }),
+    );
+  });
 });