memlab

memlab is an end-to-end testing and analysis framework for identifying JavaScript memory leaks and optimization opportunities.

Online Resources:

• Official Website and Demo
• Documentation
• Meta Engineering Blog Post

Features:

• Browser memory leak detection - Write test scenarios with the Puppeteer API, and memlab will automatically compare JavaScript heap snapshots, filter out memory leaks, and aggregate the results
• Object-oriented heap traversing API - Supports the creation of self-defined memory leak detector, and enables programmatic analysis JS heap snapshots taken from Chromium-based browsers, Node.js, Electron.js, and Hermes
• Memory CLI toolbox - Built-in toolbox and APIs for finding memory optimization opportunities (not necessarily just memory leaks)
• Memory assertions in Node.js - Enables unit tests or running node.js programs to take a heap snapshot of their own state, perform self memory checking, or write advanced memory assertions

CLI Usage

Install the CLI

npm install -g memlab

Find Memory Leaks

To find memory leaks in Google Maps, you can create a scenario file defining how to interact with the Google Maps, let's name it test-google-maps.js:

// initial page load url: Google Maps
function url() {
  return 'https://www.google.com/maps/@37.386427,-122.0428214,11z';
}

// action where we want to detect memory leaks: click the Hotels button
async function action(page) {
  // puppeteer page API
  await page.click('button[aria-label="Hotels"]');
}

// action where we want to go back to the step before: click clear search
async function back(page) {
  // puppeteer page API
  await page.click('[aria-label="Close"]');
}

module.exports = {action, back, url};

Now run memlab with the scenario file, memlab will interact with the web page and detect memory leaks with built-in leak detectors:

memlab run --scenario test-google-maps.js

memlab will print memory leak results showing one representative retainer trace for each cluster of leaked objects.

Retainer traces: This is the result from an example website, the retainer trace is an object reference chain from the GC root to a leaked object. The trace shows why and how a leaked object is still kept alive in memory. Breaking the reference chain means the leaked object will no longer be reachable from the GC root, and therefore can be garbage collected. By following the leak trace one step at a time, you will be able to find a reference that should be set to null (but it wasn't due to a bug).

MemLab found 46 leak(s)
--Similar leaks in this run: 4--
--Retained size of leaked objects: 8.3MB--
[Window] (native) @35847 [8.3MB]
  --20 (element)--->  [InternalNode] (native) @130981728 [8.3MB]
  --8 (element)--->  [InternalNode] (native) @130980288 [8.3MB]
  --1 (element)--->  [EventListener] (native) @131009888 [8.3MB]
  --1 (element)--->  [V8EventListener] (native) @224808192 [8.3MB]
  --1 (element)--->  [eventHandler] (closure) @168079 [8.3MB]
  --context (internal)--->  [] (object) @181905 [8.3MB]
  --bigArray (variable)--->  [Array] (object) @182925 [8.3MB]
  --elements (internal)--->  [(object elements)] (array) @182929 [8.3MB]
...

To get readable trace, the web site under test needs to serve non-minified code (or at least minified code with readable variables, function name, and property names on objects).

Alternatively, you can debug the leak by loading the heap snapshot taken by memlab (saved in $(memlab get-default-work-dir)/data/cur) in Chrome DevTool and search for the leaked object ID (@182929).

View Retainer Trace Interactively

View memory issues detected by memlab based on a single JavaScript heap snapshot taken from Chromium, Hermes, memlab, or any node.js or Electron.js program:

memlab view-heap --snapshot