MSW is not intercepting calls. How to debug?

[michalHT]

What could be the reason for the following behavior? Is there a way to see what's actually failing?

• "[MSW] Mocking enabled." is logged
• worker.printHandlers(); loggs out "[rest] POST https://myapi.localtest.me/api/orders"
• POST https://myapi.localtest.me/api/orders call inside the app is not intercepted by the worker
• Path matching REPL does not find any problems
• onUnhandledRequest does not log anything regardless of whether "error" "warn" or custom callback is passed
• I can see the worker running in browser dev tools
• The same handlers are used for setting up mocking via setupServer for testing in Jest and it works great there
• (https://myapi.localtest.me is served by local IIS server)

[timdeschryver]

Hi @michalHT , can you retry this with the latest version (0.26.1), this version includes a suggestion helper that might help to debug this issue. If that doesn't help, could you create a reproduction so we can take a look?

Release notes

[michalHT]

Thank you very much for this elaborate response. Much appreciated!
It made me realize there are 2 more important details I forgot to mention:

• App URL is different than API url (https://app.localtest.me/ vs https://myapi.localtest.me/).
• I'm setting https://myapi.localtest.me/` as a base url for handlers using this approach

Is MSW able to handle such scenario or does it mean that even if I place the worker file under https://app.localtest.me/mockServiceWorker.js it won't be able to intercept calls to https://myapi.localtest.me/?

And if the latter is true, is there a suggested workaround?

[kettanaito]

As long as the request is performed from the origin that the worker can control (from https://app.localtest.me), MSW will intercept that request. It's not the destination of the request that matters, but the origin.

Have you tried moving the worker script higher in the scope? That should eliminate the issue, from what I can see. I doubt your request was happening from the /Static/ page.

Let me add some clarifications of what the "scope" actually means:

Let's say you register your worker at /product page (url: "/product/mockServiceWorker.js"). This means that whichever request occurs when you are on /product or its child pages (i.e. /product/abc-123) will be intercepted and handled. However, if you move to a homepage / or a different page /about, none of the requests that happen there will be caught. Those pages lie outside of the worker's scope (/product).

I think the only scenario when a request isn't intercepted and there are no errors when using onUnhandledRequest: "error" is when the worker's scope cannot affect the origin of that request.

[michalHT]

All right, that clarifies a lot! This is some stellar support for open source library. Hats off to you!

I will try to put the worker file in the root of the app. This is not as simple as one would think in this app, but I'll do my best and post and update soon.

[michalHT]

It worked like a charm after placing worker file in the app root.
Thank you for all the help Artem. You are awesome!

[kettanaito]

Glad it helped, @michalHT. Please, mark the comment that you think helped you resolve the issue with the Answer icon (checkmark) next to it. Thanks :)

If you'd like to support me in answering yours and other people's questions, consider sponsoring the project by clicking on the "Sponsor" button at the top of the repo!

[kettanaito]

To help our users resolve issues like this, we've published a Debugging uncaught requests recipe in our documentation!

[mod7ex]

i'm using vite and vitest and almost msw isn't recognized, requests are not intercepted

[kettanaito]

Hey. Could somebody please post a link to a reproduction repository? Thanks.

[nilabhanand]

Hey I was able to figure it out. Had to add fetch from cross-fetch into polyfill

[ethanppl]

For others:

import { afterAll, afterEach, beforeAll } from 'vitest';
import { setupServer } from 'msw/node';
import { fetch } from 'cross-fetch';

const server = setupServer([/* handlers */]);

// Need to add this line
global.fetch = fetch;

beforeAll(() => server.listen({ onUnhandledRequest: 'error' }));
afterAll(() => server.close());
afterEach(() => server.resetHandlers());

[charlieforward9]

I am having an issue where the first MSW call works and the next one does not, failing.

If I remove the first network call, the second one works...

I am using Vitest, Amplify and Graphql Codegen to make my msw handlers and mock data.

[priscilla-e]

I am having an issue where the first MSW call works and the next one does not, failing.

If I remove the first network call, the second one works...

I am using Vitest, Amplify and Graphql Codegen to make my msw handlers and mock data.

Currently having this same issue - where you able to find a solution for this ?