Why would MSW intercept some requests but not others?

[rmiller61]

I have an issue with a Hydrogen app (Hydrogen is Shopify's headless/React framework, which uses Remix). I've implemented MSW as I would in any other Remix app, but with Hydrogen, MSW is not able to intercept anything inside a loader function. However, MSW is working, as evidenced by the messages logged to the console. For example, you can see that MSW picks up the requests Shopify sends to track performance/analytics.

It's specifically the requests inside the loader that MSW cannot intercept, and I'm wondering why. To be clear, I'm not looking for a solution per se (although one is always appreciated!). I've already opened an issue with Hydrogen, and I don't think it's MSW's responsibility to solve what appears to be a problem that's exclusive to their framework. Rather, I'd like to understand why this problem would exist at all, irrespective of whatever framework is being used. I have only a rudimentary understanding of how MSW actually works under the hood, so I'm not even sure how I should go about investigating this issue.

[kettanaito]

Hi, @rmiller61. Thanks for raising this.

First things first, I highly recommend following the Debugging runbook whenever something is not intercepted when you think it should be. That should help you figure out if it's MSW's problem or something else.

If you are certain that MSW is enabled server-side, can see some requests logged but not others, then I suspect the culprit is in the nature of those requests. MSW uses Interceptors to intercept requests in Node.js. It supports ClientRequest, XMLHttpRequest (abstraction over ClientRequest in JSDOM), and fetch. Perhaps Hydrogen is constructing a request by other means, like a raw net.Socket connection? In that case, MSW wouldn't be able to intercept it as it doesn't have a Socket-based interceptor (that is problematic to achieve reliably).

Let me know if you find more details about this.

[rmiller61]

Thanks for your response and for elaborating @kettanaito

I was actually able to get MSW to work by importing and calling setupWorker in the server entry point:

// server.ts
import {setupWorker} from 'msw/browser';
import {handlers} from '~/mocks/handlers';

const worker = setupWorker(...handlers);
worker.start();
worker.events.on('request:start', ({request}) => {
  console.log('-----> MSW intercepted', request.method, request.url);
});

...which leaves me even more confused, since I'm only intercepting requests on the server. But all's well that ends well I suppose ¯_(ツ)_/¯

Thanks again for taking the time to respond and thank you for all the work you do!

[kettanaito]

I don't think that's right. In fact, that's very wrong. Your app shouldn't even compile if you do that. I suggest to reconsider that solution and find the root cause of it.

[rmiller61]

Yes it's bewildering. My guess would be that it's somehow due to Hydrogen running on Cloudflare's worker runtime rather than Node.

Everything runs and compiles fine locally, but I know when I go to production I'll need to conditionally call MSW or just prune it altogether. But for the time being if I want to work with MSW it looks like this is my only option. What would the drawback be if I use it this way? Repo here if you're interested in taking a look: https://github.com/rmiller61/hydrogen-oxygen-msw

[kettanaito]

Oh, I see. Still strange, since our Node.js interception supports fetch natively, which is what Cloudflare-like environments use, I hope. At least, their consumers use fetch.