fix(tracing): Use integer for content length (#8152)

Author: AbhiPrasad

packages/nextjs/test/integration/test/client/tracingFetch.test.ts

@@ -31,7 +31,12 @@ test('should correctly instrument `fetch` for performance tracing', async ({ pag
   expect(transaction[0].spans).toEqual(
     expect.arrayContaining([
       expect.objectContaining({
-        data: { 'http.method': 'GET', url: 'http://example.com', type: 'fetch' },
+        data: {
+          'http.method': 'GET',
+          url: 'http://example.com',
+          type: 'fetch',
+          'http.response_content_length': expect.any(Number),
+        },
         description: 'GET http://example.com',
         op: 'http.client',
         parent_span_id: expect.any(String),

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

@@ -176,11 +176,13 @@ export function fetchCallback(
         // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
         span.setHttpStatus(handlerData.response.status);
 
-        const contentLength =
+        const contentLength: string =
           // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
           handlerData.response && handlerData.response.headers && handlerData.response.headers.get('content-length');
-        if (contentLength > 0) {
-          span.setData('http.response_content_length', contentLength);
+
+        const contentLengthNum = parseInt(contentLength);
+        if (contentLengthNum > 0) {
+          span.setData('http.response_content_length', contentLengthNum);
         }
       } else if (handlerData.error) {
         span.setStatus('internal_error');

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

@@ -214,18 +214,30 @@ describe('callbacks', () => {
       expect(newSpan).toBeUndefined();
     });
 
-    it('adds content-length to span data', () => {
-      const spans = {};
-      fetchHandlerData['response'] = { headers: { 'content-length': 123 } };
+    it('adds content-length to span data on finish', () => {
+      const spans: Record<string, Span> = {};
 
       // 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({
+
+      const postRequestFetchHandlerData = {
+        ...fetchHandlerData,
+        endTimestamp,
+        response: { status: 404, headers: { get: () => 123 } },
+      };
+
+      // triggered by response coming back
+      fetchCallback(postRequestFetchHandlerData, alwaysCreateSpan, alwaysAttachHeaders, spans);
+
+      const finishedSpan = transaction.spanRecorder?.spans[1] as Span;
+
+      expect(finishedSpan).toBeDefined();
+      expect(finishedSpan).toBeInstanceOf(Span);
+      expect(finishedSpan.data).toEqual({
         'http.response_content_length': 123,
         'http.method': 'GET',
         type: 'fetch',

packages/utils/test/envelope.test.ts

@@ -36,7 +36,7 @@ describe('envelope', () => {
       expect(headers).toEqual({ event_id: 'aa3ff046696b4bc6b609ce6d28fde9e2', sent_at: '123' });
     });
 
-    it.only('serializes an envelope with attachments', () => {
+    it('serializes an envelope with attachments', () => {
       const items: EventEnvelope[1] = [
         [{ type: 'event' }, { event_id: 'aa3ff046696b4bc6b609ce6d28fde9e2' }],
         [{ type: 'attachment', filename: 'bar.txt', length: 6 }, Uint8Array.from([1, 2, 3, 4, 5, 6])],