Search code examples
node.jsreactjsgoogle-chrome-devtoolsheap-dumpnode-heapdump

Profiling heapdumps in Chrome Developer Tools (memory leak)

I'm having bit trouble with a NodeJS/Express/React application that is on production as we speak.

The problem is, that it keeps climbing up on memory usage and it just doesn't stop. It is slow and steady, and eventually Node crashes. I have several heapdumps that I have been creating with the help of node-heapdump, however, I don't know how to properly identify the leak.

I will share an image of my snapshot. Please note that I sorted by shallow size so supposedly one of those objects/types that appear on top must be the problem:

enter image description here

As I can see below, there is this "Promis in @585" that I see in many places and that could be the one, but I'm unable to identify that line, function or component.

Anybody could help? I can share more screenshots if you want.

Thanks.

Solution

  • I found the problem.

    I'm using React Body Classname in my app so when we load different routes we can change the body class from client side. This npm module needs to be used with the Rewind() funcion when you do server side rendering in order to avoid memory leaks:

    This is the module I'm talking about:

    https://github.com/iest/react-body-classname

    And, in order to avoid the memory leak, we are calling:

    BodyClassName.rewind()

    In the render function of our main App.js container component. This way, doesn't matter what url a user is landing on, Rewind() will always be called and so the data that can be garbage collected will be properly freed in the future.

    Now our app stays at a nice and steady 120mb of memory usage.

    Thanks anyway :D