Memory Leak with Next.js's global fetch. Tested against http module

[m-rphy]

Link to the code that reproduces this issue

https://github.com/m-rphy/nextMemoryLeak

To Reproduce

1. In one terminal and cd into the /express_server and run npm start

2. In a sperate teminal cd in /next_app and run npm run inspect

3. Using any browser go to either http://localhost:3000/start-fetch or http://localhost:3000/start-custom-fetch to begin the requests.

4. Then open chrome inspect (chrome://inspect) or use any other debugging tools.

I believe this is ticket is also relevant - but this repo reproduces it with and avoids it -> #54708

Current vs. Expected behavior

Next.js's global fetch is holding onto performance metrics or some other data that is leading to heap growth after every requests.

The heap should not grow after the scope closes.

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 23.4.0: Fri Mar 15 00:12:49 PDT 2024; root:xnu-10063.101.17~1/RELEASE_ARM64_T6020
  Available memory (MB): 16384
  Available CPU cores: 10
Binaries:
  Node: 20.10.0
  npm: 10.2.3
  Yarn: N/A
  pnpm: N/A
Relevant Packages:
  next: 14.2.0-canary.62 // Latest available version is detected (14.2.0-canary.62).
  eslint-config-next: 14.1.4
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.4.4
Next.js Config:
  output: N/A

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

Not sure, Data fetching (gS(S)P, getInitialProps)

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

next dev (local), next build (local), next start (local), Other (Deployed)

Additional context

I've tested this repo against different canary releases (canary-32 and canary-62), as well as Next.js lts.
I haven't been able to find a version that works.

[m-rphy]

Using next.js fetch

Using Axios (implements nodes http module)

[billnbell2]

+1

Edit by maintainer bot: Comment was automatically minimized because it was considered unhelpful. (If you think this was by mistake, let us know). Please only comment if it adds context to the issue. If you want to express that you have the same problem, use the upvote 👍 on the issue description or subscribe to the issue for updates. Thanks!

[stephanebachelier]

@m-rphy interesting! I've a question about the charts with next.js's global fetch. What is the cause of the halt in the memory consumption? You've stopped the process or it's the garbage collector?

[m-rphy]

We switched to using axios for request handling instead of the native fetch. That's it. These charts, produced by Grafana for our production environment, illustrate the severity of the memory leak issue we faced. Our application, which processes thousands of outgoing requests per second, suffered significantly due to this memory leak. This repository is capable of reproducing the memory leak, as well as bypassing it by simply changing the HTTP handler. While we use axios in our production app, in this repo's toy model, I implemented a simple "fetch" with Node.js' http module. However, the effect remains the same. If you by pass next.js fetch and use one that implement node's http module, the leak goes away.

[stephanebachelier]

@m-rphy Thanks for the explanations!! I'll switch then to axios.
The issue I see is running services on the edge runtime where you don't have access to HTTP module. I've only a few services so I'll see later and move them back to node runtime.
As I rely heavily on fetch for non edge services, by migrating away from fetch, I should definitely find a significant gain.

[billnbell2]

How did you switch them to Axios for Apollo Client in NextJS?

[billnbell2]

We are using cross-fetch and it works much better.

[GabenGar]

@stephanebachelier

As I rely heavily on fetch for non edge services, by migrating away from fetch, I should definitely find a significant gain.

I don't see how are you going not to "use fetch" on a custom watered down javascript runtime, aka edge. Axios wraps either XMLHttpRequest (browser-only) or http/https (nodejs-only).
Unless you plan to write an http handler from scratch, but then it will bloat the size of every single edge function relying on it.

[stephanebachelier]

@GabenGar

I don't see how are you going not to "use fetch" on a custom watered down javascript runtime, aka edge. Axios wraps either XMLHttpRequest (browser-only) or http/https (nodejs-only).

You're absolutely right.

Maybe I'm wrong but I say for lambdas running on nodejs runtime I could replace Next.js's fetch for axios/cross-fetch/... to have a significant gain.

For edge lambda I will either stick to global fetch or move them to nodejs runtime with non global fetch.

[feedthejim]

hey folks, we think we identified the source of the leak, we'll try to fix it by next week

[ElHawary-Ebutler]

Any updates?

Edit by maintainer bot: Comment was automatically minimized because it was considered unhelpful. (If you think this was by mistake, let us know). Please only comment if it adds context to the issue. If you want to express that you have the same problem, use the upvote 👍 on the issue description or subscribe to the issue for updates. Thanks!

[feedthejim]

We're still investigating!