sentry-javascript icon indicating copy to clipboard operation
sentry-javascript copied to clipboard

Sentry Replay doesn't track network requests which were done in a webworker

Open KingSora opened this issue 7 months ago • 3 comments

Problem Statement

Fetch or XHR requests which were done inside of a webworker are not captured by the replayIntegration.

Solution Brainstorm

I'm not sure how to solve this issue.. I was thinking about manually sending message between the main thread and the worker. So sentry would offer an utility which captures fetch and xhr requests inside of an worker, that utility would then send messages to the main thread every time something is captured. On the main thread we would again need an utility which listens to worker events and dispatches the received events.

KingSora avatar Jun 12 '25 15:06 KingSora

Hey, thanks for writing in! I think this is a fundamental limitation to the SDK, so overall not too replay-specific. To get any kind of data, you'd need to init the SDK in the web worker and as you wrote, worker and main thread are isolated with the exception of the message channels. With the SDK initialized in the web worker, you should get error monitoring but likely, tracing won't work and as you wrote, Replay on the main thread/window wouldn't be aware of any worker data either.

Suppose we'd provide some building blocks for main/worker thread communication, we could probably alleviate some of these issues (e.g. somehow associate errors in the worker with replays) but fully integrating won't be straight forward. For example, I'm not sure if we can correctly include fetch or xhr spans in our traces.

In the meantime what I think you could do is send messages to the main app whenever you make requests and then manually add a breadcrumb, a log (beta) or a span for it in the main app. These should show up in your replay. Does that (partially) solve your use case?

Lms24 avatar Jun 12 '25 15:06 Lms24

@Lms24 thanks for the quick response! :)

Adding breadcrumbs manually was also an idea I had, but I decided not to do this because I would need to "instrument" the fetch and xhr function / objects, so every time they are used I can intercept the request & response. Thats doable but includes quite a bit of code effort and since sentry already has an implementation for that internally, I was thinking that this and more functionality could be exposed.

KingSora avatar Jun 12 '25 15:06 KingSora

To be honest, I don't see us emitting a worker message in our fetch/XHR instrumentation anytime soon. Given the bundle size hit, I don't think it would ever live in our main fetch instrumentation but we'd rather also only export some optional building blocks (maybe an integration or two).

For the time being I can only say that a basic monkey patch for fetch is fairly simple though:

const originalFetch = globalThis.fetch;
globalThis.fetch = (input, init) => {
  reportFetchCalled(input, init);
  return originalFetch(input,init);
}

Of course you can also just wrap the fetch call and call the wrapper.

Lms24 avatar Jun 12 '25 18:06 Lms24

Closing as we're unlikely tackling this anytime soon.

chargome avatar Jul 01 '25 11:07 chargome