rewrite of fetch is not exact

[cuijiudai]

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?

Self-hosted/on-premise

Which SDK are you using?

@sentry/vue

SDK Version

7.49.0

Framework Version

@sentry/vue

Link to Sentry event

No response

SDK Setup

No response

Steps to Reproduce

sentry has rewrite fetch to call finish span when the fetch's then method been called .But the fetch request has no been completed yet, that called a problem that the transaction finished before the fetch complted 。in single-app or qiankun ，that caused transaction always send before the child app loaded when the network is not well or the vendors is large.

Expected Result

make fetch span finish span exact when fetch complete

Actual Result

transaction request send to early before fetch request complete

[AbhiPrasad]

@cuijiudai what do you mean by

But the fetch request has no been completed yet

when the fetch result returns we can considering the network call to be finished. That is what the span is measuring. I recommend you bump your idleTimeout setting if you're encountering issues with transaction ending too early.

https://docs.sentry.io/platforms/javascript/performance/instrumentation/automatic-instrumentation/#idletimeout

[cuijiudai]

by my test ， then method of fetch will be called when the Response Object has been created. the data has not been fetched yet.

in the image, the chunk-vendors.js is fetched by fetch method , it take 3s to load completely as showed in the waterfull， but it only take 40ms and thethen method of fetch was called.
that makes the 'idleTransaction' posted before other resources load , as idleTimeout is only 1s.

[lforst]

Ah I see. I think this is the case when the response is streaming 🤔 We should fix this.