Poor frontend performance due to logging, impacting the music player
Steps to reproduce
Do anything in the Funkwhale app that logs text to the browser console. Good examples are starting a playlist, or letting the music queue advance between tracks, because they produce many log lines at once.
To measure the impact of logging text:
- In browser, start performance profiling
- Start playing an album or playlist
- There should be a period of high CPU use here, which prevents the music from playing until it stops.
- When CPU load drops, stop performance profiling
- In performance recording, there should be a noticeable period of high CPU that corresponds to the logged text.
What happens?
Whenever Funkwhale logs text to console using the useLogger
module, it causes the browser to hang. In my browser, when I start a playlist, it produces 8 lines of text in the console, and the music does not start for over 2 seconds. When the music queue advances to the next track, there is also a very long pause, also caused by logging.
All of the CPU load which lags the browser is caused by stacktrace-gps
, a dependency of stacktracke-js
(which is called from here), which useLogger
uses to get the file name, function name, and line number where the log function was called from.
Here is a recorded performance profile, taken from Chrome. Each of the 8 slow tasks correspond to something being logged to console. The time spent logging text adds up to 2 seconds, during which time the music does not start.
When I modified the compiled JavaScript so that useLogger
only exported references to console.log
, there was no lag when starting music, and advancing between tracks in the queue was closer to seamless.
It's also notable that the effect on CPU usage is multiplied when many browser tabs are open to the same Funkwhale instance, because websocket events cause all open tabs to log the same events.
What is expected?
Logging to console shouldn't lag the browser to the point that the music stops.
I would limit the rich logger to development builds.
Context
Funkwhale version(s) affected: 1.4.0
Observed on Firefox 125 and Chrome 123