feat(integrations): Add HTTPClient integration

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',
+ },
+ },
+ },
+ });
+ },
+);