13

Lately, my team and I have been getting more focused on addressing high memory usage in our Electron application. Our app has a couple renderer processes that has time goes by can end up eating gigs of memory, when our application uses no where near that amount of memory. We most likely have to spend a good amount of time tracking down this leak(s).

The key thing that has me throughly confused about what's going on is that when looking in Chrome Devtools on the memory tab, the value seems completely reasonable compared to the values that we pull out Activity Monitor. (Images below were captured at the same time)

enter image description here

enter image description here

I don't quite know where to start with this information. Why are these numbers so different? Does our web app have a leak in it that only exposes itself through the Electron application memory? Is there something wrong with how we have Electron setup to render our app? Is it both?

This type of issue seems to be common when using Electron, but for the life of me I cannot find resources to start really debugging this issue. I'm not necessarily looking for a direct answer on my setup, as I have not provided enough information for that directly. I am just on a fact finding mission to gain a better understanding of how to debug this type of issue within the Electron ecosystem.

Scalahansolo
  • 2,615
  • 6
  • 26
  • 43

3 Answers3

9

I don't know much about Electron, however I enjoy researching and these sorts of issues! I certainly don't have a clear solution for you but I hope some of these things can help you debug or make some progress on your memory issues.

One thing to mention is that you could have a memory issue with 3 separate things:

  • It could be your own code that's causing a memory leak.
  • It could be Electron that's causing a memory leak.
  • It could be Chromium that's causing a memory leak (since Electron is using Chromium).

Another thing to mention is that it's not necessarily a memory "leak", it could also just be a memory bloat. The difference is that with a memory leak it will keep leaking memory till it just crashes, whereas with a memory bloat it will just hog up all the memory till there's nothing left before it starts removing old stuff from memory.

From the things you've shared it's very difficult to tell where an issue might be without debugging and figuring it out. So what I'd do is to first make sure that it's not your own code causing the leak/bloat, try running small parts of your code and see if the memory is still an issue, then start adding more parts of your code incrementally until you've added everything. If at any point the memory starts being an issue, it's likely the code itself (but not necessarily, then at least you've pinpointed what it is). For example if the memory suddenly starts increasing on the image component you've used, you can pinpoint that it's something to do with the images/caching.

Potential things you can try

  • First debug your code to make sure it's not your code, or at least pinpoint exactly what it is if it is your code.
  • Check if the images you're using (or other resources) are being cached and if that's what's causing the memory to build up. You could use a cache-control header and disable caching in the dev-tools to make sure there's no caching in a dev environment so you can see if it's the caching.
  • Check if there are any browser settings you can play around with in Electron, I have no idea if you can but if Electron is using Chromium it stands to reason that you should be able to play around with settings like hardware acceleration, disabling it from running in the background and the preload page optimization. Things I read from here: https://ssiddique.info/fix-chrome-memory-leak.html. Or play around with any similar settings you can find.

I believe, intuitively, that the issue is with caching. It seems to me that Electron can use an absurd amount of memory and if it's caching images constantly without deleting it, it will hog up the memory until there's nothing left, before it will start removing old stuff from the cache. What's worse is that if you're using swap/virtual memory and the RAM gets full it will also write those to disk before removing it from RAM, which could also explain an increase in disk space. I'd personally try just disabling all caching and seeing what happens. This is also something you can see here: Changing backgroundImage causes memory leak (Electron). Here is another example: Changing image src constantly / memory usage (Electron), in this case I think the person answering this question probably saw a decrease in memory because of the images not being cached any more when he was using base64 instead. Here is another issue on Chromium: https://forums.raspberrypi.com/viewtopic.php?t=296598, where clearing the ton of cached files also worked. Here, electron memory usage profiling, is another person saying all they were doing was "showing images". Caching is making my spidey senses tingly.

Full boring list of things you can try/look at

https://github.com/electron/electron/issues/21586

There is an open issue in Electron with a memory leak when opening and closing windows.

Event Emitter Memory Leak in Electron App

There is an example of where code itself was causing a memory leak, but it can also be code related to Electron itself.

Memory leak in BrowserWindow, Electron

There is another example of where code can break it and in this case it's also specific to Electron.

chrome and chromium growing memory usage

There is an example of a memory leak caused in chromium, however I have no idea if that was actually an issue since it was never answered.

How to increase the max memory limit for the app built by electron-builder?

You can try to increase/decrease the memory using max-old-space-size.

Another key consideration

The other most viable thing I found was https://seenaburns.com/debugging-electron-memory-usage/, who eventually came to the conclusion that it had something to do with RSS (and also caching). This person, https://spectrum.chat/electron/general/debugging-high-memory-usage-in-electron~80057ff2-a51c-427f-b6e1-c297d47baf5b, also mentioned it's relative to RSS and I also found an open issue for electron here: https://github.com/electron/electron/issues/25208, which is related to an RSS memory leak.

Final note

Electron will use a ton of memory because it's running a full browser inside a browser/desktop, Chromium, along with running v8 and all of it's own code. Along with that Chromium is already known for high memory usage. So it's relatively normal to see high memory. Along with that if the memory is just bloating, it's an easier issue to solve by pinpointing what's bloating it, which is very likely something like a cache. If it's a memory leak then it could be anything, your own code most likely, but it could also be an official bug in either Electron or Chromium.

If all else fails you could just jump on the https://www.reddit.com/r/programming/comments/7p7s8q/electron_is_cancer/ bandwagon. In my experience things written in Electron are incredibly slow, memory intensive and don't survive in a browser, Discord and Slack being the biggest culprits. I can leave open any apps in my browser for days with no issues but leaving either of those will eventually crash my browser. Zoom is a bit better but that's likely because of them using their own SDKs and only using Electron as an interface while atom is also better than most apps but as one of the top comments on that post points out, they've rewritten some of the core parts in c++. I don't know much about Electron so I have no credible opinion on it, but the apps I use built using Electron always have the same memory issues. I think that Electron is an awesome idea and concept and that the apps have improved a lot over time, so respect to those teams working on it, but I also think it still has a lot of issues to sort out, especially when it comes to memory.

halfer
  • 19,824
  • 17
  • 99
  • 186
3

If anyone comes across this memory leak issue. First, try and remove all console.log to see if it helps.

Mak Suriya Jacobsen
  • 160
  • 3
  • 10
0

For those who are debugging memory issue with electron helper (renderer).

Just one additional thing to your checklist.

  1. Check the amount of ipc listeners on your renderer process. Most these listeners are added once your components are mounted. If your component is unmounted without removing the listeners properly, it could lead to memory leaks.
// run this in dev tool (assuming that you have ipcRenderer APIs exposed to window)
electron.ipcRenderer.eventNames()
    .map(name => ({listeners: electron.ipcRenderer.rawListeners(name), channel: name}))
  1. Remove the listeners properly. Directly using ipcRenderer.removeListener('channel-name', listener) will not work as expected (in my case, electron 22.3.6). A workaround is to return the remove function when you add the listener.
// preload.js
contextBridge.exposeInMainWorld('ipcRenderer', {
    on: (channel, listener) => {
        ipcRenderer.on(channel, listener);
        return () => ipcRenderer.removeListener(channel, listener);
      },
})

A generic solution in react hooks

export const useListener = (channel, listener) => {
  useEffect(() => {
    if (listener) {
      const removeListener = ipcRenderer.on(channel, listener);

      return () => {
        if (removeListener) removeListener();
      };
    }
  }, []);
};

Check this issue for more info.

xzifan
  • 27
  • 5