Create recorder API or separate package for quicker integrations of MSW

[tobiasbueschel]

Is your feature request related to a problem? Please describe. MSW is a bliss to use especially when you're just starting with a new project. However, if you're dealing with a larger application and want to retrofit MSW into your stack, it might be somewhat cumbersome to manually create mocks for all your endpoints.

Describe the solution you'd like Building on the solution that @marcosvega91 proposed in: https://github.com/mswjs/msw/pull/473, it would be fantastic to have a recorder functionality in MSW or a separate package. This would allow users to quickly integrate MSW into existing applications and then further fine-tune the setup.

Describe alternatives you've considered The alternative is to manually add mocked endpoints one by one, which is okay in many use cases, but becomes very time intensive for large applications that call a wide array of different services.

Additional context

Goal To use MSW the first thing to do is create handlers, so why not create a function to record responses from real APIs?

How I have added in the setupWorker a new property recorder. You can:

start, start recording by using worker.recorder.start(). All your handlers will be paused until you called stop on the recorder. All intercepted handlers will be saved in a logs property of the recorder. All handlers are saved as functions so then you can copy and paste the code.

stop, stop recording by using worker. recorder.stop(). After that all your previous handlers will be restored.

getLogs, will return the list of functions for the latest recording.

Roadmap

• [ ] Create the new Recorder Class
• [ ] Support REST
• [ ] Support graphql
• [ ] Support binary ( then the user will have a function with all the binary inside, I don't know if it is really useful )
• [ ] Add tests

---

@marcosvega91 & @kettanaito given that you've already done a bit of work & thinking on this, what are your thoughts on how we should implement this? Also, what concerns or questions do we need to address besides the aforementioned roadmap checks?

[marcosvega91]

Hello @tobiasbueschel thanks for opening the issue :). I have started working on it some time ago and my idea was to have a way to output handlers to file or console.

Print to console could be useful for small applications while saving handlers to a file could be useful with large applications. Of course the first approach can be used also for web while the latter only with node.

To make the thing fluent also on the web the idea was to add a msw dev tools then where users could start and stop recording.

There are two problems:

1. How we can handle binary data?
2. When the user wants to record data we should pause mocking someway because all requests should be made to the real server.

To work with recorder module we can use lifecycle-events that @kettanaito has added some time ago https://mswjs.io/docs/extensions/life-cycle-events

[kettanaito]

While I find this idea worth exploring, I'm curious how is it different from the native browser's HAR recording capabilities?

1. Open the "Network" tab in the DevTools.
2. Start the network log recording.
3. Stop the network log recording once satisfied.
4. Export the recorded traffic as HAR.

When it comes to deriving your mocks from the actual traffic, I'd say that's the most straightforward option. There are existing libraries like @tapico/msw-webarchive that can turn HAR records into request handlers. It feels natural to delegate traffic recording to the browser and use HAR as an input to MSW.

[marcosvega91]

What you said is right and I didn't think about that. For web your solution is very nice :)

[kettanaito]

Given that you never run the full app in Node.js during tests, I'd say it's sufficient to use the mentioned approach to get all the requests your app makes, export them as a HAR file, and feed it to msw-webarchive to generate request handlers.

I don't think we need a custom request recorder for something that browsers provide out of the box.

[neviaumi]

@kettanaito not sure should i post here again , i think it have another use case if har capture can provide by mswjs out of box.

consider similar project created by Netflix here https://github.com/Netflix/pollyjs

it support snapshot network request and expire .

so it very useful when system mostly working on third party service .

rather than you need think about how to save the service quota / gain access token on test. you can pre-sign token and only call API when snapshot expired.

[kettanaito]

Hey, @davidNHK. We're currently working on the solution that would allow generating request handlers from the HAR traffic (and a few other sources), which would support request order and allow for network replay in tests. Stay tuned.

[carlosbensant]

@kettanaito It's been a year. I can't see any information related to network recording and/or support for request orders and/or network replays in tests. I wonder if you have already implemented this feature and, if not, how can I help you to achieve it.

I'm moving away from PollyJS, and I'm considering nock but before I would like to give MSW a try because it's looking promising and it is recommended by the RTL team.

[kettanaito]

@carlosbensant, true, it's been a year and it may as well be another year, to be honest. We could always use help with the issues and feature proposals we get.

Regarding the library I've mentioned, I've wrapped up HAR support and have basic OpenAPI support in there. I want it to have a few other features but I haven't done them yet. What's missing is whether I'm ready to maintain yet another project given I don't have time to maintain everything else I have right now. That's why I've been considering making this new library a sponsorware to make it sustainable. Maybe I'll figure out its distribution strategy sometime next year, maybe not. I really wish to give MSW users more power to implement their use cases but if that means sacrificing my personal life and mental health then I'd rather not. It's a hard choice and I'm learning to make it.

That being said, you can use HAR -> handlers integration right now with https://github.com/Tapico/tapico-msw-webarchive. It's superb and I haven't heard anyone complaining about it.

[kaminskypavel]

@carlosbensant how would you recommend going about node requests? I'm using nock.back to capture the initial responses on my backend, and would love to fully migrate to MSW.

[tsteckenborn]

Would be great to see some traction in this area

[samuelfullerthomas]

@tsteckenborn It's been released: https://github.com/mswjs/source 🎉

[zwhitchcox]

Is there any recommendation for calling external API's and recording them as har?