Capturing request and reponses for Unhandled requests

[v-mwalk]

I've been trying to work out how to setup MSW so that for all unhandled (non-inbound) requests, they are forwarded to the intended destination, BUT with the ability for me to 'see' the requests/responces.

I currently have an onUnhandledRequest processor, that evaluates if the request was inbound (IE. Request TO the wrapped AUT - it uses standard req.passthrough()) or if it was just unhandled. If it was unhandled, i want to be able to capture the request, to write to the filesystem, and same with the response returned from the destination. The request is not a problem as it is there already - I just stringify it and play with it. But I want to do the same with the response.

Can't do it with the onUnhandledRequest, as it just tells MSW to passthrough (req.passthrough()). So have been trying with a 'default' handler (IE. first rest.all('*'... is the default); but cant work out a neat way of telling MSW 'can you just forward this on and give me a promise that will be the response you get'. Then, when i have got the response and played with it I just use it as the response to the original request...

[kettanaito]

Hey, @v-mwalk. Thanks for raising this.

First things first, the onUnhandledRequest function is not intended to affect the traffic in any way. This extends to its inability to observe the actual response because it's out of its intended scope. You shouldn't be using this function for anything but to tell MSW how to react to unhandled requests: throw an error, warn you, or do nothing. Think of it as a logger customization function that lives outside of the request resolution algorithm (that's precisely what it is).

You may try using rest.all('*') for your use case but bear in mind that you don't have access to the original response instance there. You can, however, perform the request as-is within the handler and inspect that proxy response.

rest.all('*', async (req, res, ctx) => {
  const proxyResponse = await ctx.fetch(req)
  console.log({ req, proxyResponse })
})

Note that I don't recommend this method because it affects the outgoing traffic. This makes another request while processing an existing one, and it's not what you want to achieve.

Solution

However, what I would recommend is using the Life-cycle API. It's designed specifically for network monitoring and it has two designated methods for observing responses:

• response:bypass
• response:mocked

Use the response:bypass event to react to any response your application receives that wasn't handled by your request handlers:

worker.events.on('response:bypass', (response, requestId) => {
  console.log('%d %s', response.status, response.statusText)
})

Learn more about the response:bypass event.

You get the requestId argument in that listener, which is a UUID pointing to the original request behind this response. You can associate requests and responses by listening to request:* events and storing requests by their IDs. In your case, listening to the request:unhandled event makes more sense:

const unhandledRequests = new Map()

worker.events.on('request:unhandled', (request, requestId) => {
  unhandledRequests.add(requestId, request)
})

worker.events.on('response:bypass', (response, requestId) => {
  const request = unhandledRequests.get(requestId)
  console.log({ request, response })
})

Note that this API has undergone significant improvement in msw@next and I highly recommend you use that version in your application. Learn more about it in #1464. Thanks.

[v-mwalk]

I tried await ctx.fetch(req) but it hangs. I didn't investigate further, as your Life-Cycle API thought looked a lot sweeter. As indeed it was! Elegant and very usable.

As you suggested, i subscribed to events and it works nicely.

Many thanks

[kettanaito]

Glad it helped! In the new version, it will be even easier to use the Life-cycle events since we will expose the request reference on the response listeners automatically for you. Keep building awesome stuff!