Memory leak

[ppyl-datBoi]

Vue version

3.5.4

Link to minimal reproduction

http://cant.insert.code/commercial_project

Steps to reproduce

The problem started to appear in Vue 3.5.* (including version 3.5.4). There are no problems in version 3.4.38.
In my case, the approximate source of the problem is an active websocket connection.

What is expected?

No memory leak

What is actually happening?

After establishing a socket connection from which data is coming, the memory grows infinitely. Moreover, the more socket connections, the more the memory grows without stopping. With 10 connections in 5-10 minutes, the heap size consumption is more than 3 GB.
An example of how a leak starts after the application starts:

At the same time, taking memory snapshots is very difficult because the snapshot formation often gets stuck at the stage (Building dominator tree).

If you still manage to take a memory snapshot, it turns out that the preliminary cause is deps (I may be wrong).

I want to clarify that in case of a leak:
DOM Nodes - do not change.
JS Event Listeners - do not change.

System Info

System:
    OS: Windows 10 10.0.19044
    CPU: (12) x64 12th Gen Intel(R) Core(TM) i5-12400
    Memory: 13.66 GB / 31.77 GB
  Binaries:
    Node: 18.12.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.4 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 8.19.2 - C:\Program Files\nodejs\npm.CMD
  Electron": 32.0.1
  Browsers:
    Chrome: 128.0.6613.120
  npmPackages:
    vue: ^3.5.4 => 3.5.4

Any additional comments?

No response

[ppyl-datBoi]

Solution: After I removed {deep: true} in all "watch" functions the problem disappeared.
But because of the many such "watch " now I will have to reconsider the logic in the application.

[jh-leong]

Could you please check the reproduction link? It seems to be inaccessible.

[ppyl-datBoi]

I can't provide full repro code because I have a complex commercial project from which it is difficult to extract repro code. The fact is that "watch" with {deep: true} starts to leak.

[ppyl-datBoi]

I also noticed that it's not just watch that's leaking. I have a couple of computed functions that are also leaking (the events array is updated several times per second). I compared several snapshots and noticed that the deps class is not being cleared, and that's a problem on your end.

Example of comparing snapshots 3 minutes apart:

[edison1105]

We can't analyze the bug without a runnable minimal reproduction.
Please follow the issue requirement.

[ppyl-datBoi]

I don't know if this mini demo is what you wanted to see, but even from it you can see that when comparing memory snapshots, the Dep class is not cleared by GC.
But the computed leak could not be confirmed.
Here is the link

[edison1105]

Still unable to reproduce

• in Chrome incognito mode, ensure there are no browser extensions
• manually collect garbage
• JS heap size, DOM Nodes, JS event listeners. Their numbers will not continue to grow.

[gkubisa]

I'm not sure if it is related but when debugging a reactivity issue in one of my vitest tests I noticed an issue with the double-linked list for tracking dependencies:

• when traversing the list starting from depsTail using prevDep, there are 6 dependencies (not expected)
• when traversing the list starting from deps using nextDep, there are 2 dependencies (expected)

I wonder if a memory leak could be caused by the redundant Dep objects referenced by depsTail.prevDep.prevDep.prevDep.*? Maybe in some situations they could be accumulating much more than in my test code?

Unfortunately I'm still struggling to isolate the issue. :-/

PS. The issue I'm debugging is about a computed not registering as a dependency of a shallowRef, even though I can see that the track function is called by Vue as expected.

[ppyl-datBoi]

Still unable to reproduce

• in Chrome incognito mode, ensure there are no browser extensions
• manually collect garbage
• JS heap size, DOM Nodes, JS event listeners. Their numbers will not continue to grow.

I also deliberately launched the demo in incognito mode. As you can see from the screenshot, the memory is gradually growing from snapshot to snapshot. Deps is also growing and is not cleared. Even deliberately calling the garbage collector from devtools does not improve the situation.

[rxdiscovery]

Thank you very much for this patch, it explains why all my applications made with the Quasar framework lagged, and the browser froze.

[rxdiscovery]

Hello,
@yyx990803 @ppyl-datBoi : Version 3.5.5 had solved the problem, the new version 3.5.6 brought back the problem, but now my application made with Vue lag after 15 min of use, and crashes totally after 1h to 2h, is this a new memory leak?

Important note: this happens in dev mode, in release mode everything's fine (for now), I'm using the Quasar framework and Vite/yarn for the build.

[edison1105]

@rxdiscovery
Does the reproduction of this issue reproduce your problem? if not, please create a new issue with a minimal reproduction.

[yyx990803]

Might be related to c74bb8c

@rxdiscovery can you try the commit release here (set vue dependency in package.json to https://pkg.pr.new/vue@cbc39d5) to see if it works?

[rxdiscovery]

Hello,

@yyx990803 I'll test the c74bb8c version and give you feedback as soon as possible.

I'm currently investigating the cause, there are 3 potential causes :

• Firefox + Live debug mode with Vite / Webpack
• Vue
• Quasar framework

@edison1105 @yyx990803
I've also reported the problem here (the link below) with a video demonstration and the steps to reproduce it.
quasarframework/quasar#17520

(in the video, the first minute the application is reactive, but in minute 4 and +, it lags until it freezes.)

[edison1105]

@rxdiscovery
please also try the preview packages from #11971 to confirm if it can resolve your problem. It fix a memory leak which happens in dev.

[rxdiscovery]

Hello,

to avoid any pollution, I created a new virtual machine with debian and the latest version of nodeJS and the latest version of Firefox.
The same problem occurred

then I tested your suggestions:

@yyx990803

1. modification of the dependense

"dependecies" : {
...
"vue" : "https://pkg.pr.new/vue@cbc39d5"
...
}

2. yarn cache clean
3. rm yarn.lock
4. yarn install
5. quasar clean
6. quasar dev
7. clean browser cache
8. check ===> same problem

---

@edison1105

1. modification of the dependense

"dependecies" : {
...
"vue" : "https://pkg.pr.new/vue@11971"
...
}

2. yarn cache clean
3. rm yarn.lock
4. yarn install
5. quasar clean
6. quasar dev
7. clean browser cache
8. check ===> same problem

even if I force my Vue version, does quasar still use 3.5.5 internally?

Is the problem related to this issue? Or are we on the wrong track and I have to open another issue?