nuxt: nuxt memory leak
Version
Reproduction link
https://github.com/nnvgm/report-nuxt-memory-leak
Steps to reproduce
- npx create-nuxt-app with typescript
- docker-compose up -d
- docker stats to display memory container is being used
- use apache benchmark request to nuxt app with command
ab -n 500 -c 5 -t 30 "http://localhost:3000/"
What is expected ?
memory is free
What is actually happening?
after request memory is not free.
<div align="right">This bug report is available on Nuxt community (#c10697)</div>About this issue
- Original URL
- State: closed
- Created 4 years ago
- Reactions: 5
- Comments: 17 (5 by maintainers)
Memory leaks in dev mode are unavoidable as far as I know. ~Closing here~ as no memory leak is present in the prod build.
The OP’s repo hasn’t been checked yet.
May I know why memory leaks are unavoidable ?
We are not talking about a few KB of leaks but 5MB to 20MB per request depending of your app weight.
Our stack, including a health check that requested our app every 5 seconds, ended up crashing every 2 - 3 hours in dev mode which is really annoying and not a good development experience at all!
The only solution we found was to disable the health check (not optimal) and running the app under a
pm2to ensure it’s reboot in case of crashes.It’s probably irrelevant here, but the Nuxt hook
destroyedwhich is a good place to unregister events or timeout is called only in client side.So if if you add an event listener on
createdhook in SSR and remove it ondestroyedhook (CSR only) your server app will keep in memory all listener and you’ll have a memory leak.This use case is a real memory leak and our responsibility as Nuxt users. But the one described by OP is inherent to the Nuxt package and we can’t avoid it.
Thanks @klausXR. In my tests, the OP repro didn’t have a memory leak in production mode; it was garbage-collected correctly. Note that memory increasing under load does not mean there is a memory leak. The question is whether that memory can be reclaimed when it is no longer in use.
For my part I always have the issue in Development mode only, never in production.
Edit: The problem seems to have been fixed! https://github.com/nuxt/nuxt.js/issues/8522 https://github.com/nuxt/nuxt.js/pull/8523
Ps: for those who have a memory leak problem in production, this could help you (or not): At a time Ithought I had the problem in production too but it appeared I registered events SSR side and never free them since
destroyedis never call in SSR which had the same effect that this threadSame problem, I tried a lots of benchmark to see where it come from and here as the results I got:
How I did the benchmark
I chose to send one request per second and to print memory usage each 10 seconds using this code at the beginning of
nuxt.config.jsfile:Even with the lightest application I see a memory leak (javascript, npm and no other deps)
I tried with Nuxt version
2.0.0and also with version2.12.2I launched this bash command to run requests in a queue with 1 second delay between each (you could use ab instead):
More info
With bigger applications the memory goes full very quickly! I have an app which take roughly 600MB at startup and crash in 3-5 minutes when receiving a request per second (and with targeting only an 404 error layout, so no component loaded).
Just clone the repository from the OP, run
npm install, thennpm run devand simulate some traffic to it anyway you want, what I used wasab -n 1000 http://localhost:3000( using the ApacheBench tool ), and this is the result:If you don’t want to do the logging technique, you can hook up the chrome debugger and inspect the memory over there ( its the same thing ). The scripts that I use in my application to enable it are
I’m running Windows 10 and the node version is v13.14.0
I also want to point out that this is in development, not in production, and is very unsatisfying to work with.
I would like to also hear why these are unavoidable, why are they so aggressive ( the memory grows very fast on larger applications, as the OP has mentioned and that is my case as well ), and why is this not mentioned somewhere in the documentation if its a known issue? There are a few paragraphs written about the flashing css issue, but I’ve never encountered anything regarding to this ( my apologies if there is ), so I, as many others, have spent a lot of hours trying to figure out whether or not the issue is with my code or the nuxt’s source code or its dependencies.