Memory Leak in Object.js Editor

General information

Believe I’ve identified the source of memory leak.

We noticed that after visiting a page in our angular app with a json-editor (and a VERY large schema), and then leaving, the app felt sluggish. Digging around in Chrome dev tools confirmed that memory usage climbs significantly after visiting the page and never drops back down.

I’m no expert in memory leaks, but some further digging led me to line 647 in objects.js, where there’s an event listener added directly to the document. I tweaked that code to attach a named function instead of an anonymous function, and then detached the listener in destroy(), and that seemed to prevent the leak.

json-editor version

1.4.0-beta.0

Expected behavior

Memory usage return to previous level after destroying the editor.

Actual behavior

Memory stays bloated.

Steps to reproduce the behavior

1. Go to the Interactive playground
2. Upload the json setup from below. You’ll notice in the Javascript section I added a couple buttons to destroy and rebuild the editor.
3. Force garbage collection (in chrome dev tools memory tab) and then take a heap snapshot.
4. Load in the sample JSON (also below).
5. Click the “Destroy Form” button
6. Force GC and take another heap snapshot. You’ll see that memory is still much higher than before. There are a bunch of leftover objects, arrays, detached DOM nodes, etc.

PS. I’m working on the same application as the submitter of #252, @j2jensen.

For now we’ll likely fork and implement the fix in our own application, but would love to submit a PR if the maintainers are supportive.

Has the setup for the interactive demo & json data: memoryLeak.zip

[corykon]

Memory leak causing us problems was still there in the 2.x branch. Submitted a small PR to fix. #469

[istvan-arany]

Yea 😃 I solved it in a different way since then though 😃