Memory Leak on SPA application

Memory Leak on SPA application

Posted by: davide.vago on 2 March 2020, 11:37 am EST

• 

  davide.vago

  • Post Options:
  • Link
    Copy

  Posted 2 March 2020, 11:37 am EST

  Good morning/afternoon.

  I’m reaching you out as I recently being monitoring the behaviour of the application I’m working on which is based on Vue JS and has few pages embedding SpreadJS instances, (not the Vue version as the current development status is not ready for production).

  I noticed that even if we are firing the event destroy of the Workbook before initialising a new instance on route change there are listeners attached to the window which don’t go away.

  When I look at the window listeners I notice lots of mousemove, mousedown, resize, touchend, touchcancel getting duplicated. Unfortunately not having the possibility to debug the spreadjs code I can’t actually see where the problem lives… but I can see some references to these functions:

  checkParentSize,
  
  deselect

  Would you mind investigate and see if we could get rid of this memory leak please? It’s quite urgent for us to solve it as in our application switching between routes that contains Workbooks is one of the main feature and our user have to refresh the whole browser page in order to get rid of this killing memory issue.

  Thanks in advance

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 3 March 2020, 2:07 am EST

  Hi Davide,

  We are sorry but we are unable to replicate the issue. We performed the following steps to try and replicate the issue:
  
  • Open the following sample in chrome: https://codesandbox.io/s/spread-js-starter-w10yl
  
  • Open dev console and use “getEventListeners(window)” to get a list of current event listeners attached on the window.
  
  • Click on the “click” button a couple of time to destroy and recreate the SJS workbook
  
  • use “getEventListeners(window)” again to get the list of current listeners and compare with the initial list of event listeners
  
  : Event listeners attached to the window are the same after destroying and recreating the workbook.
  
  Please let us know if there are any additional steps to replicate the issue, also share a sample replicating the issue that we could investigate

  Regards
  
  Sharad

• 

  davide.vago

  • Post Options:
  • Link
    Copy

  Posted 3 March 2020, 5:48 am EST - Updated 3 October 2022, 10:28 am EST

  Good morning Sharad,
  
  Please note that your link fails to load as it complains about the GC global variable missing within the index.js file.

  However, this example is based on plain js.
  
  I did rebuild the example using Vue JS on this url: https://codesandbox.io/s/multi-instance-spreadjs-on-vue-tlx3r, if you open the devtools and you go to Event Listeners you will notice multiple listeners getting cloned (see the attached image).

  This is more visible when within the instance you specify multiple bindings of events (e.g selection change) or (edit ended)

  Please

  

  1164×751 186 KB

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 4 March 2020, 1:17 am EST - Updated 3 October 2022, 10:28 am EST

  Thank you for providing the sample but we are still unable to replicate the issue using the provided sample. I’ve attached a gif of our observation, please refer to it and let us know if there are any additional steps to replicate the issue.
  
  

• 

  davide.vago

  • Post Options:
  • Link
    Copy

  Posted 6 March 2020, 5:58 am EST

  You are right Sharad,

  For some reason this is not replicable on the given sample, I will investigate more as it is happening on our side but it might related to something else, e.g. the fact that we unbind and bind around 10 Events every time we create a new instance.

  I’ll keep an eye on this and will update as soon as I understand the cause.

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 9 March 2020, 12:52 am EST

  Please take your time and let us know if we could help.