Aurelia custom element not garbage collected in chrome

Question

I'm totally lost with a memory leak I found in my Aurelia application, where some custom elements are not removed from the object graph by the garbage collector.

I used the Chrome DevTools Memory Snapshot tool to trace all references and was able to remove all of them. At least I can't find any yellow node in the dev tools anymore which is referencing the custom element. Now I only have a lot of detached nodes which are not cleaned up.

Does anyone know another way to find these references?

I tried it with the npm module heapsnapshot and used the function pathToRoot on the custom element. This function searches recursive a path to the root element. Even this function tells me that my custom element instance has no path to root. So why is it still in memory?

I could give a heap snapshot from chrome if someone wants to try to find the solution.

Answer 1

Actually today I found the solution after 3 days! The way I was going with the analyzing tool was correct but I didn't had in my mind that references to the dev tools as well prevent the garbage collection. I had in my app.js an event listener to detect the current page and render it as a class on my router-view. In this listener there was a logging which logged with debug method the instruction which then created a reference between the log output of the dev tools and the instruction and therefore a reference to all child views.

ea.subscribe('router:navigation:complete', ({instruction}) => {
  log.debug('Main route switched', instruction); // <<<<<<<<<<< Memory leak
  this.currentRoute = instruction.router.currentInstruction && instruction.router.currentInstruction.config.name;
});

TL;DR: Don't just log objects because they will referenced to the dev console. Better create a new string to be logged based on the values in the object.