Facebook MemLab helps find JavaScript memory leaks

Although JavaScript runtimes use garbage collection to manage memory, this does not rule out the possibility of a memory leak. To detect all possible cases of memory leaks, Facebook has created and open-source MemLab, a tool capable of running predefined and automatable test cases and analyzing heap differences.

In a nutshell, MemLab finds memory leaks by running a headless browser through predefined test cases and comparing and analyzing JavaScript heap snapshots.

Based on the diff results, MemLab builds a list of potential memory leaks and for each of them generates a traces of restraint, i.e. an object reference string from the roots of the garbage collector. By inspecting the carry traces, you can view the references that should have been set to null for a good collection. Additionally, to reduce the amount of information to analyze, MemLab is able to group leaked objects based on the similarity of their hold traces and display them for each cluster rather than for each potential leak.

There are a number of cases where JavaScript can leak memory. For example, let’s say Facebook engineers Liang Gong and Glenn Conner, when you log an object to the Chrome console, Chrome will take a hidden reference to it which will prevent it from being collected. Other cases where you may have unrelated memory leaks or growth are related to accidental use of global variables, forgotten timers or callbacks, and non-DOM references, says auth0 engineer Sebastian Peyrott.

Although the Chrome Developer Tools provide the essential means to inspect the memory behavior of JavaScript code, including the Timeline View and the Profiles View, this is not straightforward and cannot be automated. Instead, MemLab can be easily integrated into a CI/CD pipeline, say Gong and Conner.

For in-browser memory leak detection, the only input MemLab requires from developers is a test case file that defines how to interact with the webpage by replacing three callbacks with the Puppeteer API and CSS selectors. MemLab automatically differentiates the JavaScript heap, refines memory leaks, and aggregates the results.

MemLab is also able to generate a graphical view of the JavaScript head, where each heap object is represented as a node, while references are represented by edges. In addition to providing general information such as the total retained size of a given set of components, the graph can also be viewed programmatically for automatic memory checking. Developers can also use a CLI and API to explore memory optimization possibilities for their applications.

Facebook has been using MemLab for a few years, which helped them reduce OOM crashes on Facebook.com by 50% in the first half of 2021. They also used the Heap Graph View and Heap Analysis API to further improve React’s memory behavior. fibers and to improve the internalization of relay memory.

MemLab is open source and can be installed running npm i -g memlab.

Comments are closed.