fix(instrumentation-fetch): Handling null-body-status responses (#6037)

Co-authored-by: Wolfgang Therrien <wolfgang@wolfgangcodes.com>

Author: m0sa

experimental/CHANGELOG.md

@@ -27,6 +27,8 @@ For notes on migrating to 2.x / 0.200.x see [the upgrade guide](doc/upgrade-to-2
 
 ### :bug: Bug Fixes
 
+* fix(instrumentation-fetch): Handling null-body-status responses [#6037](https://github.com/open-telemetry/opentelemetry-js/pull/6037) @m0sa
+
 ### :books: Documentation
 
 ### :house: Internal

experimental/packages/opentelemetry-instrumentation-fetch/src/fetch.ts

@@ -507,8 +507,14 @@ export class FetchInstrumentation extends InstrumentationBase<FetchInstrumentati
             const body = resClone.body;
             if (body) {
               const reader = body.getReader();
-
-              const wrappedBody = withCancelPropagation(response.body, reader);
+              const isNullBodyStatus =
+                // 101 responses and protocol upgrading is handled internally by the browser
+                response.status === 204 ||
+                response.status === 205 ||
+                response.status === 304;
+              const wrappedBody = isNullBodyStatus
+                ? null
+                : withCancelPropagation(response.body, reader);
 
               proxiedResponse = new Response(wrappedBody, {
                 status: response.status,

experimental/packages/opentelemetry-instrumentation-fetch/test/fetch.test.ts

@@ -369,6 +369,15 @@ describe('fetch', () => {
           msw.http.get('/boom', () => {
             return new msw.HttpResponse(null, { status: 500 });
           }),
+          msw.http.get('/null-body-204', () => {
+            return new msw.HttpResponse(null, { status: 204 });
+          }),
+          msw.http.get('/null-body-205', () => {
+            return new msw.HttpResponse(null, { status: 205 });
+          }),
+          msw.http.get('/null-body-304', () => {
+            return new msw.HttpResponse(null, { status: 304 });
+          }),
         ],
         callback = () => fetch('/api/status.json'),
         config = {},
@@ -391,6 +400,40 @@ describe('fetch', () => {
         return { rootSpan, response };
       };
 
+      describe('null-bodied response', () => {
+        // https://chromium.googlesource.com/chromium/src/+/ac85ca2a9cb8c76a37f9d7a6c611c24114f1f05d/third_party/WebKit/Source/core/fetch/Response.cpp#106
+        it('204 (No Content) will correctly end the span', async () => {
+          await tracedFetch({
+            callback: () => fetch('/null-body-204'),
+          });
+          assert.strictEqual(exportedSpans.length, 1);
+          assert.strictEqual(
+            exportedSpans[0].attributes[ATTR_HTTP_STATUS_CODE],
+            204
+          );
+        });
+        it('205 (Reset Content) will correctly end the span', async () => {
+          await tracedFetch({
+            callback: () => fetch('/null-body-205'),
+          });
+          assert.strictEqual(exportedSpans.length, 1);
+          assert.strictEqual(
+            exportedSpans[0].attributes[ATTR_HTTP_STATUS_CODE],
+            205
+          );
+        });
+        it('304 (Not Modified) will correctly end the span', async () => {
+          await tracedFetch({
+            callback: () => fetch('/null-body-304'),
+          });
+          assert.strictEqual(exportedSpans.length, 1);
+          assert.strictEqual(
+            exportedSpans[0].attributes[ATTR_HTTP_STATUS_CODE],
+            304
+          );
+        });
+      });
+
       describe('simple request', () => {
         let rootSpan: api.Span | undefined;
         let response: Response | undefined;