fix(instrumentation-fetch): compatibility with Map inputs for request headers with fetch

experimental/CHANGELOG.md

@@ -16,7 +16,7 @@ All notable changes to experimental packages in this project will be documented
 * fix(instrumentation-fetch): only access navigator if it is defined [#4063](https://github.com/open-telemetry/opentelemetry-js/pull/4063)
   * allows for experimental usage of this instrumentation with non-browser runtimes
 * fix(instrumentation-http): memory leak when responses are not resumed
-
+* fix(instrumentation-fetch): compatibility with Map types for fetch headers
 ## 0.45.1
 
 ### :bug: (Bug Fix)

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

@@ -168,6 +168,10 @@ export class FetchInstrumentation extends InstrumentationBase<
       api.propagation.inject(api.context.active(), options.headers, {
         set: (h, k, v) => h.set(k, typeof v === 'string' ? v : String(v)),
       });
+    } else if (options.headers instanceof Map) {
+      api.propagation.inject(api.context.active(), options.headers, {
+        set: (h, k, v) => h.set(k, typeof v === 'string' ? v : String(v)),
+      });
     } else {
       const headers: Partial<Record<string, unknown>> = {};
       api.propagation.inject(api.context.active(), headers);

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

@@ -503,7 +503,7 @@ describe('fetch', () => {
       assert.ok(r.headers.get('foo') === 'bar');
     });
 
-    it('should keep custom headers with url, untyped request object and typed headers object', () => {
+    it('should keep custom headers with url, untyped request object and typed (Headers) headers object', () => {
       const url = 'url';
       const init = {
         headers: new Headers({ foo: 'bar' }),
@@ -521,6 +521,17 @@ describe('fetch', () => {
       assert.ok(init.headers['foo'] === 'bar');
     });
 
+    it('should keep custom headers with url, untyped request object and typed (Map) headers object', () => {
+      const url = 'url';
+      const init = {
+        headers: new Map().set('foo', 'bar'),
+      };
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      /** @ts-ignore */
+      window.fetch(url, init).catch(() => {});
+      assert.ok(init.headers.get('foo') === 'bar');
+    });
+
     it('should pass request object as first parameter to the original function (#2411)', () => {
       const r = new Request(url);
       return window.fetch(r).then(