High CPU usage

[schickling]

This issue pertains to:

• [ ] GraphQL Playground - Electron App
• [x] GraphQL Playground
• [x] GraphQL Playground Middleware

What OS and OS version are you experiencing the issue(s) on?

MacOS High Sierra

What version of graphql-playground(-electron/-middleware) are you experience the issue(s) on?

v1.3.6 (web)

What is the expected behavior?

The Playground should be friendly to my CPU 🤔

What is the actual behavior?

In some scenarios the CPU goes all crazy (sometimes above 80%). I couldn't exactly pin it down to a specific reproducible case but it's happening quite frequently. I suspect the Playground is "trapped" in some kind of infinite loop.

What steps may we take to reproduce the behavior?

Unfortunately I couldn't yet find a clear way to reproduce it. Would be great if other people can add more information!

Update:

I suspect it has something to do with errors (for example when the server returns an error)

[vincenzo]

I confirm this issue.

[marktani]

To me this happened when I was running a query that was returning a lot of data.

Can everyone share some information when it happened to them? 🙂 This might help pinning down the problem.

[marktani]

This is one potential cause: https://github.com/graphcool/graphql-playground/issues/356.

[schickling]

@marktani the high CPU only occurs with the HTTP middleware. #356 seems to be related to the Electron app

[vincenzo]

@schickling It happens for me (express middleware).

[huv1k]

Can everybody share at least little bit info how to get to this state, because i tried to reproduce it and no luck.

[marktani]

So far I have not been able to reliably reproduce this. Some potential causes

• many Playgrounds are open (many browser tabs)
• many Playground tabs are open
• working with big schemas
• working with big data
• when queries run into an error

[vincenzo]

The times I’ve seen it happening I had one or two (max) playgrounds open; I had a few tabs open; some queries may have errored a few times before getting it right. Small schema.

[kambing86]

having this issue as well in v1.4.3 Mac version,

at the workplace selection screen, the GraphQL Playground helper is constantly at >20% cpu usage after opening the workplace, cpu usage raised to ~60% after opening schema, my 2015 Macbook Pro started spinning up the fan, cpu usage raised to ~100%

don't blame on electron, I'm using a lot of electron apps like VSCode and GitKraken, all work just fine I highly suspect that someone sneaked in some codes to do mining

[huv1k]

@kambing86 No there is no mining you can see it in network tab..

[vincenzo]

Right, I might have an additional insight on this. I am developing a GraphQL server with graphl-yoga, so naturally I am using Playground. Locally, I run this server via Lando, so in Docker containers. When Playground goes and uses the CPU at 200+% (it really happened), so does Docker.

I haven't yet checked network traffic etc., to see what's actually going between the two, if anything...

[emibloque]

Hi! Beforehand, thanks for this awesome project!

I'm having this issue too, with the electron app. The CPU usage raises only when the app window is visible. I removed locally all the CSS animations and the usage (showing the New Workspace window) dropped from ~30% to ~2%. Removing only the SVG that shows when the application is loading makes a difference on the usage.

I don't have context on the project, but I think this could be one of the main issues.

[huv1k]

Yea, i was digging little bit inside and playground is rendering like crazy, even that you are not doing anything. You can see it in performance graph:

[timsuchanek]

Thanks for the insights everyone! We're working on the playground performance and will probably have a new release this or next week with some improvements :)

[vincenzo]

I can definitely replicate what I wrote in my last comment: as soon as I open PG in Chrome and run a query, the Docker container running the server starts eating 160+% of CPU, and so does PG. If I do what @emibloque said, and just switch tab, the Chrome's CPU usage halves, but the Docker container's one remains the same. The only way to calm the storm is to close the tab where PG is running.

[atitoa93]

This issue happens to me as well. OS: macOS High Sierra Chrome: Version 64.0.3282.167 (Official Build) (64-bit) Middleware: graphql-yoga

Every time I open the playground the CPU start increasing whatever the size of the schema.

[vincenzo]

Any news on this, @timsuchanek? This is starting to become a serious issue for me, as it also affects the docker container where Yoga is running, and the machine starts struggling under the excessive CPU usage.

[mirkonasato]

Noticed the same issue on macOS High Sierra after creating a very simple server with graphql-yoga: shortly after I open the Playground in the latest Chrome my laptop fan starts running. Same thing with the Electron version. Interestingly it doesn't happen with the version hosted at graphqlbin.com.

[huv1k]

I think i figured out what is problem, i will try to make fix for it 👍 Yea i got it playground cpu usage varies with number of rendered editors so we can just render active editor to reduce cpu usage :)

[timsuchanek]

@Huvik I'm working on a fix for that, which is also including reducing the number of editors. So no need from your side to work on that :)

[nickluger]

Fans start spinning as soon as i open playground in Chrome, (Version 64.0.3282.186) Mac OS High Sierra(10.13.3) Slow down after a while but, can spike out of a sudden. Have many extensions but happens in incognito mode, too.

[kambing86]

any update on this? seems like the recent release still suffering, any insight so that we can help to figure out and solve this?

[blackxored]

This also happens on the Electron app for me.

[wereHamster]

There are many elements on the webpage which are animated using CSS animations, even though they are not visible. For example the loading indicator (which is completely covered by the playground and not visible at all, yet continues to play the animation), or the rotating circle inside the URL input box. This causes the browser to continuously repaint large parts of the screen. If you look at the performance inspector, you'll see that no JS is being executed, yet rendering (purple color in the chrome dev tools) eats up almost 100% of the CPU time. If you remove all CSS from the webpage, the CPU usage drops to zero.

[wereHamster]

Actually, the loading indicator and the invisible rotating circle inside the URL input box are the only two elements which cause the high CPU usage.

[joshhopkins]

Still experiencing very poor performance with latest version on MacOS High Sierra.

[timsuchanek]

Thanks for that breakdown @wereHamster ! I'm right now looking into and will soon have a new release ready where this should be fixed

[timsuchanek]

Thanks for the patience, everybody! I just released a new playground version that should fix these performance issues! Please let me know if you still have a high cpu usage :) It's released in the Electron App in version 1.4.5 and in the react app (graphql-playground-react) in version 1.4.7

[schickling]

[kambing86]

the loading icon is the root cause of the performance issue? https://github.com/graphcool/graphql-playground/commit/a5a59707e59dee92576ce91b213f8655bce28b2a

so it seems like the issue went away after this commit, but if I fired a request which took like few seconds, and returns a big and long json, then it became unresponsive and high cpu usage again

to be honest, I'm using another one as my daily driver, and built using old version of electron, but it's butter smooth

https://github.com/andev-software/graphql-ide

I like graphql-playground for the theme, but sorry it's not usable at all