`next/og` cause memory leak in production standalone build

[Innei]

Link to the code that reproduces this issue

https://github.com/Innei/next-og-oom-repro

To Reproduce

1. build project
2. run as standalone build node server.js
3. open /og
4. open devtools and force refresh the page(ignore cache) more times.
5. watch the system monitor, and the next app memory usage is increasing.

The initial memory usage about to 50M, and refresh /og about 10 times, got 300M

I can provide some ways to try to troubleshoot memory issues.

Add memory dump code in .next/standalone/server.js

process.title = 'next-og-oom'

const v8 = require('v8')
const fs = require('fs')

function createHeapSnapshot() {
  const snapshotStream = v8.getHeapSnapshot()
  const timestamp = new Date().toISOString().replace(/[:\.]/g, '-')
  const fileName = `/tmp/${timestamp}.heapsnapshot`
  const fileStream = fs.createWriteStream(fileName)
  snapshotStream.pipe(fileStream).on('finish', () => {
    console.log('Heap snapshot saved to', fileName)
  })
}

process.on('SIGUSR2', () => {
  console.log('SIGUSR2 received, creating heap snapshot...')
  createHeapSnapshot()
})

And then refresh the page and refresh the page several times and observe the app memory usage afterwards. When memory overflows and is not freed, hit the heap of memory at that point with kill -SIGUSR2 <pid>.

As you can see from the following dump, it's the ImageResponse-related modules that are leaking memory. ImageResponse and FigmaImageResponse that means @vercel/og causes memory leak?

Link to #44685 (comment).

Current vs. Expected behavior

1. Memory does not free up and increases more and more, finally oom.

expected:

Memory can be freed up.

Provide environment information

Operating System:
  Platform: darwin/linux
  Arch: arm64/amd64
  Version: Darwin Kernel Version 23.4.0: Fri Mar 15 00:12:49 PDT 2024; root:xnu-10063.101.17~1/RELEASE_ARM64_T6020/ or Linux
  Available memory (MB): 32768
  Available CPU cores: 12
Binaries:
  Node: 18.18.0/20.x
  npm: 10.2.4
  Yarn: 1.22.21
  pnpm: 9.1.0
Relevant Packages:
  next: 14.2.3 // Latest available version is detected (14.2.3).
  eslint-config-next: N/A
  react: 18.3.1
  react-dom: 18.3.1
  typescript: 5.4.5
Next.js Config:
  output: standalone

Which area(s) are affected? (Select all that apply)

Image (next/image)

Which stage(s) are affected? (Select all that apply)

Other (Deployed)

Additional context

No response

[Innei]

Attachment: 2024-05-07T12-30-03-488Z.heapsnapshot.zip

[chipcop106]

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

Solution

Please don't use dynamically generated metadata images using tsx, js, or ts until fixed.

[zhyd1997]

Hi @chipcop106

What's the metrics tracing platform?
Are you using Sentry or Datadog? 👀

[chipcop106]

Hi @chipcop106

What's the metrics tracing platform? Are you using Sentry or Datadog? 👀

I'm using AWS ECS, which is the metrics of the docker's container.

[zhyd1997]

@chipcop106

Thanks!

[matthewmorek]

Possible fix already sitting on your doorstep for free since March 13: https://github.com/orgs/vercel/discussions/6117#discussioncomment-8776252

[khuezy]

This leak is still not fixed in the latest 15-canary.102. Memory is stable around 200MB, then 1 request to generate dynamic og causes the memory to spike to 230MB and is never freed.
Since the thread above isn't available for discussion, can we get some vercel devs' 👀 on this, CC: @shuding

[shuding]

Self assigned - will take a look!

[frankharkins]

Thanks @shuding! This approach worked well for us https://github.com/orgs/vercel/discussions/6117#discussioncomment-8776252. After applying the patch, our memory stopped growing as aggressively.