1645325 - Firefox seems to leak memory while developing SPA with hot reloading

Status: RESOLVED DUPLICATE of bug 1682212

(DevTools :: General, defect, P3)

Description

[florian.greinus]

Attachment: memory-report.json.gz

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:77.0) Gecko/20100101 Firefox/77.0

Steps to reproduce:

I'm developing React.JS Single Page Applications on a daily basis and this issue occurred to me for the last couple of weeks (maybe 2-3 months). I've tested this with only one Tab open (the React-Application in development mode). General framework I use is create-react-app, so nothing too special. Uses webpack under the hood and industry-standard-ish technology.

When I change code, the development tooling automatically reloads parts of the application that have been changed.

If this is wanted, i could put work into setting up a local environment of create-react-app that leaks for me. But as I do not use anything super special I don't know if it is necessary.

My system is: MacBook Pro 16" 2019 (32GB Ram) with MacOS 10.15.5 (newest) and Firefox 77.0.1. Extensions I use: 1 Password, DuckduckGO Privacy Essentials, Enhancer for Youtube, Facebook Container, HTTPS Everywhere, React Developer Tools, uBlock Origin.

Thanks for your help and your great work on this fantastic browser!

Actual results:

After a couple of reloads (i usually see noticably high memory usage after about 30 minutes to 1 hour, depending on my code change activity) Firefox increases in memory usage. All time high was about 13 Gigabytes of RAM with 1 Tab open.
Even if i close the development-tab and open a new one the memory usage does not go down significantly. If i close dev tools, Firefox seems to set some memory free, but in my observations only a couple hundreds of MB. Firefox only frees the rest of the RAM if i quit it.

Expected results:

Firefox should not leak memory.

Comment 1

[Peter Magyari (Desktop QA)]

Hi Florian,

Thank you for the report, I will set a component in order to involve the development team in reviewing this issue.

Mike, could you take a look over the memory report attached above?

Thanks!

Comment 2

[Mike Conley (:mconley) (:⚙️)]

Redirecting to mccr8, who is better equipped to meaningfully analyze memory reports.

Comment 3

[Andrew McCreight [:mccr8]]

There are lots of strings in the main process:

5,844.10 MB (100.0%) -- explicit
├──4,127.63 MB (70.63%) -- js-non-window
│ ├──4,099.28 MB (70.14%) -- zones
│ │ ├──4,088.74 MB (69.96%) -- zone(0x116441000)
│ │ │ ├──3,801.48 MB (65.05%) -- strings
│ │ │ │ ├──3,786.84 MB (64.80%) -- malloc-heap
│ │ │ │ │ ├──3,716.98 MB (63.60%) ── two-byte

It also looks like windows are getting leaked in the main process.

We have some existing bugs on file about leaking windows when dev tools are open. It sounds like closing the devtools doesn't free everything, but maybe whatever devtools roots just aren't being cleared?

Comment 4

[BugBot [:suhaib / :marco/ :calixte]]

The severity field is not set for this bug.
:Honza, could you have a look please?

For more information, please visit auto_nag documentation.

Comment 5

[Jan Honza Odvarko [:Honza] (always need-info? me)]

@Florian, thanks for the report!

Could you please provide simple React App/project properly configured, so someone from our team can just simply download it and run locally?
This would make it easy to reproduce it on our machines.

Thanks!

Comment 6

[florian.greinus]

(In reply to Jan Honza Odvarko [:Honza] (always need-info? me) from comment #5)

@Florian, thanks for the report!

Could you please provide simple React App/project properly configured, so someone from our team can just simply download it and run locally?
This would make it easy to reproduce it on our machines.

Thanks!

Hey Jan. Will do that and get back here when i have put something together that leaks on my machine (might take me 1-2 days to find the time).

Thanks!

Comment 7

[Julien Wajsberg [:julienw]]

I think we had the issue with the profiler, that we had to remove live reloading recently.
Here is maybe how this can be reproduced (you need node and yarn installed):

git clone https://github.com/firefox-devtools/profiler
cd profiler
git checkout 92bb9fe4f024dc13d5f4c6e804fcbe48d39ec83f
yarn
yarn start

(This checks out the last commit before disabling the live reloading).

Then connect on http://localhost:4242/public/2b38186f16b0ab99e3c691b2b04869543b40e504/calltree/?globalTrackOrder=0-1&localTrackOrderByPid=4176-1-2-0~6176-0-1~&thread=0&v=4 with Firefox and open the devtools (probably the console especially). I think it's better to load a real profile because more things happen at startup.

(probably optional: reload the page manually once => you'll notice a lot of logs are sent). Possibly interact with the page too.

Then as you change some files, the app will be rebuilt, and then reloaded in Firefox automatically. This happens as soon as you save a file.
Then if you imagine that you can have a few opened tabs to the development server (this is pretty common for us at least), and they all reload, if they all leak several times per minute (every time we save a file, remember), then this can go up pretty quickly.

I don't have the persistent logs, but I still did see this problem before we disabled the live reloading.

Hope this helps!

Comment 8

[florian.greinus]

Here my feedback - sorry that it took so long!

https://github.com/fgreinus/react-spa-firefox-leak. You can just clone it, run npm install (or use yarn, just as you like) and then use yarn start or npm run start. Your browser should open for localhost:3000. Then just go into App.js and change something, save and the browser will automatically reload the SPA according to your changes. This is already the moment where it start's leaking (from what i have seen). Memory report diffs also show that. More often reloads (saves) lead to more memory and bigger size leads to more significant leaks (quite obvious though).

Hope this helps!

Comment 9

[Julian Descottes [:jdescottes]]

Thanks a lot for extracting a hot reload sample app! I'm going to consolidate this with another bug, which deals with all our devtools leaks on reload. But the application will be definitely useful.