Memory Leak - Nuxt3

[dissy123]

Reproduction

https://github.com/dissy123/nuxt-pinia-memory-leak

Steps to reproduce the bug

The Repository i posted is just a blank Nuxt3 Project, i have added a Pinia Store like in the Documentation here:
https://nuxt.com/docs/getting-started/state-management

Have i done something wrong? Or is this a memory leak?

The Strings from the json objects are stored each request in the HEAP but not deleted again.

I tried it without the Code of the Store and no memory leak happens.

pnpm i

pnpm build

node --inspect .output/server/index.mjs

ab -n 50 -c 10 "http://localhost:3000/"

Sorry i am a little bit confused already hunting this for a few weeks now.

When you comment out the line in app.vue

await useAsyncData("todos", () => store.fetchIconsData());

no memory leak is happening!

Expected behavior

no memory leak

Actual behavior

Additional information

No response

[henk23]

Can confirm. Memory is slowly filling up.
Between each Snapshot I ran

• 700 requests
• garbage collection

Looks like roughly 20 MB memory increase per 700 requests.

Is this a leak? Or is there a restriction like "You can't use fetch inside a store when in SSR"?

[posva]

Given that the method is from Nuxt, please open a discussion or issue in Nuxt.
The usage doesn’t seem wrong at first glance It needs callOnce

[manniL]

I wonder if the same can be observed when not setting pinia state.

Also, useAsyncData should not be used to trigger side effects. callOnce is preferred when working with pinia stores and e.g. fetching data "once".

(Though @posva I think there might be some room for improvements to have sth. similar to useAsyncData but for pinia stores, but that's a different topic.)

[posva]

Does the leak disappear with callOnce? If so, adding this to docs would be enough. I think we talked about this with Atinux

[dissy123]

hey i also tried it with callOnce the leak is also there!

I also tried it with https://vueuse.org/shared/createGlobalState/ and it also didn't change.

I also tried useFetch when fetching and $fetch

[danielroe]

If the memory leak can only be reproduced with pinia then it is probably something to be tracked here. It could be an issue with the Nuxt module implementation.

I’ll take a look, but if you could try to reproduce without pinia that would be helpful too.

[dissy123]

https://github.com/dissy123/nuxt-pinia-memory-leak/tree/without-pinia

yes it also happens without pinia!

when just using useAsyncData haven't tried callOnce now

[danielroe]

The issue is that you are logging those values. Because they are logged to the devtools when you are inspecting the server, they can't be GCed. Removing your console.log statement removes the 'memory leak'.

[dissy123]

omg... okay never thought about that... true...
sorry!

thanks for pointing that out!

[danielroe]

Here's a reproduction with pinia + express (and without Nuxt) - it does seem to leak: https://github.com/danielroe/pinia-ssr-repro.

Steps to reproduce:

pnpm i
node --inspect server.js
ab -n 3000 -c 50 "http://localhost:3000/"
# GC + snapshot from devtools
ab -n 3000 -c 50 "http://localhost:3000/"
# GC + snapshot from devtools

[posva]

I will have to take a deeper look later this month or in October. Feel free to take a deeper look in the meantime

[dissy123]

hey guys, sorry the leak i had in my bigger project was in nuxt-booster, it is duplicating the pinia store on each request (the snapshot looked like the one in the reproduction with the console.log ;) ), so i thought it would have to do something with pinia ;) !

see here:
basics/nuxt-booster#1121

[PanMisza]

It looks like the memory leak is caused by this:

pinia/packages/pinia/src/createPinia.ts

Line 61 in df80a5e

pinia.use(devtoolsPlugin)

Here is how it looks in dist files:

if ((((process.env.NODE_ENV !== 'production') || (typeof __VUE_PROD_DEVTOOLS__ !== 'undefined' && __VUE_PROD_DEVTOOLS__)) && !(process.env.NODE_ENV === 'test')) && typeof Proxy !== 'undefined') {
        pinia.use(devtoolsPlugin);
    }

After commenting out pinia.use(devtoolsPlugin); on my env, memory leaks are gone.
As a temporary fix on your environments you can run app with NODE_ENV=production.

[posva]

That's interesting. Devtools shouldn't be use in production besides for inspection, so it's expected to remove that part when building for production. Usually, the code is stripped out when bundling for production. I tested with CJS and esm and it seems that the memory leaks are internals (weird) when using NODE_ENV=production. So this doesn't seem to be a problem