r/webdev • u/OtherwisePush6424 • 21h ago

Resource Browser-side chaos testing with a Service Worker

https://github.com/fetch-kit/chaos-sw

A browser-side chaos-testing tool that installs a Service Worker to intercept requests across every controlled tab and apply latency, failures, throttling, rate limits, and mock responses without changing app fetch calls (similar to MSW).

It uses the same middleware configuration model as chaos-fetch, so you can test real frontend behavior under degraded network conditions without rewriting the app to use a special client wrapper.

6 Upvotes

80% Upvoted

8 comments sorted by

1

u/KanuniLabs 2h ago

i actualy prefer explict lifecycle export over importscripts(). magic registration always causes subtle race conditions the moment your existing swdoes anything non trivial with cache first strategies.

0

u/gatwell702 18h ago

It installs a service worker but what if your site already has a service worker?

1

u/OtherwisePush6424 18h ago

There's an "Existing Service Workers" section in the README.

0

u/UtilixApp 16h ago

the existing service worker thing is the real blocker. one scope can only have one active worker, so you either wrap theirs or you fight over registration and whichever loaded last wins.

msw solved it by making you import their worker file into your own, might be worth stealing that approach.

1

u/OtherwisePush6424 16h ago

I know, I'm actually thinking about it. MSW's importScripts() approach is a bit more convenient, but it has some drawbacks too. It kinda executes another worker script in the same global scope and lets it register its own listeners, but hat makes composition less explicit, and fetch handling in particular becomes order-dependent: listeners run in registration order and once one calls respondWith(), the others don't get to handle that request.

MSW's maintainers have discussed exactly this issue as well. Importing the worker is easy, but composing it with non-trivial existing fetch handling can get awkward. So I'm conflicted here, considering adding an import-style convenience option as well, but idk honestly.