Whitelist a request

[rosshulford]

I have a couple of requests I need to be ignored by MSW - is there a way to achieve this?

[kettanaito]

Hey, @rosshulford.

Passthrough by default

MSW only captures those requests which you describe in your request handlers. All other requests won't be affected and will be performed as-is.

In the browser, all requests will go through the Service Worker regardless if they should be mocked or not. This is an implementation detail of the library and should not affect you in any way (the original responses will be returned in case a request doesn't have a corresponding request handler on your side).

Whitelist for onUnhandledRequest

By default, MSW will try to warn you when a passthrough request happens. This is an optimal DX in regards to people forgetting to mock requests or making typos in their handlers.

Sometimes, there are cases when you would want MSW to stop warning you on certain unhandled requests (i.e. static assets requests or webpack HMR requests). To do that, provide a custom callback to the onUnhandledRequest function:

worker.start({
  onUnhandledRequest(req, print) {
    if (req.url.pathname.startsWith('/assets/') {
      return 
    }

    print.warning()
  }
})

The usage above will prevent MSW from warning you about unhandled requests that start with /assets/.

Note that onUnhandledRequest has no effect over mocks whatsoever.

[cmacdonnacha]

Great answer but I have one follow up question. What types should we give req and print?

Also, is there a way to ignore multiple things like '/assets/' AND googlefonts etc. So basically an array of things to ignore.

[kettanaito]

What types should we give req and print?

Their types are inferred. If you're abstracting them in your own function, here are the types:

msw/src/utils/request/onUnhandledRequest.ts

Lines 18 to 26 in 1b9dde0

	export interface UnhandledRequestPrint {
	warning(): void
	error(): void
	}
	export type UnhandledRequestCallback = (
	request: MockedRequest,
	print: UnhandledRequestPrint,
	) => void

I guess we are not exporting them, right? Do you mind opening a pull request if that's the case?

[cmacdonnacha]

Yea they're not being inferred currently.

[kettanaito]

Okay that sounds wrong. Can you please send me a reproduction I can see this?

[nicholaspretorius]

@cmacdonnacha To your second question:

Also, is there a way to ignore multiple things like '/assets/' AND googlefonts etc. So basically an array of things to ignore.

Using array.some() worked for me:

worker.start({
    // turn off MSW warnings for specific routes 
    onUnhandledRequest(req, print) {
      // specify routes to exclude
      const excludedRoutes = ['/favicon.ico', '/manifest.json', '/logo192.png'];

      // check if the req.url.pathname contains excludedRoutes
      const isExcluded = excludedRoutes.some(route => req.url.pathname.includes(route));
    
      if (isExcluded) {
        return; 
      }
  
      print.warning()
    }
  });

Screenshot of browser console before exclusions:

Screenshot of browser console after exclusions:

[rosshulford]

Many thanks.

…

On Tue, May 24, 2022 at 12:54 PM Artem Zakharchenko < ***@***.***> wrote: I'm marking this as the answer because it goes at length about whitelisting with MSW. You can ask follow-up questions if this answer isn't enough. — Reply to this email directly, view it on GitHub <#1231 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AH7Z7UEPGOHTRLLCYJVL7NDVLS7PTANCNFSM5VU2LHWQ> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[Dmo16]

Should this work with secured endpoints?

For some reason I have several https endpoints that I can't force an ignore on.

An example of a few of them:

https://model-bird-11.clerk.accounts.dev/v1/client

https://model-bird-11.clerk.accounts.dev/v1/someotherendpoint

My setup file:

const ignoredPathnames = [
  '/model-bird-11.clerk.accounts.dev',
  '/kit.fontawesome.com',
  '/_next/static/webpack',
  '/favicon.ico',
  '/_next/static/media',
  '/images.clerk.dev',
];

async function initMocks() {
  if (typeof window === 'undefined') {
    const { server } = await import('./server');
    server.listen();
  } else {
    const { worker } = await import('./browser');
    await worker.start({
      onUnhandledRequest(req, print) {
        if (ignoredPathnames.some((pathname) => req.url.pathname.startsWith(pathname))) {
          return;
        }
        print.warning();
      },
    });
  }
}

initMocks().then((r) => r);

export {};

Everything else in that array successfully gets ignored.

[kettanaito]

@Dmo16, the issue must be somewhere in your if condition. MSW doesn't treat HTTPS requests any differently from HTTP—both will arrive at the onUnhandledRequest (given they, indeed, don't have any corresponding request handlers so watch out for those too).

[timsofteng]

@kettanaito may I hide unhandled requests from browser's devtools as well? It is quite annoying too have a lot of unnecessary requests such as chunks and assets in network tab.

[timsofteng]

it will be performed as-is, which means it will produce a network entry.

As I can see it duplicate unhandled requests in devtool's network tab.

In addition I see some unexpected requests. Take a lookt at it please

I don't see such requests in devtools without msw.

In addition msw shows some chunks imports which I would like to ignore in devtools according to xhr filter

[timsofteng]

@kettanaito At the result for initator === mockServiceWorker I would like to see only handeled requests which I've described in setupWorker(handlers) and nothing more.

[kettanaito]

You see those requests not because they are unhandled but because MSW is enabled. When using MSW, all requests go through the Service Worker, which results in you seeing "duplicate" requests:

• /resource
• ⚙️ /resource (from the Service Worker)

Those are not duplicates. The request is still sent once and processed once. What happens is this:

• /resource is dispatched in your app. You see it as the plain /resource network entry.
• The Service Worker intercepted that request, which creates a ⚙️ /resource network entry. This doesn't indicate a new request, just that it has been handled by the worker.
• From here, the worker can either respond with a mock or bypass the request. Either case will resolve the entry with the cogwheel and send the response to the original /resource network entry.

There is no way to opt-out of this by design. Not having those worker network entries would mean not sending those requests to the worker. To decide that, MSW needs to do request matching. Request matching requires an intercepted request instance. If you want to do that before the request reaches the worker, it means procuring that request interception by other means, which contradicts the entire purpose of this library.

TL;DR ignore this, this is a Service Worker's behavior.

[jamiehaywood]

I wanted to add something here in case it was of use to anyone irritated by the number of duplicated network entries (⚙️) in the chrome network tab.
Add -is:service-worker-initiated as a filter to your network tab, it will only show the XHR requests, which is supremely useful for less cluttered network debugging.

[isimmons]

path for external urls like "https://graphql-pokemon2.vercel.app" is "/" so it will return false. You can add the additional check for url.host in the excludedRoutes function. Also creating a new URL from req.url makes Typescript happy.

In this example 'img/pokemon' is local (public dir) and matches url.pathname while 'graphql-pokemon2.vercel.app' is external and matches url.host

    onUnhandledRequest(req, print) {
      const url = new URL(req.url)
      const excludedRoutes = ['img/pokemon', 'graphql-pokemon2.vercel.app']

      const isExcluded = excludedRoutes.some((route) => {
        return url.pathname.includes(route) || url.host.includes(route)
      })
      
      if (isExcluded) {
        return
      }

      print.warning()
    }