bug(exporter-collector): headers are appended to existing one

[niko-achilles]

Please answer these questions before submitting a bug report.

What version of OpenTelemetry are you using?

"@opentelemetry/context-zone": "^0.23.0",
"@opentelemetry/exporter-collector": "^0.23.0",
"@opentelemetry/instrumentation": "^0.23.0",
"@opentelemetry/auto-instrumentations-web": "^0.23.0",
"@opentelemetry/propagator-b3": "^0.23.0",
"@opentelemetry/tracing": "^0.23.0",
"@opentelemetry/web": "^0.23.0",
"@opentelemetry/resources": "0.23.0",
"@opentelemetry/semantic-conventions": "0.23.0",

Collector docker image: otel/opentelemetry-collector-contrib:0.29.0 and/or otel/opentelemetry-collector:0.29.0

What version of Node are you using?

14 --lts : latest

Please provide the code you used to setup the OpenTelemetry SDK

https://github.com/niko-achilles/otlp-logzio-fullstack/blob/main/frontend/lib/useOpentelemetry.js#L25

What did you do?

If i provide explicitly , the content type of application/json as follows:

provider.addSpanProcessor(
    new SimpleSpanProcessor(
      new CollectorTraceExporter({
        url: "http://localhost:55681/v1/traces",
        headers: {"Content-Type": "application/json"},
      })
    )
  );

Then the zone.js script makes a request of type xhr and applies in content-type application/json twice ,
Content-type: application/json application/json

If i do not provide explicitly the Content-Type in the headers object , then
zone.js script makes a request of type xhr and applies in content-type : text/plain;charset=utf8

What did you expect to see?

content-type: application/json in the request of zone.js .

What did you see instead?

zone.js script makes a request of type xhr and applies in content-type : text/plain;charset=utf8
or
zone.js script makes a request of type xhr and applies in content-type application/json twice ,
Content-type: application/json application/json.

Additional context

If i write implicit , having the headers object as follows:

provider.addSpanProcessor(
    new SimpleSpanProcessor(
      new CollectorTraceExporter({
        url: "http://localhost:55681/v1/traces",
        headers: {},
      })
    )
  );

Then the traces are collected, because zone.js applies as content-type: application/json

Add any other context about the problem here.

[vmarchaud]

This is duplicate with #2321 so i'll close this one, the problem comes from the collector exporter / collector itself and not zonejs

[niko-achilles]

hi @vmarchaud , this issue was raised because of the usage of CollectorTraceExporter api .
The situation is thatbform developer point of view the explicit setup CollectorTraceExporter as follows:

provider.addSpanProcessor(
    new SimpleSpanProcessor(
      new CollectorTraceExporter({
        url: "http://localhost:55681/v1/traces",
        headers: {"Content-Type": "application/json"},
      })
    )
  );

results in a headers object where Content-Type is set twice. "Content-Type": "application/json application/json"

If i implicit define it as follows:

provider.addSpanProcessor(
    new SimpleSpanProcessor(
      new CollectorTraceExporter({
        url: "http://localhost:55681/v1/traces",
        headers: {},
      })
    )
  );

results are that the headers object hat a Content-Type of: "Content-Type": "application/json"

If i implicit omit the headers object it as follows:

provider.addSpanProcessor(
    new SimpleSpanProcessor(
      new CollectorTraceExporter({
        url: "http://localhost:55681/v1/traces",
      })
    )
  );

results are that the headers object hat a Content-Type of: "Content-Type": "plain/text;charset=utf-8"

Maybe the design of the CollectorTraceExporter api needs an enhancement for being more explicit than implicit ?
i mean this code :

provider.addSpanProcessor(
    new SimpleSpanProcessor(
      new CollectorTraceExporter({
        url: "http://localhost:55681/v1/traces",
        headers: {"Content-Type": "application/json"},
      })
    )
  );

should result in a headers object where Content-Type is application/json . "Content-Type": "application/json"

[vmarchaud]

I believe i understood the issue which is duplicate of #2321 (fixes is here #2336), isn't that the case ?

[niko-achilles]

@vmarchaud i think actually not .
This issue may rather be an improvement than a bug because:
if headers config is present , xhr is used
else if not headers config is present , beacon is used

Additionally if headers config is present and the application developer provides explicit the Content-Type: "application/json"
then xhr is used and the Content Type is applied twice: "Content-Type": "application/json application/json"

[vmarchaud]

if headers config is present , xhr is used
else if not headers config is present , beacon is used

This is because headers can't be used as-is with beacon (see this), thats one of the things that #2336 should fix.

Additionally if headers config is present and the application developer provides explicit the Content-> Type: "application/json"
then xhr is used and the Content Type is applied twice: "Content-Type": "application/json application/json"

Could you provide a full example of this ? I can't reproduce locally

[niko-achilles]

sure, setup: https://github.com/niko-achilles/otlp-logzio-fullstack/blob/dev/frontend/lib/useOpentelemetry.js#L29

then in network tab of chrome dev tools i see this:

Notice:
Request Headers -> Content-Type: application/json application/json
applied twice.

[niko-achilles]

hi @vmarchaud managed to reproduce locally given the infos above ? I am asking with the motivation that maybe i have done something wrong on the setup on my side ? i get Request Headers -> Content-Type: application/json application/json

[vmarchaud]

I did not, i'll reopen this in the mean time but if you have the time to make PR that would be welcome :)

[niko-achilles]

@vmarchaud i checked the code in opentelemetry-js/utils : https://github.com/open-telemetry/opentelemetry-js/blob/main/packages/opentelemetry-exporter-collector/src/platform/browser/util.ts#L59
And because of the XMLHttpRequestStandard as documented here: https://xhr.spec.whatwg.org/#the-setrequestheader()-method

when setting the same header twice , the value(a.k.a body) of the header is appended .

But before making a PR i would like to ask , how should an application developer use the api of CollectorExporter ?
I mean is the CollectorExporter config object only for usage of custom headers ? -> this is how it is mentioned in some opentelemetry examples .

Or should the api of CollectorExporter correct the header values, e.g. in case the developer applied a Content-Type of application/json then the api of CollectorExporter should not set the header value twice in this method https://github.com/open-telemetry/opentelemetry-js/blob/main/packages/opentelemetry-exporter-collector/src/platform/browser/util.ts#L59 ?