feat(integrations): Add HTTPClient integration (#6500)

Author: onurtemizkan

packages/browser/src/integrations/httpcontext.ts

@@ -36,7 +36,7 @@ export class HttpContext implements Integration {
           ...(referrer && { Referer: referrer }),
           ...(userAgent && { 'User-Agent': userAgent }),
         };
-        const request = { ...(url && { url }), headers };
+        const request = { ...event.request, ...(url && { url }), headers };
 
         return { ...event, request };
       }

packages/integration-tests/suites/integrations/httpclient/fetch/subject.js

@@ -0,0 +1,9 @@
+fetch('http://localhost:7654/foo', {
+  method: 'GET',
+  credentials: 'include',
+  headers: {
+    Accept: 'application/json',
+    'Content-Type': 'application/json',
+    Cache: 'no-cache',
+  },
+});

packages/integration-tests/suites/integrations/httpclient/fetch/test.ts

@@ -0,0 +1,73 @@
+import { expect } from '@playwright/test';
+import { Event } from '@sentry/types';
+
+import { sentryTest } from '../../../../utils/fixtures';
+import { getFirstSentryEnvelopeRequest } from '../../../../utils/helpers';
+
+sentryTest(
+  'should assign request and response context from a failed 500 fetch request',
+  async ({ getLocalTestPath, page }) => {
+    // Skipping this test when running in bundle mode, because `@sentry/integrations` bundle
+    // is not injected to the page with the current test setup.
+    if (process.env.PW_BUNDLE?.includes('bundle')) {
+      sentryTest.skip();
+    }
+
+    const url = await getLocalTestPath({ testDir: __dirname });
+
+    await page.route('**/foo', route => {
+      return route.fulfill({
+        status: 500,
+        body: JSON.stringify({
+          error: {
+            message: 'Internal Server Error',
+          },
+        }),
+        headers: {
+          'Content-Type': 'text/html',
+        },
+      });
+    });
+
+    const eventData = await getFirstSentryEnvelopeRequest<Event>(page, url);
+
+    expect(eventData.exception?.values).toHaveLength(1);
+
+    // Not able to get the cookies from the request/response because of Playwright bug
+    // https://github.com/microsoft/playwright/issues/11035
+    expect(eventData).toMatchObject({
+      message: 'HTTP Client Error with status code: 500',
+      exception: {
+        values: [
+          {
+            type: 'Error',
+            value: 'HTTP Client Error with status code: 500',
+            mechanism: {
+              type: 'http.client',
+              handled: true,
+            },
+          },
+        ],
+      },
+      request: {
+        url: 'http://localhost:7654/foo',
+        method: 'GET',
+        headers: {
+          accept: 'application/json',
+          cache: 'no-cache',
+          'content-type': 'application/json',
+        },
+      },
+      contexts: {
+        response: {
+          status_code: 500,
+          body_size: 45,
+          headers: {
+            'content-type': 'text/html',
+            'content-length': '45',
+          },
+        },
+      },
+    });
+  },
+);

packages/integration-tests/suites/integrations/httpclient/init.js

@@ -0,0 +1,11 @@
+import * as Sentry from '@sentry/browser';
+import { HttpClient } from '@sentry/integrations';
+
+window.Sentry = Sentry;
+
+Sentry.init({
+  dsn: 'https://public@dsn.ingest.sentry.io/1337',
+  integrations: [new HttpClient()],
+  tracesSampleRate: 1,
+  sendDefaultPii: true,
+});

packages/integration-tests/suites/integrations/httpclient/xhr/subject.js

@@ -0,0 +1,8 @@
+const xhr = new XMLHttpRequest();
+
+xhr.open('GET', 'http://localhost:7654/foo', true);
+xhr.withCredentials = true;
+xhr.setRequestHeader('Accept', 'application/json');
+xhr.setRequestHeader('Content-Type', 'application/json');
+xhr.setRequestHeader('Cache', 'no-cache');
+xhr.send();

packages/integration-tests/suites/integrations/httpclient/xhr/test.ts

@@ -0,0 +1,73 @@
+import { expect } from '@playwright/test';
+import { Event } from '@sentry/types';
+
+import { sentryTest } from '../../../../utils/fixtures';
+import { getFirstSentryEnvelopeRequest } from '../../../../utils/helpers';
+
+sentryTest(
+  'should assign request and response context from a failed 500 XHR request',
+  async ({ getLocalTestPath, page }) => {
+    // Skipping this test when running in bundle mode, because `@sentry/integrations` bundle
+    // is not injected to the page with the current test setup.
+    if (process.env.PW_BUNDLE?.includes('bundle')) {
+      sentryTest.skip();
+    }
+
+    const url = await getLocalTestPath({ testDir: __dirname });
+
+    await page.route('**/foo', route => {
+      return route.fulfill({
+        status: 500,
+        body: JSON.stringify({
+          error: {
+            message: 'Internal Server Error',
+          },
+        }),
+        headers: {
+          'Content-Type': 'text/html',
+        },
+      });
+    });
+
+    const eventData = await getFirstSentryEnvelopeRequest<Event>(page, url);
+
+    expect(eventData.exception?.values).toHaveLength(1);
+
+    // Not able to get the cookies from the request/response because of Playwright bug
+    // https://github.com/microsoft/playwright/issues/11035
+    expect(eventData).toMatchObject({
+      message: 'HTTP Client Error with status code: 500',
+      exception: {
+        values: [
+          {
+            type: 'Error',
+            value: 'HTTP Client Error with status code: 500',
+            mechanism: {
+              type: 'http.client',
+              handled: true,
+            },
+          },
+        ],
+      },
+      request: {
+        url: 'http://localhost:7654/foo',
+        method: 'GET',
+        headers: {
+          Accept: 'application/json',
+          Cache: 'no-cache',
+          'Content-Type': 'application/json',
+        },
+      },
+      contexts: {
+        response: {
+          status_code: 500,
+          body_size: 45,
+          headers: {
+            'content-type': 'text/html',
+            'content-length': '45',
+          },
+        },
+      },
+    });
+  },
+);