feat: Give access to XHR requests body in breadcrumb hint (#2904)

Author: kamilogorek

packages/browser/src/integrations/breadcrumbs.ts

@@ -220,6 +220,7 @@ export class Breadcrumbs implements Integration {
         },
         {
           xhr: handlerData.xhr,
+          ...(handlerData.xhr.__sentry_xhr__.body && { input: handlerData.xhr.__sentry_xhr__.body }),
         },
       );
 

packages/browser/test/integration/suites/breadcrumbs.js

@@ -80,6 +80,36 @@ describe("breadcrumbs", function() {
         assert.equal(summary.breadcrumbs[0].type, "http");
         assert.equal(summary.breadcrumbs[0].category, "xhr");
         assert.equal(summary.breadcrumbs[0].data.method, "GET");
+        // To make sure that we are not providing this key for non-post requests
+        assert.equal(summary.breadcrumbHints[0].input, undefined);
+      });
+    }
+  );
+
+  it(
+    optional(
+      "should give access to request body for XMLHttpRequest POST requests",
+      IS_LOADER
+    ),
+    function() {
+      return runInSandbox(sandbox, { manual: true }, function() {
+        var xhr = new XMLHttpRequest();
+        xhr.open("POST", "/base/subjects/example.json");
+        xhr.send('{"foo":"bar"}');
+        waitForXHR(xhr, function() {
+          Sentry.captureMessage("test");
+          window.finalizeManualTest();
+        });
+      }).then(function(summary) {
+        // The async loader doesn't wrap XHR
+        if (IS_LOADER) {
+          return;
+        }
+        assert.equal(summary.breadcrumbs.length, 1);
+        assert.equal(summary.breadcrumbs[0].type, "http");
+        assert.equal(summary.breadcrumbs[0].category, "xhr");
+        assert.equal(summary.breadcrumbs[0].data.method, "POST");
+        assert.equal(summary.breadcrumbHints[0].input, '{"foo":"bar"}');
       });
     }
   );

packages/utils/src/instrument.ts

@@ -180,13 +180,16 @@ function instrumentFetch(): void {
   });
 }
 
+type XHRSendInput = null | Blob | BufferSource | FormData | URLSearchParams | string;
+
 /** JSDoc */
 interface SentryWrappedXMLHttpRequest extends XMLHttpRequest {
   [key: string]: any;
   __sentry_xhr__?: {
     method?: string;
     url?: string;
     status_code?: number;
+    body?: XHRSendInput;
   };
 }
 
@@ -220,6 +223,9 @@ function instrumentXHR(): void {
     return;
   }
 
+  // Poor man implementation of ES6 `Map` by tracking and keeping in sync key and value separately.
+  const requestKeys: XMLHttpRequest[] = [];
+  const requestValues: Array<any>[] = [];
   const xhrproto = XMLHttpRequest.prototype;
 
   fill(xhrproto, 'open', function(originalOpen: () => void): () => void {
@@ -250,6 +256,21 @@ function instrumentXHR(): void {
           } catch (e) {
             /* do nothing */
           }
+
+          try {
+            const requestPos = requestKeys.indexOf(xhr);
+            if (requestPos !== -1) {
+              // Make sure to pop both, key and value to keep it in sync.
+              requestKeys.splice(requestPos);
+              const args = requestValues.splice(requestPos)[0];
+              if (xhr.__sentry_xhr__ && args[0] !== undefined) {
+                xhr.__sentry_xhr__.body = args[0] as XHRSendInput;
+              }
+            }
+          } catch (e) {
+            /* do nothing */
+          }
+
           triggerHandlers('xhr', {
             args,
             endTimestamp: Date.now(),
@@ -276,6 +297,9 @@ function instrumentXHR(): void {
 
   fill(xhrproto, 'send', function(originalSend: () => void): () => void {
     return function(this: SentryWrappedXMLHttpRequest, ...args: any[]): void {
+      requestKeys.push(this);
+      requestValues.push(args);
+
       triggerHandlers('xhr', {
         args,
         startTimestamp: Date.now(),