Clear dangling EventListeners and Detached Nodes when a controller is removed from the DOM #592

intrip · 2022-10-20T07:53:22Z

eventListenerMaps maps HTML elements handled by Stimulus to eventListenerMap, a map of Stimulus EventListeners in this way: { HTMLelement: { eventName: EventListener } }. When a controller HTML is removed from the DOM the dangling EventListeners aren't removed, moreover, the removed HTML elements are still referenced via the eventListenerMaps keys. This leads to having multiple detached HTMLelements and eventListeners which can't be GCed hence a memory leak. The leak is fixed by removing the dangling eventListeners and clearing unused eventListenerMaps keys. When the HTMLelement is attached again to the DOM, the eventListenerMaps and the related eventListeners are automatically re-created by Stimulus via the MutationObservers, no data is lost by doing this.

Below is an example to reproduce the issue:

<html>
  <head>
    <title>EventListenerMaps memory leak</title>
    <script type="module">
      import { Application, Controller } from "https://unpkg.com/@hotwired/stimulus/dist/stimulus.js"
      window.Stimulus = Application.start()
      Stimulus.register("boosts", class extends Controller {
        doClick() { process(500) }
      })
    </script>
    <script>
      function process(count) {
        let i = 0
        let handler = setInterval(function(){
          if (++i > count) {
            clearInterval(handler)
          } else {
            document.body.replaceWith(document.body.cloneNode(true))
          }
        }, 1)
      }
    </script>
</head>
<body>
  <div data-controller="boosts">
    To reproduce:
    <ul>
      <li>Check heap snapshot</li>
      <li>Click "trigger leak" button</li>
      <li>Check heap snapshot again</li>
    </ul>
    <button data-action="click->boosts#doClick">trigger leak</button>
  </div>
</body>
</html>

heap snapshot before:

heap snapshot after:

Related #489 #547

rik · 2022-10-20T10:24:40Z

Could this be solved by only changing Dispatcher.eventListenerMaps to a WeakMap?

stimulus/src/core/dispatcher.ts

Line 13 in 9686943

this.eventListenerMaps = new Map()

intrip · 2022-10-20T10:55:22Z

Could this be solved by only changing Dispatcher.eventListenerMaps to a WeakMap?

stimulus/src/core/dispatcher.ts

Line 13 in 9686943

this.eventListenerMaps = new Map()

I thought about this too but, unfortunately, I don't think it would work: EventListener objects (referenced via EventListenerMaps have a specific lifecycle so they need to be correctly disconnected before being removed, by using a WeakMap we don't have control on that. For example, If an EventListener won't be disconnected properly we'll have a case when the Dispatcher will re-create and connect a new one and we'll end up in a state with duplicate EventListener objects connected to the same event/target.

jorgemanrubia

Amazing work tracking this one down @intrip 🙌!

jorgemanrubia · 2022-10-21T03:09:42Z

src/core/binding_observer.ts

@@ -7,7 +7,7 @@ import { Token, ValueListObserver, ValueListObserverDelegate } from "../mutation

 export interface BindingObserverDelegate extends ErrorHandler {
  bindingConnected(binding: Binding): void
-  bindingDisconnected(binding: Binding): void
+  bindingDisconnected(binding: Binding, clearEventListeners?: boolean): void


Is there a scenario where we want to invoke this bindingDisconnected method without clearing the listeners?

Good question! I added this conditional after I've seen this test to fail: When an attribute is replaced with a new one bindingDisconnected is triggered (via tokensUnmatched) but if we clear the listener, in this case, we lose the options initially set ("once" in this case) so the test will fail.

jorgemanrubia · 2022-10-21T03:34:50Z

src/core/dispatcher.ts

+
+      if (eventListenerMap.size == 0) this.eventListenerMaps.delete(eventTarget)
+    }
+  }


Maybe could extract a couple of methods to clarify logic. I also added a method EventListener.hasBindings:

private clearEventListenersForBinding(binding: Binding) { const eventListener = this.fetchEventListenerForBinding(binding) if (!eventListener.hasBindings()) { this.removeMappedEventListenerFor(binding) eventListener.disconnect() } } private removeMappedEventListenerFor(binding: Binding) { const { eventTarget, eventName, eventOptions } = binding const eventListenerMap = this.fetchEventListenerMapForEventTarget(eventTarget) const cacheKey = this.cacheKey(eventName, eventOptions) eventListenerMap.delete(cacheKey) if (eventListenerMap.size == 0) this.eventListenerMaps.delete(eventTarget) }

jorgemanrubia · 2022-10-21T03:37:48Z

src/core/dispatcher.ts

@@ -51,6 +52,19 @@ export class Dispatcher implements BindingObserverDelegate {
    this.application.handleError(error, `Error ${message}`, detail)
  }

+  private clearEventListenersForBinding(binding: Binding) {
+    const eventListener = this.fetchEventListenerForBinding(binding)
+    if (eventListener.bindings.length == 0) {


Why do we need this check eventListener.bindings.length == 0? In which scenario can this be invoked where this doesn't validate? I don't see anything wrong I just want to understand 😅.

Please ask!
It's a rough edge but It's possible to have multiple bindings for the same EventListener. Let's say we have this scenario:

<div data-controller="boosts"> <button data-action="click->boosts#doSomething click->boosts#doSomething">Hey!</button> </div>

In this case, if change the "data-action" we don't want to clear the EventListener unless we remove both click->boosts#doSomething actions.
Right now we call this method only if the whole controller is removed so the safeguard is not a necessity, it was a necessity in the first version I made which didn't use the "clearEventListeners" flag. On the other hand, keeping it looks a bit safer to me so right now I'm keen on keeping it. No strong opinion at all though (can even add a force flag if needed at some point to skip the guard).

brunoprietog · 2022-10-21T09:56:01Z

Great, this would be able to potentially fix #489 and #547?

intrip · 2022-10-21T09:57:25Z

Great, this would be able to potentially fix #489 and #547?

Yes, those two issues look related.

… removed from the DOM `eventListenerMaps` maps HTML elements handled by Stimulus to `eventListenerMap`, a map of Stimulus EventListeners in this way: `{ HTMLelement: { eventName: EventListener } }`. When a controller HTML is removed from the DOM the dangling EventListeners aren't removed, moreover, the removed HTML elements are still referenced via the `eventListenerMaps` keys. This leads to having multiple detached HTMLelements and eventListeners which can't be GCed hence a memory leak. The leak is fixed by removing the dangling eventListeners and clearing unused `eventListenerMaps` keys. When the HTMLelement is attached again to the DOM, the `eventListenerMaps` and the related `eventListeners` are automatically re-created by Stimulus via the MutationObservers, no data is lost by doing this. Below is an example to reproduce the issue: ``` <html> <head> <title>EventListenerMaps memory leak</title> <script type="module"> import { Application, Controller } from "https://unpkg.com/@hotwired/stimulus/dist/stimulus.js" window.Stimulus = Application.start() Stimulus.register("boosts", class extends Controller { doClick() { process(500) } }) </script> <script> function process(count) { let i = 0 let handler = setInterval(function(){ if (++i > count) { clearInterval(handler) } else { document.body.replaceWith(document.body.cloneNode(true)) } }, 1) } </script> </head> <body> <div data-controller="boosts"> To reproduce: <ul> <li>Check heap snapshot</li> <li>Click "trigger leak" button</li> <li>Check heap snapshot again</li> </ul> <button data-action="click->boosts#doClick">trigger leak</button> </div> </body> </html> ```

jorgemanrubia reviewed Oct 21, 2022

View reviewed changes

intrip force-pushed the clear-dangling-event-listeners branch from 1dc5415 to 4a064a2 Compare October 21, 2022 08:29

intrip requested a review from jorgemanrubia October 21, 2022 08:31

intrip force-pushed the clear-dangling-event-listeners branch from 4a064a2 to a912acc Compare October 31, 2022 11:40

dhh merged commit 8b8b79b into hotwired:main Oct 31, 2022

This was referenced Nov 1, 2022

Memory leak #489

Closed

Potential Memory Leak in Dispatcher #547

Closed

intrip deleted the clear-dangling-event-listeners branch November 2, 2022 09:46

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Clear dangling EventListeners and Detached Nodes when a controller is removed from the DOM #592

Clear dangling EventListeners and Detached Nodes when a controller is removed from the DOM #592

intrip commented Oct 20, 2022

rik commented Oct 20, 2022 •

edited

Loading

intrip commented Oct 20, 2022 •

edited

Loading

jorgemanrubia left a comment

jorgemanrubia Oct 21, 2022

intrip Oct 21, 2022

jorgemanrubia Oct 21, 2022

jorgemanrubia Oct 21, 2022

intrip Oct 21, 2022 •

edited

Loading

brunoprietog commented Oct 21, 2022

intrip commented Oct 21, 2022 •

edited

Loading

Clear dangling EventListeners and Detached Nodes when a controller is removed from the DOM #592

Clear dangling EventListeners and Detached Nodes when a controller is removed from the DOM #592

Conversation

intrip commented Oct 20, 2022

rik commented Oct 20, 2022 • edited Loading

intrip commented Oct 20, 2022 • edited Loading

jorgemanrubia left a comment

Choose a reason for hiding this comment

jorgemanrubia Oct 21, 2022

Choose a reason for hiding this comment

intrip Oct 21, 2022

Choose a reason for hiding this comment

jorgemanrubia Oct 21, 2022

Choose a reason for hiding this comment

jorgemanrubia Oct 21, 2022

Choose a reason for hiding this comment

intrip Oct 21, 2022 • edited Loading

Choose a reason for hiding this comment

brunoprietog commented Oct 21, 2022

intrip commented Oct 21, 2022 • edited Loading

rik commented Oct 20, 2022 •

edited

Loading

intrip commented Oct 20, 2022 •

edited

Loading

intrip Oct 21, 2022 •

edited

Loading

intrip commented Oct 21, 2022 •

edited

Loading