HttpClient: Cannot construct a Request with a Request object that has already been used.

[eipc16]

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? If you use the CDN bundles, please specify the exact bundle (e.g. bundle.tracing.min.js) in your SDK setup.

@sentry/react

SDK Version

7.47.0

Framework Version

17.0.2

Link to Sentry event

No response

SDK Setup

Sentry.init({
  dsn: '<DSN>',
  debug: true,
  release: 'local-test',
  environment: 'local-test',
  integrations: [new HttpClientIntegration()],
});

Steps to Reproduce

I've prepared an example repository that demonstrates this issue: https://github.com/eipc16/sentry-request-object-bug-example. So you can just:

• git clone git@github.com:eipc16/sentry-request-object-bug-example.git .
• npm install
• npm run dev
• Click on the Fetch with Request Object button

If you do not want to clone this repo then:

• create a project with '@sentry/react and '@sentry/integrations
• configure HttpClient integration from @sentry/integrations
• execute a fetch request by sending to it a whole Request object (it has to have a body). Example:

fetch( new Request('/api/error', { method: 'post', body: JSON.stringify({ property: 'value' }) }) )

Expected Result

Instrumentation should work and 5XX should result in an event to Sentry

Actual Result

[eipc16]

There is no section for more context in the issue template, so I'll write what I've found here.

Basically, the error is thrown from this line: https://github.com/getsentry/sentry-javascript/blob/develop/packages/integrations/src/httpclient.ts#L93

When we execute fetch request by sending it a Request object, the requestInfo parameter is equal to Request. HttpClient then use copy constructor to create a new Request object, but this constructor requires Request object not to be read at this point, but the request is read before this can happen by... fetch :)

The culprit seems to be the @sentry/utils package and to be more specific this line: https://github.com/getsentry/sentry-javascript/blob/develop/packages/utils/src/instrument.ts#L148.Ideally it should perform a clone (https://developer.mozilla.org/en-US/docs/Web/API/Request/clone) when it encounters a Request object.

[mydea]

Hi,

thanks for reporting this! I will take a look, thanks a lot for the detailed information, I can reproduce this as well.

[mydea]

Hi @eipc16 ,

we have merged a fix for this which should go out with the next release!