feat(tracing): Track span status for fetch requests (#2835)

Author: AbhiPrasad

packages/tracing/src/browser/request.ts

@@ -48,6 +48,7 @@ export interface FetchData {
     // span_id
     __span?: string;
   };
+  response?: Response;
   startTimestamp: number;
   endTimestamp?: number;
 }
@@ -137,6 +138,10 @@ export function _fetchCallback(
   if (handlerData.endTimestamp && handlerData.fetchData.__span) {
     const span = spans[handlerData.fetchData.__span];
     if (span) {
+      const response = handlerData.response;
+      if (response) {
+        span.setHttpStatus(response.status);
+      }
       span.finish();
 
       // eslint-disable-next-line @typescript-eslint/no-dynamic-delete

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

@@ -1,7 +1,7 @@
 import { BrowserClient } from '@sentry/browser';
 import { Hub, makeMain } from '@sentry/hub';
 
-import { Span, Transaction } from '../../src';
+import { Span, SpanStatus, Transaction } from '../../src';
 import { _fetchCallback, FetchData, registerRequestInstrumentation } from '../../src/browser/request';
 import { addExtensionMethods } from '../../src/hubextensions';
 
@@ -157,4 +157,33 @@ describe('_fetchCallback()', () => {
       fail('Transaction does not have span recorder');
     }
   });
+
+  it('sets response status on finish', () => {
+    const shouldCreateSpan = (_: string): boolean => true;
+    const data: FetchData = {
+      args: ['/users'],
+      fetchData: {
+        method: 'GET',
+        url: '/users',
+      },
+      startTimestamp: 1595509730275,
+    };
+    const spans: Record<string, Span> = {};
+
+    // Start fetch request
+    _fetchCallback(data, shouldCreateSpan, spans);
+
+    const newData = {
+      ...data,
+      endTimestamp: data.startTimestamp + 12343234,
+      response: { status: 404 } as Response,
+    };
+    // End fetch request
+    _fetchCallback(newData, shouldCreateSpan, spans);
+    if (transaction.spanRecorder) {
+      expect(transaction.spanRecorder.spans[1].status).toBe(SpanStatus.fromHttpCode(404));
+    } else {
+      fail('Transaction does not have span recorder');
+    }
+  });
 });