Kendo-angular: Memory leak in Kendo Charts

Created on 8 Aug 2018  路  4Comments  路  Source: telerik/kendo-angular

I'm submitting a...

  • Bug report

Current behavior

Kendo SparklineComponent does not get garbage collected when parent component gets destroyed.

Expected behavior

When parent component is destroyed, all Sparkline components must be destroyed as well.

Minimal reproduction of the problem with instructions

1) Open the following plunker in Google Chrome and click the Destroy/Show buttons multiple times.
https://plnkr.co/edit/37ZTWC68hQsywCYWV2IG?p=preview
2) Open Memory tab in Chrome Dev Tools and click Collect Garbage.
3) Take heap snapshot and search for SVGSVG. You should find multiple detached SVGSVGElements.
_Notice that the number of SVGSVGElements equals to the number of sparklines in the custom component which is 6 multiplied by the number of times the destroy button was clicked._
4) Select any SVGSVGElement and analyze the retainers info.
5) In the retainers tab you should see "element in e". See the image below.
memory leak
The "e" is actually SparklineComponent. There are still alive references to it in the tree which looks like a bug.
The memory leak with SparklineComponent prevents CustomComponent to be garbage collected as well. It is easy to verify that by examining the retainers for the CustomComponent instances.

UPD
After looking at the issue in more detail, I believe it is related to all kendo charts. Here is an updated plnkr that uses Kendo Line chart instead of Sparkline
https://plnkr.co/edit/9KV8OLFGzCfqhUyEdVKC?p=preview

Environment

Package versions:
@progress/[email protected]
angular 6.0.9
```

Browser:

  • Chrome (desktop) Version 67.0.3396.99 (Official Build) (64-bit)
Bug charts

All 4 comments

I believe the problem is in the ngAfterViewInit method in chart.component.js.
this.subscriptions = sub1.add(sub2) does not work the way it is expected to work in the code. sub1.add(sub2) returns sub2, not sub1, therefore in the ngOnDestroy, you unsubscribe from the last subscription only. The first subscription keeps _this in memory causing a memory leak in any application where a component with kendo chart inside gets destroyed. In order to fix the issue you may want to change the code to

this.subscriptions = sub1;
this.subscriptions.add(sub2);

Is there going to be a hot fix?

Thanks for the detailed description. The problem with the subscription was recently fixed in the dev version of the package. We will recheck for any other memory leaks and if there aren't any we will publish an official version.

Thanks for the quick response. I can confirm that the issue is fixed in 3.3.1-dev.201807311207

Version 3.3.1 has been published. There doesn't seem to be any other leaks.

Was this page helpful?
0 / 5 - 0 ratings