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

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

* Update experimental/CHANGELOG.md

Co-authored-by: Marc Pichler <[email protected]>

* adding description for ts-ignore

* fix(changlog): move entry to unreleased

* fix: add lint ignore

---------

Co-authored-by: Marc Pichler <[email protected]>

Author: rdeavila94

experimental/CHANGELOG.md

@@ -20,6 +20,7 @@ All notable changes to experimental packages in this project will be documented
 * fix(exporter-logs-otlp-grpc): set User-Agent header [#4398](https://github.com/open-telemetry/opentelemetry-js/pull/4398) @Vunovati
 * fix(exporter-logs-otlp-http): set User-Agent header [#4398](https://github.com/open-telemetry/opentelemetry-js/pull/4398) @Vunovati
 * fix(exporter-logs-otlp-proto): set User-Agent header [#4398](https://github.com/open-telemetry/opentelemetry-js/pull/4398) @Vunovati
+* fix(instrumentation-fetch): compatibility with Map types for fetch headers
 
 ### :books: (Refine Doc)
 

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 variable init not of RequestInit type
+      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(