"Warning: Possible EventEmitter memory leak detected" when using with NextJS

Describe the bug

I’ve implemented client and server side mocks as per the docs. Using GraphQL queries and mutations in a NextJS application which I’ve bootstrapped from _app.tsx which is about as global as I can get without a custom server.

With each save the application is re-compiled and refreshed in the browser.

Beyond the performance details listed here, the isomorphic mocks are working nicely.

Server side: Depending on how many routes are visited, or how many changes are made. MSW pretty quickly stops responding and warns of a memory leak with too many open handlers, message from server-side console as below:

“MaxListenersExceededWarning: Possible EventEmitter memory leak detected. 11 error listeners added to [IncomingMessage]. Use emitter.setMaxListeners() to increase limit”

This doesn’t happen with mocks off.

Client In the browser, after navigating to about 5 different routes, the browser stop responding. Chrome is timing out completely, doing nothing at all on route changes. The message in Chrome is:

“waiting for available socket”.

When i use browser tools to end the service worker, normal performance resumes.

Problem doesn’t happen with mocks off.

In NextJS Dev mode, there is hot module reloading going on every save… I think this is where the problem stems from as this uses sockets.

I think there’s an issue with the service worker and the socket reloads.

Once I kill the service worker, the server-side resumes - just with the memory leak warning.

Environment

• msw: 0.29.0
• nodejs: 14.17.0
• npm: 6.14.13
• next: 10.2.3

Please also provide your browser version.

Chrome: Version 91.0.4472.101 (Official Build) (x86_64)

To Reproduce

Steps to reproduce the behavior: 1 - Load multiple, routes in a NextJS app 2 - after 5 different route loads there are already 1 end listeners 3 - App performance drops to unusable 4 - Use application panel to end the service worker in the browser & app responds as normal

Expected behavior

No memory leaks

Screenshots

If applicable, add screenshots to help explain your problem.

[kettanaito]

The fix has been released in 0.32.1 (see the release notes). Could you please update and let us know if the issue is gone?

[webpro]

Looked into this as well. Here’s a reproducible test case: https://github.com/webpro/msw-next

To reproduce the issue:

• npm install && npm run dev
• Click a few times to switch pages
• Try to refresh: page keeps loading indefinitely
• Stop service worker from Chrome dev tools, and things start working again

Seeing suspicious logs for requests such as:

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

• GET /_next/static/development/_devPagesManifest.json
• GET /_next/static/webpack/4db3df89d55dadb9c978.hot-update.json
• GET /_next/webpack-hmr
• GET /_next/static/chunks/pages/index.js

In another application it also captures requests for images (they are served from the local public folder).

Tried a few versions of Next.js (v9.2 v10.2 v11.0) - all the same issue.

Even when using another hostname and port for the requests (added to /etc/hosts), it looks like it still starts capturing all requests from localhost (but also correctly captures the request for the other domain).

Then I tried to downgrade msw. It seems this leak is introduced in v0.25.0, as things start to work properly with v0.24.4 (and lower).

So to get a working version in the repo above, use npm install msw@0.24.4

Edit: also when downgrading msw to v0.24.4 in a pretty large project with a custom msw setup, the memory leak is no longer present.