monaco-editor icon indicating copy to clipboard operation
monaco-editor copied to clipboard

[Bug] Memory leaking when disposing Diff editor

Open samirzubi-db opened this issue 6 months ago • 2 comments

Reproducible in vscode.dev or in VS Code Desktop?

  • [X] Not reproducible in vscode.dev or VS Code Desktop

Reproducible in the monaco editor playground?

Monaco Editor Playground Link

No response

Monaco Editor Playground Code

No response

Reproduction Steps

I wrote a small application demonstrating the issue: You can find it on the following link: https://zd9n67.csb.app/ Code: https://codesandbox.io/p/sandbox/react-typescript-forked-zd9n67

Actual (Problematic) Behavior

Diff editor does not dispose correctly after being removed from the dom. The regular editor component does not have this issue.

Initial load initial_render

Second memory snapshot second_take

Third memory snapshot third_take

Fourth memory snapshot fourth_take

The memory constantly grows as the diff editor is not properly disposed of. Form my investigation I could see that the Emitter and InteractionEmitter are constantly growing without being disposed in the monaco-editor/esm/vs/editor/browser/widget/codeEditor/codeEditorWidget.js file. Also a lot of detached canvas dom elements like: <canvas class="original diffOverviewRuler" ...

Expected Behavior

Diff editor gets removed properly and does not cause a memory leak.

Additional Context

We started observing the issue in the 0.44.0 version of monaco-editor as the earlier versions don't seem to have this problem. The example is for the latest version 0.51.0

samirzubi-db avatar Aug 27 '24 14:08 samirzubi-db