search

vercel / next.js

The React Framework
https://nextjs.org
MIT License
127.5k stars 27.04k forks source link

Another Memory Leak in `next/image` #44685

Open jaunruh opened 1 year ago

jaunruh commented 1 year ago

Verify canary release

Provide environment information

Operating System: Platform: darwin Arch: arm64 Version: Darwin Kernel Version 22.2.0: Fri Nov 11 02:03:51 PST 2022; root:xnu-8792.61.2~4/RELEASE_ARM64_T6000 Binaries: Node: 19.0.1 npm: 9.2.0 Yarn: 1.22.19 pnpm: 7.21.0 Relevant packages: next: 13.1.1 eslint-config-next: 13.1.1 react: 18.2.0 react-dom: 18.2.0

Which area(s) of Next.js are affected? (leave empty if unsure)

Image optimization (next/image, next/legacy/image)

Link to the code that reproduces this issue

https://github.com/jaunruh/next-image-test

To Reproduce

Set up docker image:

Surf the app:

Describe the Bug

The apps memory usage only ever increases and never really decreases anymore. On docker I have easily managed to pass 1gb in memory usage. The app was run on digitalocean as a bare nodejs app and as a docker container locally and in digitalocean. The memory usage in digitalocean (1 CPU, 512mb memory) looks as follows, but can also be reproduced with docker:

image

In the provided repo there are also commented-out image tags. As soon as these are used the problem disappears.

Expected Behavior

No continuous memory increase.

Which browser are you using? (if relevant)

All major browsers

How are you deploying your application? (if relevant)

docker run and build

NEXT-2023

remvn commented 1 year ago

I tested your repo and had no memory leak when running it as a bare node.js server. However, when I ran it on Docker (using WSL2 and Docker on Windows), I encountered a memory leak. It could be because of this issue: wsl 2 memory leak issue (I experienced a massive memory leak of around 11 GB).

Memory spike a little bit (your image is quite big and NextJS optimize image before send it to client)

image

Memory did decrease:

image

jaunruh commented 1 year ago

So as mentioned above I was using Digital Ocean Apps or Docker for deployment. The assumption that Digital Ocean Apps use docker to deploy bare nodejs repos should be a fair one. Locally on macOS there does not seem to be any memory leak. I have not tried this on any windows machine. I have updated the repo to use ubuntu instead of debian. But the issue persists. It does not seem to be distro specific.

Mikroser commented 1 year ago

Try setting this in next.config.js. I hope it solves the problem

Module.exports = { images: { unoptimized: true, }, }

jaunruh commented 1 year ago

I have seen this option. I am going to try it in my repo. But even if it solves the memory leak problem, it creates the issue of unoptimized images. I can then just use a general <img/> tag instead. No need for next/image anymore.

jaunruh commented 1 year ago

image

Generally using unoptimized images seems to fix the memory leak. But well, the images are unoptimized... so I still think this is a bug that needs to be fixed.

khoramshahy commented 1 year ago

I have the same issue with using nextjs Image. I am using nextjs 13.1.1 and docker container will be killed. my question is that if the solution is setting the images unoptimized, so is there still any benefit of using nextjs Image instead of usual Html img?

jaunruh commented 1 year ago

Persists in next 13.2.4.

caprica commented 1 year ago

I am seeing similar in 13.4.1.

Deployed a small website to Digital Ocean that uses RSC and Image. There's maybe 50 mid-size images total in this entire web-site.

In the screenshot, after the black line is after image optimisation disabled in config. The other dips in the graph before that point are due to server restarts.

image

As per a warning in the NextJS documentation I am using jemalloc in my deployment.

swedpaul commented 1 year ago

image

Persist in 13.4.7.

Three solutions worked:

  1. add to next.config.js 
    images: {
unoptimized: true
},
  2. Change all next.js <Image> to <img>
  3. Add to all next.js <Image> param unoptimized
alan345 commented 1 year ago

Same issue for us.

image

We are using AWS Fargate (ECR, ECS). And yes it is using a docker image.

This solve it, but yes, the images are not optimized anymore.

images: {
 unoptimized: true
},

By reading your comments, I really think the issue is with Docker and next/image

sergio-milu commented 12 months ago

same issue here with NextJS 13.5.2, we are running out of memory in a docker with 1 GB of ram (usually ram usage is between 10%-20%)

rusakovic commented 9 months ago

One year passed. Still open. Have the same image memory leak but for opengraph

styfle commented 9 months ago

The memory leak seems to only be present when running in ubuntu:jammy base image (glibc).

I don't see the memory leak when using the the recommended node:18-alpine base image (musl).

This is likely related to sharp and documented here:

rusakovic commented 9 months ago

The memory leak seems to only be present when running in ubuntu:jammy base image (glibc).

I don't see the memory leak when using the the recommended node:18-alpine base image (musl).

This is likely related to sharp and documented here:

Thank you for your response! I don't use Docker preset in my project. But I use coolify coolify.io that uses Docker, for sure. My project started on Node 20. This instruction is also was done: https://sharp.pixelplumbing.com/install#linux-memory-allocator

Maybe I should try standalone distribution with DOcker, if I self-hosted

CeamKrier commented 9 months ago

The memory leak seems to only be present when running in ubuntu:jammy base image (glibc).

I don't see the memory leak when using the the recommended node:18-alpine base image (musl).

This is likely related to sharp and documented here:

downgrading the node to 18-alpine resolved the issue for me. Thanks!

Zeddnyx commented 9 months ago

same here, i try downgrade from 20 to 18-alpine and is work

art-alexeyenko commented 7 months ago

The memory leak persists on node 18 alpine, here's the scenario for new nextjs app:

  1. Create nextjs-latest app
  2. Take a large image (~10MB for my case) and put it into public folder
  3. Render that image with next/image on home page
  4. deploy this to docker with node:18.20-alpine
  5. Open home page - this will cause a memory spike to ~2GB. After a bit it will fall to ~1GB and stay there
  6. Open the page in incognito tab and keep refreshing the main tab and the incognito - this will cause a second memory spike and memory usage will remain that way. A handy demo in case it's needed: https://github.com/art-alexeyenko/next-image-oom

And some memory usage trends from my local tests with Docker Desktop: image

styfle commented 7 months ago

That repo is missing sharp.

You need to run “npm install sharp” for production.

Innei commented 6 months ago

@styfle Maybe it has nothing to do with sharp, I'm using standalone build and I have sharp installed on my system and also defined the path to sharp in env.

But I monitored that the memory is still rising continuously, then suddenly in a few seconds, the system lost response, at this time through the cloud platform monitoring observed that the CPU 100%, memory 100%, IO Read 100%. But the system didn't trigger the OOM killer which is very strange.

node -v
v22.0.0

CleanShot 2024-05-07 at 12  03 40@2x

Innei commented 6 months ago

Hi there, I just dumped a memory dump file. Here's what the memory stack looks like after it's been running for a while.

CleanShot 2024-05-07 at 6  48 51@2x

This was shortly after launch.

CleanShot 2024-05-07 at 6  49 00@2x

As you can see from the following dump, it's the ImageResponse-related modules that are leaking memory.

CleanShot 2024-05-07 at 6  49 54@2x CleanShot 2024-05-07 at 6  50 09@2x

Innei commented 6 months ago

ImageResponse and FigmaImageResponse that means @vercel/og causes memory leak?

Six6pounder commented 6 months ago

The memory leak seems to only be present when running in ubuntu:jammy base image (glibc). I don't see the memory leak when using the the recommended node:18-alpine base image (musl). This is likely related to sharp and documented here:

Thank you for your response! I don't use Docker preset in my project. But I use coolify coolify.io that uses Docker, for sure. My project started on Node 20. This instruction is also was done: https://sharp.pixelplumbing.com/install#linux-memory-allocator

Maybe I should try standalone distribution with DOcker, if I self-hosted

Did you find a solution for coolify? The issue is still present today

chipcop106 commented 5 months ago

Here is our memory chart when using the Next 14.2.3. I confirmed it has a memory leak issue with open graph-image and twitter-image. From 27/6, we disable this function, and this chart becomes normal.

image

Solution

Try not to use dynamically generated metadata images using tsx,js,ts.