Wrong request headers when instrument the fetch with 2 parameters and they both have headers

[Kaciras]

Is there an existing issue for this?

• I have checked for existing issues https://github.com/getsentry/sentry-javascript/issues
• I have reviewed the documentation https://docs.sentry.io/
• I am using the latest SDK release https://github.com/getsentry/sentry-javascript/releases

How do you use Sentry?

Sentry Saas (sentry.io)

Which SDK are you using?

@sentry/vue

SDK Version

7.93.0

Framework Version

Vue 3.4.10

Link to Sentry event

No response

SDK Setup

Sentry.init({
	// dsn: "",
	tracesSampleRate: 1.0,
	integrations: [
		new Sentry.BrowserTracing(),
	],
});

Steps to Reproduce

const request = new Request("/test", {
	headers: { foo: "11" },
});
fetch(request, {
	headers: { bar: "22" },
});

Expected Result

The request should have the header bar: 22.

Actual Result

I believe it was a mistake in selecting the request headers to be merged.

sentry-javascript/packages/tracing-internal/src/common/fetch.ts

Lines 151 to 152 in 2171633

	const headers =
	typeof Request !== 'undefined' && isInstanceOf(request, Request) ? (request as Request).headers : options.headers;

[Lms24]

Hey @Kaciras, thanks for writing in and for the reproduction steps! I'll take a look at this today, will keep you up to date on my findings.

[Lms24]

Hi @Kaciras again, thank you for the reproduction steps and for even finding the incorrect line of code. I tested this, both live in Chromium as well as in our integration test setup and could confirm that browsers indeed seem to prefer the init options over the fetch input option (i.e. the Request passed to the first argument of the fetch call). So you were right, our instrumentation forwarded the wrong headers. I pushed a fix in #10176 which will be included in the next release. We'll probably publish the next release around mid-week.