Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(sortable): unsubscribe item capture when component is destroyed #6546

Open
wants to merge 6 commits into
base: development
Choose a base branch
from

Conversation

Arooba-git
Copy link

Hello 👋
As part of our project, we are using Facebook's new Memlab tool to detect memory leaks in SPA applications.
While running the tool and analyzing the code of ngx-bootstrap, we saw that your project does a very good job of ensuring that all async operations are cancelled when the component unmounts. However, as per Memlab execution results, we found a dangling subscription that was causing the memory to leak (screenshots below).

[before]
Screen Shot 2023-01-24 at 6 10 24 AM
Screen Shot 2023-01-24 at 6 10 47 AM


Hence we added the fix by unsubscribing the subscription and you can see the heap size and # of leaks reducing noticeably:


Screen Shot 2023-01-24 at 6 11 07 AM
Screen Shot 2023-01-24 at 6 11 26 AM

As per the contribution guidelines, we ran the unit test cases; NX successfully ran the target tests for 24 projects.
You can analyze this and other potential leak sources, if you like, by running Memlab with a scenario file covering the maximum # of use cases.
Following is a sample of the scenario file we used (it needs to be a .js file but attaching here in .txt form):
ngx-test-scenario-memlab.txt

Note that some other reported leaks (in Memlab) originated from Storybook, hence were ignored.

Unsubscribed subscription in sortable component was causing memory to leak. We need to ensure all subscriptions are released whenever a component is destroyed.
@codecov
Copy link

codecov bot commented Jan 27, 2023

Codecov Report

Attention: Patch coverage is 42.85714% with 4 lines in your changes missing coverage. Please review.

Project coverage is 76.59%. Comparing base (e77c928) to head (b98712f).
Report is 1 commits behind head on development.

Files with missing lines Patch % Lines
src/sortable/sortable.component.ts 42.85% 4 Missing ⚠️
Additional details and impacted files

Impacted file tree graph

@@               Coverage Diff               @@
##           development    #6546      +/-   ##
===============================================
- Coverage        76.60%   76.59%   -0.01%     
===============================================
  Files              317      317              
  Lines            10748    10754       +6     
  Branches          2866     2866              
===============================================
+ Hits              8233     8237       +4     
- Misses            2514     2516       +2     
  Partials             1        1              
Files with missing lines Coverage Δ
src/sortable/sortable.component.ts 8.24% <42.85%> (+1.65%) ⬆️

... and 5 files with indirect coverage changes


Continue to review full report in Codecov by Sentry.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update b56863d...b98712f. Read the comment docs.

@cypress
Copy link

cypress bot commented Jan 27, 2023

35 failed tests on run #3851 ↗︎

35 803 14 0 Flakiness 0

Details:

Merge 0375b49 into 663c70e...
Project: ngx-bootstrap Commit: 4329b38ec4 ℹ️
Status: Failed Duration: 36:47 💡
Started: Jan 27, 2023 9:22 PM Ended: Jan 27, 2023 9:59 PM
Failed  datepicker/locales_spec.ts • 2 failed tests • full

View Output Video

Test
Datepicker demo testing suite: Locales > Change Locale Datepicker > when user chose locale es-pr for "Datepicker", container shown in appropriate language Screenshot
Datepicker demo testing suite: Locales > Change Locale DateRangepicker > when user chose locale es-pr for "Daterangepicker", container shown in this language Screenshot
Failed  typeahead_page_spec.ts • 1 failed test • full

View Output Video

Test
Typeahead demo page testing suite > On blur > clicking anywhere outside auto-fills "Option on blur" with the first option from the matches list Screenshot
Failed  modals_service_page_spec.ts • 13 failed tests • full

View Output Video

Test
Modals demo page testing suite: Service examples > Component modals with interceptor > when user clicks on "Close" button, triggers the interceptor and doesn't close the modal Screenshot
Modals demo page testing suite: Service examples > Component modals with interceptor > when user clicks on "Yes" button, closes the modal Screenshot
Modals demo page testing suite: Service examples > Component modals with interceptor > when user clicks on "No" button, doesn't close the modal Screenshot
Modals demo page testing suite: Service examples > Nested modals > when user clicks on the button "Open second modal" then the second modal with title "Second modal" is opened, "Close self" is present Screenshot
Modals demo page testing suite: Service examples > Events > when user closes modal by click on the cross then should be messages "onHide event has been fired" and "onHidden event has been fired" Screenshot
Modals demo page testing suite: Service examples > Events > when user closes modal by pressing ESC button then modal is closed and should be messages "onHide event has been fired" and "onHidden event has been fired" Screenshot
Modals demo page testing suite: Service examples > Confirm Window > when user clicks on "Open modal" button then modal is opened, it contains two buttons: "Yes" and "No" Screenshot
Modals demo page testing suite: Service examples > Custom css class > when user clicks on the cross button then the modal is closed Screenshot
Modals demo page testing suite: Service examples > Animation option > when user clicks on the cross button then the modal is closed Screenshot
Modals demo page testing suite: Service examples > Esc closing option > when user clicks on "Open modal" button then modal is opened. when user closes modal by click ESC button then modal stays opened Screenshot
The first 10 failed tests are shown, see all 13 tests in Cypress Cloud.
Failed  popover_page_spec.ts • 1 failed test • full

View Output Video

Test
Popover demo page testing suite > Component level styling > when user clicks on "I have component level styling", then popover-container appear above the button Screenshot
Failed  tabs_page_spec.ts • 1 failed test • full

View Output Video

Test
Tabs demo page spec > Dynamic tabs > when user clicks on close icon near tab, then this tab removed Screenshot

The first 5 failed specs are shown, see all 13 specs in Cypress Cloud.

This comment has been generated by cypress-bot as a result of this project's GitHub integration settings.

@Arooba-git
Copy link
Author

bump @valorkin

@Arooba-git
Copy link
Author

@lexasq Does this PR need any update on my part? :)

@lexasq
Copy link
Contributor

lexasq commented Jul 17, 2024

@Arooba-git thanks for your contribution, this PR definitely caught my eye to have a better look. No actions needed on your part, we appreciate your help to make this lib better!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants