[#64] Q & A continue

[MaheshDevaraj]

          Hi @JacksonGL , Thanks for the updates. 

I tried following the above suggestions, In my case in the memlab logs I don't see any variable (leakedObjects from the https://facebook.github.io/memlab/docs/guides/guides-detached-dom , for example). I only see random numbers being shown and from this I'm not able to narrow down to the code that causes the leaks. I also used memlab view-heap --node-id <LEAKED_OBJECT_ID> and was not able to get any useful informations.

While using Chrome Dev tools memory profile, I'm able to see a link to the code that causes the leak. Can you guide me here? Not sure if I've missed something while using memlab.

I actually want to get the same info (links to the code that causes the leaks) that Chrome dev tools memory profile gives.

Memlab logs from my application:- MemLab found 7 leak(s)

--Similar leaks in this run: 13-- --Retained size of leaked objects: 105.4KB-- [] (synthetic) @1 [5.3MB] --2 (shortcut)---> [Window / http://localhost:8000] (object) @9823 [48.6KB] --require (property)---> [requirejs] (closure) @69911 [3.1KB] --s (property)---> [Object] (object) @69913 [212 bytes] --contexts (property)---> [Object] (object) @54171 [96 bytes] --_ (property)---> [Object] (object) @54173 [2.3KB] --defined (property)---> [Object] (object) @53929 [37.8KB] --preact/compat (property)---> [Object] (object) @54089 [9.3KB] --useTransition (property)---> [K] (closure) @137041 [68 bytes] --context (internal)---> [] (object) @122325 [116.3KB] --U (variable)---> [p] (object) @227695 [107.6KB] --__P (property)---> [Detached HTMLElement] (native) @212991 [105.4KB] --11 (element)---> [Detached InternalNode] (native) @262836032 [228 bytes] --2 (element)---> [Detached DOMTokenList] (native) @213075 [84 bytes]

--Similar leaks in this run: 32-- --Retained size of leaked objects: 5.4KB-- [Window] (native) @41625 [52.8KB] --4 (element)---> [HTMLDocument] (native) @41611 [10.7KB] --jQuery361067752674121521841 (property)---> [Object] (object) @79307 [836 bytes] --events (property)---> [Object] (object) @130275 [584 bytes] --touchcancel (property)---> [Array] (object) @130523 [180 bytes] --0 (element)---> [Object] (object) @130539 [68 bytes] --handler (property)---> [native_bind] (closure) @130503 [136 bytes] --bound_this (internal)---> [constructor] (object) @129375 [8.9KB] --m_preActiveItem (property)---> [jQuery.fn.init] (object) @242125 [192 bytes] --0 (element)---> [Detached HTMLLIElement] (native) @212863 [1.3KB] --8 (element)---> [Detached HTMLAnchorElement] (native) @213121 [1.2KB] --5 (element)---> [Detached DOMTokenList] (native) @274847456 [56 bytes]

--Similar leaks in this run: 3-- --Retained size of leaked objects: 292 bytes-- [(GC roots)] (synthetic) @3 [598.2KB] --13 (element)---> [(Global handles)] (synthetic) @29 [1KB] --10 / DevTools console (internal)---> [Detached HTMLSpanElement] (native) @40985 [688 bytes] --3 (element)---> [Detached InternalNode] (native) @75016864 [548 bytes] --6 (element)---> [Detached InternalNode] (native) @75057344 [232 bytes] --1 (element)---> [Detached NodeList] (native) @213115 [84 bytes]

--Similar leaks in this run: 1-- --Retained size of leaked objects: 272 bytes-- [] (synthetic) @1 [5.3MB] --2 (shortcut)---> [Window / http://localhost:8000] (object) @9823 [48.6KB] --oj (property)---> [Object] (object) @53949 [5.8KB] --CompositeTemplateRenderer (property)---> [Object] (object) @99535 [836 bytes] --_BINDING_CONTEXT (property)---> [ko.bindingContext] (object) @131325 [68 bytes] --ko (property)---> [Object] (object) @41837 [38.8KB] --tasks (property)---> [Object] (object) @123809 [1.4KB] --scheduler (property)---> [] (closure) @192441 [548 bytes] --context (internal)---> [] (object) @192757 [480 bytes] --div (variable)---> [Detached HTMLDivElement] (native) @41691 [412 bytes] --3 (element)---> [Detached InternalNode] (native) @274838656 [272 bytes] --1 (element)---> [Detached InternalNode] (native) @274900896 [272 bytes] --1 (element)---> [Detached InternalNode] (native) @274849216 [272 bytes] --1 (element)---> [Detached MutationObserverRegistration] (native) @262804992 [272 bytes]

--Similar leaks in this run: 3-- --Retained size of leaked objects: 248 bytes-- [Window] (native) @41625 [52.8KB] --4 (element)---> [HTMLDocument] (native) @41611 [10.7KB] --10 (element)---> [Range] (native) @56703552 [96 bytes] --2 (element)---> [HTMLUListElement] (native) @41341 [6.3KB] --8 (element)---> [HTMLDivElement] (native) @41373 [472 bytes] --6 (element)---> [HTMLDivElement] (native) @41345 [1.3KB] --7 (element)---> [HTMLElement] (native) @41083 [14.4KB] --13 (element)---> [HTMLDivElement] (native) @41085 [664 bytes] --9 (element)---> [HTMLDivElement] (native) @41567 [752 bytes] --8 (element)---> [Text] (native) @41031 [124 bytes] --4 (element)---> [HTMLElement] (native) @41039 [700 bytes] --6 (element)---> [Text] (native) @41383 [124 bytes] --4 (element)---> [HTMLDivElement] (native) @41381 [456 bytes] --7 (element)---> [Text] (native) @41421 [124 bytes] --4 (element)---> [HTMLUListElement] (native) @41419 [452 bytes] --6 (element)---> [Text] (native) @41441 [124 bytes] --4 (element)---> [Comment] (native) @41121 [124 bytes] --5 (element)---> [Comment] (native) @41125 [3.8KB] --_templateNode (property)---> [Detached HTMLTemplateElement] (native) @41115 [1.7KB] --6 (element)---> [Detached DocumentFragment] (native) @41135 [1.1KB] --5 (element)---> [Detached Text] (native) @75038304 [96 bytes] --2 (element)---> [Detached HTMLLIElement] (native) @74974464 [808 bytes] --2 (element)---> [Detached Text] (native) @74994624 [96 bytes] --2 (element)---> [Detached HTMLAnchorElement] (native) @75012704 [504 bytes] --1 (element)---> [Detached DOMTokenList] (native) @274834336 [56 bytes]

--Similar leaks in this run: 1-- --Retained size of leaked objects: 56 bytes-- [Window] (native) @41625 [52.8KB] --4 (element)---> [HTMLDocument] (native) @41611 [10.7KB] --12 (element)---> [HTMLHtmlElement] (native) @41515 [7.4KB] --6 (element)---> [HTMLBodyElement] (native) @41589 [312 bytes] --5 (element)---> [Text] (native) @75010304 [96 bytes] --2 (element)---> [Comment] (native) @75009984 [96 bytes] --3 (element)---> [Text] (native) @262852832 [96 bytes] --3 (element)---> [HTMLScriptElement] (native) @40819 [3KB] --ko1679020612580 (property)---> [Object] (object) @131615 [2.5KB] --4ko1679020612580 (property)---> [Object] (object) @131629 [2.4KB] --containerData (property)---> [Detached HTMLDivElement] (native) @40829 [2.2KB] --4 (element)---> [Detached Text] (native) @40825 [124 bytes] --4 (element)---> [Detached HTMLLIElement] (native) @40823 [1.8KB] --3 (element)---> [Detached HTMLAnchorElement] (native) @40835 [372 bytes] --3 (element)---> [Detached DOMTokenList] (native) @274896416 [56 bytes]

--Similar leaks in this run: 1-- --Retained size of leaked objects: 48 bytes-- [] (synthetic) @1 [5.3MB] --2 (shortcut)---> [Window / http://localhost:8000] (object) @9823 [48.6KB] --$ (property)---> [jQuery] (closure) @50567 [26.1KB] --support (property)---> [Object] (object) @93481 [1.2KB] --reliableTrDimensions (property)---> [reliableTrDimensions] (closure) @192215 [68 bytes] --context (internal)---> [] (object) @193043 [640 bytes] --div (variable)---> [Detached HTMLDivElement] (native) @41553 [188 bytes] --3 (element)---> [Detached InternalNode] (native) @262884032 [48 bytes] --1 (element)---> [Detached CSSStyleDeclaration] (native) @274845856 [48 bytes]

Originally posted by @MaheshDevaraj in https://github.com/facebook/memlab/issues/64#issuecomment-1473034102

[JacksonGL]

It's important to understand what the output from MemLab means to debug memory leaks.

MemLab prints the retainer trace of the leaked objects. A retainer trace is a reference chain from the GC root (at the top of the trace) to the leaked object (at the bottom of the trace). It explains why and how a leaked object is still kept alive in memory.

To give a simple example, the following trace means A keeps B alive (with a reference named c). B keeps C alive (with a reference named d). Therefore C cannot be garbage collected.

[A] 
--c--> [B] 
--d--> [C]

Now let's take a look at the leak trace from the tutorial:

[window](object) -> leakedObjects(property) -> [Array](object)
  -> 0(element) -> [Detached HTMLDIVElement](native)

It means the window object has a property named leakedObjects pointing to an Array in the web site under test in the tutorial. It is a contrived example just to demonstrate a leak example and what its leak trace looks like.

Therefore, unless your application contains a variable or object property named leakedObjects, the leak trace detected from your web app will not include the leakedObjects reference.

[JacksonGL]

The traces from your web site do have some numbers, but they are not random numbers.

For instance, let's take a look at the first trace from your reports:

[] (synthetic) @1 [5.3MB]
--2 (shortcut)---> [Window / http://localhost:8000] (object) @9823 [48.6KB]
--require (property)---> [requirejs] (closure) @69911 [3.1KB]
--s (property)---> [Object] (object) @69913 [212 bytes]
--contexts (property)---> [Object] (object) @54171 [96 bytes]
--_ (property)---> [Object] (object) @54173 [2.3KB]
--defined (property)---> [Object] (object) @53929 [37.8KB]
--preact/compat (property)---> [Object] (object) @54089 [9.3KB]
--useTransition (property)---> [K] (closure) @137041 [68 bytes]
--context (internal)---> [] (object) @122325 [116.3KB]
--U (variable)---> [p] (object) @227695 [107.6KB]
--__P (property)---> [Detached HTMLElement] (native) @212991 [105.4KB]
--11 (element)---> [Detached InternalNode] (native) @262836032 [228 bytes]
--2 (element)---> [Detached DOMTokenList] (native) @213075 [84 bytes]

[] (synthetic) @1 [5.3MB] --2 (shortcut)---> [Window / http://localhost:8000] means the GC root has a native shortcut reference (with index 2) pointing to the Window object.

However, most of the time you don't need to fully understand the entire trace to debug memory leaks. You only need to find the top-most detached DOM element and start working backwards:

The part that is particular interesting is this:

--_ (property)---> [Object] (object) @54173 [2.3KB]
--defined (property)---> [Object] (object) @53929 [37.8KB]
--preact/compat (property)---> [Object] (object) @54089 [9.3KB]
--useTransition (property)---> [K] (closure) @137041 [68 bytes]
--context (internal)---> [] (object) @122325 [116.3KB]
--U (variable)---> [p] (object) @227695 [107.6KB]
--__P (property)---> [Detached HTMLElement] (native) @212991 [105.4KB]

It seems that your code uses preact. This module uses a hook called useTransition, which includes a callback that keeps a variable (@122325) alive within its surrounding closure context.

Notice that I'm thinking out loud on how we debug memory leak traces without using the code links. In this case, however, it appears the website under test is minified; so investigating the code related to the leak based on the minified names are difficult.

To determine the actual function name of K, the real variable name of U, and the real constructor name of p, you should run memlab on the un-minified version of your website. Once you have those actual names in your code, it's easy to search and narrow down to the code and files that generates this reference chain.

PS: If your website is un-minified but you are using a minfied preact library, it is likely that preact may have a memory leak.

[JacksonGL]

The reason why Chrome DevTools can provide the code link but MemLab cannot is because each closure instance in the heap snapshot contains a scriptId number, which is just a reference number for the JS source code loaded in Chrome's memory. Chrome DevTools can use this scriptId key to map and query source code. However, Chrome does not save the information mapped by the scriptId to disk, which means MemLab cannot query the mapped information based on scriptId.