[MGNLFE-428] PageEditorBridge listeners create memory leak with Angular Universal SSR Created: 03/Mar/23  Updated: 11/Jul/23  Resolved: 28/Apr/23

Status: Closed
Project: Magnolia Frontend Helpers
Component/s: Angular Renderer
Affects Version/s: 1.3.3
Fix Version/s: 1.4

Type: Bug Priority: Neutral
Reporter: Jean-Christophe Puja Assignee: Phong Le Quoc
Resolution: Fixed Votes: 0
Labels: None
Σ Remaining Estimate: Not Specified Remaining Estimate: Not Specified
Σ Time Spent: 18d 4.5h Time Spent: 18d 4.5h
Σ Original Estimate: Not Specified Original Estimate: Not Specified
Environment:

node v16.15.0


Attachments: PNG File Screenshot 2023-03-03 at 11.38.07.png    
Issue Links:
relation
is related to MGNLFE-465 editable page objects are created and... Open
is related to MGNLFE-464 page editor bridge calls are not cons... Closed
Sub-Tasks:
Key
Summary
Type
Status
Assignee
MGNLFE-460 Implement Sub-task Completed Phong Le Quoc  
MGNLFE-461 Review Sub-task Completed Robert Šiška  
MGNLFE-462 PiQA Sub-task Completed Robert Šiška  
MGNLFE-463 QA Sub-task Completed Canh Nguyen  
Template:
Acceptance criteria:
Empty
Task DoD:
[X]* Doc/release notes changes? Comment present?
[X]* Downstream builds green?
[X]* Solution information and context easily available?
[X]* Tests
[X]* FixVersion filled and not yet released
[ ]  Architecture Decision Record (ADR)
Bug DoR:
[X]* Steps to reproduce, expected, and actual results filled
[X]* Affected version filled
Date of First Response:
Epic Link: SPA Editor Backlog
Sprint: DevX 35, DevX 36
Story Points: 5
Team: DeveloperX
Work Started:
Approved:
Yes

 Description   

Steps to reproduce

  1. Clone the spa minimal demos repository: https://git.magnolia-cms.com/scm/demos/minimal-headless-spa-demos.git

  2. Follow the setup instructions for the Angular Universal demo, so that you have a page available at http://localhost:4200/angular-universal-minimal: https://git.magnolia-cms.com/projects/DEMOS/repos/minimal-headless-spa-demos/browse

  3. Restart the SPA with node.js in debug / profiling mode

    1. Stop the `dev:ssr` run

    2. Run the following command from the angular-universal-minimal directory: `node --trace-gc --inspect-brk dist/angular-universal-minimal/server/main.js`

    3. Open Chrome and type `about:inspect` in the address bar

    4. Click the "inspect" link on the remote target `dist/angular-universal-minimal/server/main.js` in the Devices tab

    5. A DevTools window opens for the Node server process

    6. Resume script execution
  4. Load the page (http://localhost:4200/angular-universal-minimal) repeatedly - about 100 times produces a noticeable result


  5. Take a heap snapshot from the DevTools window of the Node server process, in the Memory tab
  6. Expand the `Object` tree branch
    Screenshot of the heap view:

 

Link to a heap dump: 
https://drive.google.com/file/d/1LhlKFrPNlWa-lp1psUIqhdF9GxTb4FEk/view?usp=sharing

Actual results

  • There is one large object in the heap (16 MB for about 100 page loads) containing an array named `updatestate`, which contains callback functions. These function objects each hold a reference to an instance of the Magnolia `EditablePageComponent` as their `this` context.
  • The `updatestate` array grows larger with every Angular Universal render, as callbacks are pushed to it in the constructor of `EditablePageComponent` (delegating to `PageEditorBridge`) but never cleared on Angular destroy events
  • The references to `EditablePageComponent` can retain quite a bit of memory in the heap, as the components hold references to the entire Angular context

    Expected results

  • Objects used for a single Angular Universal render are not retained when the rendering is completed, resp. for the remainder of the server running time
  • The instances of EditablePageComponent are properly garbage collected after an Angular Universal render

    Workaround

No effective workaround found

Development notes


Generated at Mon Feb 12 05:47:20 CET 2024 using Jira 9.4.2#940002-sha1:46d1a51de284217efdcb32434eab47a99af2938b.