I've been scavenging the internet for the last week lately trying to figure out how to spot and solve memory leaks within my React application, because well, I think I have a memory leak in my application. I've noticed that our application crashes more and more frequently lately and I continue to get the same error from Node.js: API fatal error handler returned after process out of memory. I knew that the application that I was working on developed by others before me had some serious flaws, but never knew that they were this bad, so I decided to turn to the internet to try and solve this issue.
I looked at the Chrome Dev Tools and taking heap snapshots to see if there is an increase in memory and it is apparent that there is when I see the memory shoot from 123MB to 200+MB after a few actions within the application. Now this is a good tool for determining whether there is a possible memory leak or not, but it's absolutely hard to read and understand, which doesn't help me determine where the issues lye.
Now our AWS instance is only 1GB in size and a lot of answers I see about this sort of issue is to just increase the max space of Node.js but that doesn't solve any issues, instead it just throws a band-aid on it until the issue occurs again, which is not good practice in my opinion. I'm coming here now in hopes that someone can help me understand what in the world I'm looking at when using the Chrome Dev Tools, and/or if someone knows a better way in finding out where the issues are in my code that would be very helpful as well. Thanks In Advance.
EDIT
Out of all of the most common issues with memory leaks in javascript that I have read online, there aren't any that stick out to me within our application, so I'm very confused on were the possible leak is coming from.
Another thing is that the application is grabbing a lot of data from our backend and keeping it in memory. Could minimizing the amount of data that is retrieved help, or would that only slow down the issue instead of fixing it?