How to track down a memory leak on the client side of LiveView? Chrome "Out of Memory" error

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!

Some more information on this in case anyone is interested.

I’ve been following this guide: Fix memory problems - Chrome Developers which describes a method to track down detached DOM tree memory leaks with Heap Snapshots. Attempting to take a Heap Snapshot with the DevTools in Chrome 94.0.4606.81 gives a STATUS_ACCESS_VIOLATION error image.

I’ve downloaded the latest Chromium build and that does allow me to take a Heap Snapshot without throwing an error. Now I just have to wait a few hours to see if the memory leak is present in this build!

1 Like

This appears to be a problem with Chrome itself. I’ve installed the latest Chrome Dev channel build (Google Chrome Developer Tools - Google Chrome) and the problem doesn’t occur after several hours of running. I guess my users will just have to wait until the bug fix makes it into stable channel!

2 Likes