Versions:
Windows 10 19044.1288
Chrome 94.0.4606.81
Elixir 1.12.3-otp-24
Erlang 24.1.2
I’ve observed what I think is a memory leak in one of our production LiveView pages on Windows 10 with Chrome. If I leave the page open for several hours Chrome eventually stops the tab with an “Aw snap” message with “Error Code: Out of Memory”.
I’ve used the Chrome Task Manager to watch the memory usage and can see that over a period of several hours both the “Memory footprint” and the “JavaScript memory” increase. There are short term increases and decreases, but taken over several hours there is definitely an overall increase which ends when Chrome kills the tab. I haven’t been able to observe the same on Firefox 94.0b7. I’ve also tried triggering the garbage collection in the DevTools for Chrome and it does free up some memory, but doesn’t bring it back to the original amount when the page is first opened. My expectation is that the memory usage of the page remains approximately consistent once it has finished rendering, connected up the web socket and settled into the periodic updates.
I can’t share the actual page, but it’s a page with with 4 attributes that update every second or so. The rest of the page is a large static table and a chart.
I think I’ve managed to reproduce it in a simple project here: GitHub - sh41/phx_live_mem_leak_example
The project is a vanilla LiveView project created with phx.new v1.6.2 by doing:
mix phx.new phx_live_mem_leak_example --live --no-ecto
The example is based on the Clock example here: Phoenix LiveView Basics :: Phoenix Beginner's Guide
The commit with the example can be seen here: Memory leak example. · sh41/phx_live_mem_leak_example@8ad1d9b · GitHub
It renders a page with with the clock example set to a 50ms update period. I’ve also added a thousand divs so that there is some content. Without these divs the problem doesn’t seem to occur, or is so minor as to be imperceptible.
Steps to reproduce:
git clone https://github.com/sh41/phx_live_mem_leak_example.git
cd phx_live_mem_leak_example
mix deps.get
iex -S mix phx.server
Now open http://localhost:4000 in Chrome and open the Task Manager (Shift-Escape), make a note of the lowest and highest figures appearing in the Memory Footprint column for the tab, then wait several hours and check the same again.
This is where I’ve got stuck, can anyone suggest what steps I can take next? By the nature of the problem it is taking a long time to test any changes and see if they have had an effect!
.
