sendBeacon causes infinite loop with response patching

[hpohlmeyer]

Prerequisites

• I confirm my issue is not in the opened issues
• I confirm the Frequently Asked Questions didn't contain the answer to my issue

Environment check

• I'm using the latest msw version
• I'm using Node.js version 14 or higher

Browsers

Chromium (Chrome, Brave, etc.), Firefox, Safari

Reproduction repository

https://github.com/hpohlmeyer/msw-send-beacon-loop

Reproduction steps

1. Check out the repro: git clone https://github.com/hpohlmeyer/msw-send-beacon-loop.git
2. Run npm install in the root folder
3. Run npm start
4. Go to http://localhost:3002/ in Chrome (FF just freezes without seeing anything in the network tab)
5. Open the network tab in the devtools
6. Click on the "Trigger request" button
   • You will see an infinite request loop

Current behavior

It looks like ctx.fetch(req) does not seem to bypass msw and triggers the same request over and over again, causing an infinite request loop.

Expected behavior

ctx.fetch(req) should bypass msw and not trigger the same route handler again.

[kettanaito]

Hey, @hpohlmeyer. Thanks for reporting this!

I'm currently overwhelmed with the issues but I will keep this one in mind whenever I have a spare minute. Any volunteers are welcome on this one!

[kettanaito]

Hi, @hpohlmeyer. Thanks for reporting this.

All below will be in the context of upgrading your reproduction example to MSW 2.0.

Reason

The infinite request look is cause by the request instance not having the special x-msw-intention header. The header is missing because sendBeacon() requests cannot be modified. They are always POST and none of their properties are configurable.

Fix

I can try migrating from the request header to a request search parameter for the bypassed request mode. Request URL should be configurable even for sendBeacon request because it contains request payload (search params).

The downside of this approach is that the intercepted request URL would have to be parsed into a URL instance on each request, which can be performance implications.

[kettanaito]

We can rely on the accept header, which is supported in sendBeacon requests. I've opened a fix at #2353, the existing usage scenarios for bypass requests should pass too.

[kettanaito]

Released: v2.6.4 🎉

This has been released in v2.6.4!

• 📄 Release notes
• 📦 npm package

Make sure to always update to the latest version (npm i msw@latest) to get the newest features and bug fixes.

---

Predictable release automation by @ossjs/release.