frontity: Memory Leak issue in regards to SSR

Upon installing frontity locally with:

npx frontity create my-first-frontity-project,
choosing any of the two default themes
Installing dependencies with npm install
starting it with npm run build && npm run serve

It seems as if the node application can’t garbage collect all the memory allocated during requests. It happens naturally when the site is called, but can be seen a bit more clearly when testing with siege, with the following command: timeout 30s siege http://localhost:3000/ The memory spikes up, as expected for a stress test, but then settles on the following values: 279mb -> 330mb -> 381mb -> 430mb, and refuses to go down any further.

I thought it was only the case with my theme, since the docker instance it’s running in would periodically run out of memory - but upon removing all prefetching for SSR, it stopped, and it also seems to be happening with the default themes.

For better local testing, I’ve also tried it with this (added to the package.json) "inspect": "frontity build && node --inspect ./node_modules/frontity/dist/src/cli/index.js serve", which enables me to use the nodejs debugger in chromium, but I can’t really make sense of the memory dumps there, except that they steadily increase in size.

Locally, I’m running:

System:

OS: Linux 5.4 Ubuntu 20.04.3 LTS (Focal Fossa)
CPU: (4) x64 Intel® Core™ i5-2540M CPU @ 2.60GHz
Memory: 562.04 MB / 11.48 GB
Shell: 5.8 - /bin/zsh

Binaries:

Node: 16.11.1 - ~/.nvm/versions/node/v16.11.1/bin/node
npm: 8.0.0 - ~/.nvm/versions/node/v16.11.1/bin/npm

Browsers:

Chrome: Not Found
Firefox: 96.0

npmPackages:

@frontity/core: ^1.14.3 => 1.14.3
@frontity/html2react: ^1.7.0 => 1.7.0
@frontity/tiny-router: ^1.4.4 => 1.4.4
@frontity/twentytwenty-theme: ./packages/twentytwenty-theme => 1.3.3
@frontity/wp-source: ^1.11.7 => 1.11.7
frontity: ^1.17.1 => 1.17.1

npmGlobalPackages:

frontity: Not Found
npx: Not Found

I’ve tried searching the forums, but the closest thing I’ve found was this: https://community.frontity.org/t/npx-frontity-dev-aborted-core-dumped-javascript-heap-out-of-memory/1321/9 But that seems like a slightly different problem.

Thank you for your time - and thank you for Frontity, it’s been a joy to develop on so far!

About this issue

Original URL
State: open
Created 2 years ago
Comments: 16 (7 by maintainers)

Most upvoted comments

Hello @luisherranz, it’s been a while, but I’ve got some more specific news this time: Okay, so we’ve figured out our problem to an extent, but don’t have a real solution yet. It’s the menus fault Since we’ve stopped fetching our menu in the beforeSSR hook, our Server’s been running smoothly, without leaking. Of course now we have the problem that the menu isn’t here on page load, which is pretty bad for SEO, and it still blinks into existence, which isn’t all too pretty either.

I’ve put together a small example in the test repo https://github.com/Bananicorn/frontity-memory-leaking-theme, just taking the minimal code from the official examples to fetch a menu from wordpress and display it.

Steps to reproduce:

Clone repo
npm ci
Set up an empty wordpress instance with the menu rest api plugin installed
Create a menu and assign it to the menu location “menu”, preferably with a good handful of links so the leak shows faster
Add .env file containing the link to the test-server, like this FRONTITY_SOURCE_URL=https://test.frontity.org
Start frontend with npm run inspect
Open chrome’s chrome://inspect and choose the remote target
Open a bunch of tabs (30-ish) and refresh them a few times
In the chrome inspector-window for the node process, you should be able to see a clear trend after a few cycles of refreshing and making a few heap snapshots

Bananicorn on May 11, 2022

Oh, I guess you can create a minimal theme then. Something like:

const Root = () => (
  <div>Empty theme</div>
);

const EmptyTheme = {
  name: "empty-theme",
  roots: {
    theme: Root,
  },
};

export default EmptyTheme;

luisherranz on Feb 14, 2022