AJAX request headers are lost when using window.fetch

[zdhr]

Version: 2.5.3

Bug Description

When Tracy modifies window.fetch in captureAjax, it losses original header information.

I suppose it's because options.headers in fetch isn't a standart object.

This will show empty object in dev console (chrome), even if some headers are set:

console.log(options.headers);

But this will print out headers names:

for (let key of options.headers.keys()) {
	console.log(key);
}

Steps To Reproduce

Send simple fetch request with some additional headers set, eg. X-Requested-With: XMLHttpRequest.

Here is simple code snippet you can run from browser dev console. It might 404, but that doesn't matter. Run the code and then look at the request in dev tools network tab.

When Tracy is running, there will be only one header set by Tracy.
When Tracy is not running, there will headers originally passed to fetch.

function ajax(url) {
	const fetchOptions = {
		credentials: 'include',
		headers: new Headers({
			'X-Requested-With': 'XMLHttpRequest',
		}),
	};

	fetch(new Request(url, fetchOptions));
}

ajax('127.0.0.1');

Expected Behavior

Headers won't disappear from window.fetch requests.

At least please disable captureAjax for window.fetch till it's fixed, Because right now it's useless anyway. It's used mostly/only for ajax requests, but it will strip away the information which tells the server this is ajax request.

[zdhr]

I did some more digging around. It's only broken when you call fetch with Request object as its single parameter eg. fetch(new Request({...})).

If you call fetch with two parameters fetch(url, options), then it works fine.

[dg]

//cc @jiripudil

[dg]

Thanks for great report!