Bypass Webpack dev server url?

[adesurirey]

I'm using msw 0.34.0 in the browser with setupWorker and I have a lot of warnings about unmatched requests because of the Webpack dev server / hot reloading:

[MSW] Warning: captured a request without a matching request handler:

  • GET http://192.168.1.36:3000/sockjs-node/info

If you still wish to intercept this unhandled request, please create a request handler for it.
Read more: https://mswjs.io/docs/getting-started/mocks

Same for react dev tools:

RequestHandler-deps.js:188 [MSW] Warning: captured a request without a matching request handler:

  • GET chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/react_devtools_backend.js

If you still wish to intercept this unhandled request, please create a request handler for it.
Read more: https://mswjs.io/docs/getting-started/mocks

Is it possible to bypass only this url?

[kettanaito]

Hey, @adesurirey.

We've enabled the "warn" strategy for all unhandled requests a few minor versions back. The reason for that is to improve developer experience (I know this sounds counter-intuitive right now but bear with me) and ease MSW integration into existing projects.

A significant portion of the issues people experience with MSW is caused by improperly written request handlers. URL typos, missing parameters, wrong base URLs are common and, luckily, easily solvable reasons. The main difficulty with such issues is to notice them. That's precisely why you see those warnings, as MSW will warn on any unhandled request by default.

That being said, there may be requests you don't intend to mock, like those WDS requests. For those, I have a couple of suggestions you can apply.

Suggestion 1

Explicitly whitelist those requests in the onUnhandledRequest option:

worker.start({
  onUnhandledRequest(request) {
    // Do not warn on the requests that match the condition below.
    if (request.url.href.includes('sockjs-node/info') || request.protocol === 'chrome-extension:') {
      return
    }

    // Warn on any other unhandled requests.
    console.warn('Unhandled: %s %s', request.method, request.url.href)
  }
})

Suggestion 2

Disable the warnings altogether. This may be useful for projects that already have MSW integrated and don't benefit much from these warnings while developing.

worker.start({ onUnhandledRequest: 'bypass' })

You can also utilize a request handler that captures those requests but returns no mocked response.

Perhaps we could integrate some pre-checks into the library, like ignoring chrome-extension: requests as they are not common to happen in your app with the intention to be mocked. Let us know if you have some thoughts on how we could improve the experience. Thanks.

[adesurirey]

Thank you @kettanaito, I do think that it improves the developer experience so I'll go with the suggestion 1. Thanks!