feat(tracing): add body size for fetch requests (#7935)

Co-authored-by: Nar Saynorath <nar.saynorath@sentry.io>
Co-authored-by: Abhijeet Prasad <aprasad@sentry.io>

Author: 3 people

packages/tracing-internal/src/browser/request.ts

@@ -186,6 +186,9 @@ export function fetchCallback(
     return;
   }
 
+  const contentLength =
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+    handlerData.response && handlerData.response.headers && handlerData.response.headers.get('content-length');
   const currentScope = getCurrentHub().getScope();
   const currentSpan = currentScope && currentScope.getSpan();
   const activeTransaction = currentSpan && currentSpan.transaction;
@@ -196,6 +199,7 @@ export function fetchCallback(
       data: {
         url,
         type: 'fetch',
+        ...(contentLength ? { 'http.response_content_length': contentLength } : {}),
         'http.method': method,
       },
       description: `${method} ${url}`,

packages/tracing-internal/test/browser/request.test.ts

@@ -213,6 +213,25 @@ describe('callbacks', () => {
 
       expect(newSpan).toBeUndefined();
     });
+
+    it('adds content-length to span data', () => {
+      const spans = {};
+      fetchHandlerData['response'] = { headers: { 'content-length': 123 } };
+
+      // triggered by request being sent
+      fetchCallback(fetchHandlerData, alwaysCreateSpan, alwaysAttachHeaders, spans);
+
+      const newSpan = transaction.spanRecorder?.spans[1] as Span;
+
+      expect(newSpan).toBeDefined();
+      expect(newSpan).toBeInstanceOf(Span);
+      expect(newSpan.data).toEqual({
+        'http.response_content_length': 123,
+        'http.method': 'GET',
+        type: 'fetch',
+        url: 'http://dogs.are.great/',
+      });
+    });
   });
 
   describe('xhrCallback()', () => {