-
-
Notifications
You must be signed in to change notification settings - Fork 503
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Chrome Dev tools XHR #412
Comments
Hi @malykhinvi thanks for reaching us 😄 . I have to be honest, I didn't notice that 😆 . BTW I can say that |
Just installed msw and it's the first thing I noticed. Static assets are displayed twice, once where they should and once as XHR requests. It's causing some confusion. |
That's the behavior caused by the current implementation of request handling in the worker. As the worker persists between pages, when the app loads the worker handles all requests. Since you rarely want to mock a static assets (which may render your site broken), the worker skips such requests and performs then as usual. We can get rid of such requests duplication if it's possible to short-circuit a request handling in the |
It seems that short circuiting within the |
Although I see a problem in Chrome dev tools, this is not the case for Firefox. It filters XHR requests just fine. Maybe it is something with dev tools? |
Service Worker implementation and thus behavior may differ in different browsers. There's nothing we can or should do about this, unfortunately. |
During the work on this I've found out a few details that I'd like to share. Short answerNo, this won't be possible to do due to the Service Worker specification. Long answerThe worker's "fetch" event triggers for any HTTP request from the client once the worker is active. The fetch event handler is a synchronous function, which may call self.addEventListener('fetch', function (event) {
event.respondWith(anyPromise) // OK
await somePromise()
event.respondWith(...) // INVALID STATE
}) So there's the first behavior we learn:
To fetch data in this worker's event handler you can use the event.respondWith(async () => {
return fetch('...').then(data => data.json())
}) Whenever you perform a
Now let's analyze what happens to a request. Specifically, to a static asset request that shouldn't be mocked. Here's the journey it undergoes:
Since the step 5 is async, it must be nested in the
If this request duplication in the Network is confusing, this is how you can think of it:
|
@kettanaito thanks for your investigation and for a very detailed response! Do you have any idea, why it is possible to filter XHR requests in FF dev tools? |
As I've mentioned, Service Worker implementation may differ in browsers. I suppose Firefox can understand that this XHR originates from the worker, and hides it in the list of all XHR. Chrome can understand that as well, but doesn't hide those requests. I support Chrome's behavior here, as the worker indeed performs an extra request to use for the actual response, thus it makes sense to list that extra request. |
Really good explanation, it makes sense now. Thank you! |
I'm closing the issue because there isn't much we can do on this behavior. The PR that slightly improves the requests bypassing will land in the next minor version. Thanks for raising this! |
Would it be possible to make the short-circuiting configurable? So for example the consumer can configure everything to be sort-circuited except calls starting with |
Describe the bug
Not sure if it is even a msw problem, but maybe someone knows the answer. For some reason, when msw is enabled, I can not set up a filter to see only XHR requests in Chrome network tab. See how it looks like below (note, that static files are displayed even though the XHR filter is on.)
Environment
msw: 0.21.2
nodejs: 12.16.1
npm: 6.14.8
Chrome Version 85.0.4183.121 (Official Build) (64-bit)
To Reproduce
Steps to reproduce the behavior:
Expected behavior
Only XHR requests are displayed
Screenshots
The text was updated successfully, but these errors were encountered: