Turn on component debug logs while using app

[MadLittleMods]

Your use case

What would you like to do?

In order to better debug a timeline problem when it occurs in the wild (#21531), I want to enable DEBUG_SCROLL in the ScrollPanel.tsx and TimelinePanel.tsx to see what's going on. But this isn't really possible when I'm using and reproducing problems with develop.element.io in production because the variable constant is already hard-coded in the build. I want a way to toggle this after the fact while using the app (whether that be in the browser devtools console or Labs).

This debug log pattern is also used in various components so it would be good to extend our solution to all of the places we want conditional/toggle-able debug logs.

Why would you like to do it?

Get better debug logs to understand what/why went wrong.

How would you like to achieve it?

1. Using debug

One possible solution is to use the debug package where you can selectively enable which debug logs you want to filter and see in the console by regex. We use debug on Gitter and it's very nice to work with to get just the logs from the pieces you're interested in.

ex.

• To show everything: window.localStorage.debug = '*';
• To show just logs from the scroll panel: window.localStorage.debug = 'app:scroll-panel:*';
• To show logs from multiple components: window.localStorage.debug = 'app:scroll-panel:*,app:device-listener:*';
• To disable and stop showing debug logs: window.localStorage.debug = '';

This could even be a string field in the developer settings if we want to prompt people to give us more detailed logs for their next reproduction.

2. Extending logger in matrix-js-sdk

We can write some more custom pieces of logger to accomplish something similar. One problem is that we currently have the default log level set to debug so all of the existing logger.debug(...) already show up in the logs. We want these more in depth logs to not show by default and be able to be toggled on.

Also of interest, matrix-appservice-bridge -> src/components/logging.ts which has namespaced labeled loggers

matrix-bot-sdk -> src/logging/LogService.ts has the concept of mutedModules to filter out logs.

Have you considered any alternatives?

Lots of ways to accomplish!

Additional context

Useful for situations like #21432 (comment)

Related issues:

• Log E2EE data separately from other console logs #19539
• Add prefixes to log messaging #16972

[Johennes]

Assuming it's already possible to do this on local builds, I'd say that is sufficient. I don't believe we really need the ability to do it on any deployed build.