Whereas JavaScript runtimes use rubbish assortment to handle reminiscence, this doesn’t rule out the potential of leaking reminiscence. To detect all attainable circumstances the place reminiscence is leaked, Fb created and open-sourced MemLab, a device in a position to run predefined, automatable take a look at situations and analyze heapshot diffs.
In a nutshell, MemLab finds reminiscence leaks by working a headless browser by way of predefined take a look at situations and diffing and analyzing the JavaScript heap snapshots.
Based mostly on the diff outcomes, MemLab builds an inventory of potential reminiscence leaks and for every of them generates a retainer traces, i.e. an object reference chain from the rubbish collector roots. By inspecting the retainer traces, you may visualize which references ought to have been set to null for correct assortment. Moreover, to scale back the quantity of data that must be analyzed, MemLab is ready to cluster leaked objects based mostly on the similarity of their retainer traces and present them for every cluster as a substitute of for every potential leak.
There are a variety of circumstances the place JavaScript might leak reminiscence. For instance, say Fb engineers Liang Gong and Glenn Conner, once you log an object to Chrome console, Chrome will take a hidden reference to it that can stop it from being collected. Different circumstances the place you may have leaks or unbound reminiscence development are associated to the unintentional use of world variables, to forgotten timers or callbacks, and to out-of-DOM references, says auth0 engineer Sebastian Peyrott.
Whereas Chrome Developer Instruments gives the important means to examine reminiscence behaviour of JavaScript code, together with the timeline view and the profiles view, this isn’t easy and can’t be automated. As a substitute, MemLab might be simply built-in in a CI/CD pipeline, say Gong and Conner.
For in-browser reminiscence leak detection, the one enter MemLab requires from builders is a take a look at situation file that defines the best way to work together with the webpage by overriding three callbacks with the Puppeteer API and CSS selectors. MemLab routinely diffs the JavaScript heap, refines reminiscence leaks, and aggregates outcomes.
MemLab can also be in a position to generate a graph-view of the JavaScript head, the place every heap object is represented as a node, whereas references are represented by way of edges. Apart from offering normal data resembling the whole retained measurement of a given set of parts, the graph may also be accessed programmatically for self-memory checking. Builders also can use a CLI and a API to discover prospects of reminiscence optimization of their apps.
Fb has been utilizing MemLab for just a few years, which allowed them to scale back OOM crashes on Fb.com by 50 p.c within the first half of 2021. Additionally they used the heap graph view and the heap evaluation API to additional enhance reminiscence behaviour of React Fibers and to enhance Relay reminiscence interning.
MemLab is open source and might be put in working npm i -g memlab.
