next/image possible memory leak
Answered
New Guinea Freshwater Crocodile posted this in #help-forum
New Guinea Freshwater CrocodileOP
I am experiencing an issue when deployed application with image components consumes way more memory than the same application with images commented out. My app has in total 10 images and 1 video. With every access from different device the memory in my App Platform grows until it reaches 100% and get automatically redeployed. I wasn't able to replicate this behaviour without image component. Any idea how to fix or properly debug this issue?
PROD SETUP: Digital Ocean App Platform, 512MB RAM, 1 CPU + Spaces Object Storage with CDN ON
ATTACHEMENTS: First screenshot shows next-server consuming 90% of memory before the container gets redeployed. Second screenshot show 14 days insights. Third screenshot test stages:
1. No image component in the application
2. 1 image component with small image
3. +1 image component with image in hero background
4. +3 images in gallery on main page
5. +5 images in modal which appears on click
NOTE: I've hard refreshed website several times in every stage, even accessed it from different devices
PROD SETUP: Digital Ocean App Platform, 512MB RAM, 1 CPU + Spaces Object Storage with CDN ON
ATTACHEMENTS: First screenshot shows next-server consuming 90% of memory before the container gets redeployed. Second screenshot show 14 days insights. Third screenshot test stages:
1. No image component in the application
2. 1 image component with small image
3. +1 image component with image in hero background
4. +3 images in gallery on main page
5. +5 images in modal which appears on click
NOTE: I've hard refreshed website several times in every stage, even accessed it from different devices
Answered by New Guinea Freshwater Crocodile
Hi @Ray , so the issue seemed to be related to the way how Sharp performs in certain distributions. I did not have to do any extra setup for this library, just changed the way how am I deploying the application to the Digital Ocean App Platform and memory leak seem to disappear. Instead of using standard DO buildpacks with Ubuntu I just wrote a simple Dockerfile specifying the container with node js alpine image. After all day run my container memory keeps between 30-35%. The bonus is my dev environment now matches the production one. Once again, thanks for you help.
38 Replies
what version of nextjs do you use?
can you check the next-server logs and do you have sharp installed?if so, what is the version of it?
@New Guinea Freshwater Crocodile
New Guinea Freshwater CrocodileOP
Hi @Ray ,
1. "next": "^14.0.4" (I had this issue on 14.0.3 as well)
2. To what log are you referring to? I don't know about any native log in next
3. "sharp": "^0.32.6"
1. "next": "^14.0.4" (I had this issue on 14.0.3 as well)
2. To what log are you referring to? I don't know about any native log in next
3. "sharp": "^0.32.6"
New Guinea Freshwater CrocodileOP
Digital Ocean App Platform is PaaS and it seems to be a docker container as there's a possibility to build it using dockerfile
can you run
docker ps with it?New Guinea Freshwater CrocodileOP
It should be using same setup as heroku
then grab the id and run
docker logs idNew Guinea Freshwater CrocodileOP
Not not possible, the deployed app is in the container I don't have access to the server outside of the container
ah how you get the first screenshot?
I thought you can ssh with it
New Guinea Freshwater CrocodileOP
i have access to the console of container itself
yes try run
docker psNew Guinea Freshwater CrocodileOP
not working. This does not work even in my local environment where I am developing the app in docker container. Docker ps should be executed from host, right, not container itself
unless I have another docker installed in that container
hmm
have you tried running the docker locally
New Guinea Freshwater CrocodileOP
yes, I am running my dev env in docker
without issue?
New Guinea Freshwater CrocodileOP
Can't really tell tbh, my dev env has different distro and node version and also unrestricted resources. The htop is showing non sense information about next consuming 32gigs.
maybe check the docker logs
or you just running next start?
New Guinea Freshwater CrocodileOP
yes I did the same thing what is happening on server - build, than start
do the images store locally?
maybe try to update sharp@latest
New Guinea Freshwater CrocodileOP
images are accessed from Space Object Storage - similar to S3. CDN is turned on.
@Ray https://sharp.pixelplumbing.com/install#linux-memory-allocator
New Guinea Freshwater CrocodileOP
Thanks, I'll have a look and explore this.
I just rebooted container but I don't think it will be any helpful, my app is very simple and container at first start takes 700MB of memory, after page load and activating all images am on 850MB
I just rebooted container but I don't think it will be any helpful, my app is very simple and container at first start takes 700MB of memory, after page load and activating all images am on 850MB
what docker image you use? alpine?
New Guinea Freshwater CrocodileOP
yes, node:21-alpine
New Guinea Freshwater CrocodileOP
well probably I could provide a docker file to app platform and see if it helps. Now am gonna study that sharp documentation. Thanks for you time and help. I'll keep this topic opened
New Guinea Freshwater CrocodileOP
Hi @Ray , so the issue seemed to be related to the way how Sharp performs in certain distributions. I did not have to do any extra setup for this library, just changed the way how am I deploying the application to the Digital Ocean App Platform and memory leak seem to disappear. Instead of using standard DO buildpacks with Ubuntu I just wrote a simple Dockerfile specifying the container with node js alpine image. After all day run my container memory keeps between 30-35%. The bonus is my dev environment now matches the production one. Once again, thanks for you help.
Answer
Hey bro, It would be great if you could help me. I am also facing a memory leak in my website and not able to resolve it.