Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Turn on component debug logs while using app #21532

Closed
MadLittleMods opened this issue Mar 23, 2022 · 1 comment
Closed

Turn on component debug logs while using app #21532

MadLittleMods opened this issue Mar 23, 2022 · 1 comment
Labels
A-Developer-Experience A-Feedback-Reporting Reporting process for bugs, debug logs (rageshakes), suggestions O-Occasional Affects or can be seen by some users regularly or most users rarely S-Minor Impairs non-critical functionality or suitable workarounds exist T-Task Tasks for the team like planning

Comments

@MadLittleMods
Copy link
Contributor

MadLittleMods commented Mar 23, 2022 •
edited

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:
@MadLittleMods MadLittleMods added T-Task Tasks for the team like planning A-Developer-Experience labels Mar 23, 2022
@MadLittleMods MadLittleMods mentioned this issue Mar 23, 2022
Closed
@MadLittleMods MadLittleMods added Z-MadLittleMods Z-Rageshake Has attached rageshake (not for log submission process) and removed Z-Rageshake Has attached rageshake (not for log submission process) labels Mar 23, 2022
@MadLittleMods MadLittleMods mentioned this issue Mar 23, 2022
Open
@MadLittleMods MadLittleMods added the A-Feedback-Reporting Reporting process for bugs, debug logs (rageshakes), suggestions label Mar 23, 2022
@MadLittleMods MadLittleMods added S-Minor Impairs non-critical functionality or suitable workarounds exist O-Occasional Affects or can be seen by some users regularly or most users rarely labels Apr 27, 2022
MadLittleMods added a commit to matrix-org/matrix-react-sdk that referenced this issue May 6, 2022
@MadLittleMods
Add a way to toggle ScrollPanel and TimelinePanel debug logs
c20f77c 
Part of element-hq/element-web#21532

To better debug timeline issues when they crop up.

Turn on:
```js
mxSettingsStore.setValue('debug_scroll_panel', null, 'device', true);
mxSettingsStore.setValue('debug_timeline_panel', null, 'device', true);
```

Turn off:
```js
mxSettingsStore.setValue('debug_scroll_panel', null, 'device', false);
mxSettingsStore.setValue('debug_timeline_panel', null, 'device', false);
```
@MadLittleMods MadLittleMods mentioned this issue May 6, 2022
Merged
MadLittleMods added a commit to matrix-org/matrix-react-sdk that referenced this issue May 6, 2022
@MadLittleMods
Add a way to toggle ScrollPanel and TimelinePanel debug logs (#8513)
46ba142 
Part of element-hq/element-web#21532

To better debug timeline issues when they crop up.

Turn on:
```js
mxSettingsStore.setValue('debug_scroll_panel', null, 'device', true);
mxSettingsStore.setValue('debug_timeline_panel', null, 'device', true);
```

Turn off:
```js
mxSettingsStore.setValue('debug_scroll_panel', null, 'device', false);
mxSettingsStore.setValue('debug_timeline_panel', null, 'device', false);
```
@MadLittleMods MadLittleMods mentioned this issue Jun 2, 2022
Closed
@Johennes
Copy link
Contributor

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.

@Johennes Johennes closed this as not planned Won't fix, can't repro, duplicate, stale Oct 24, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
A-Developer-Experience A-Feedback-Reporting Reporting process for bugs, debug logs (rageshakes), suggestions O-Occasional Affects or can be seen by some users regularly or most users rarely S-Minor Impairs non-critical functionality or suitable workarounds exist T-Task Tasks for the team like planning
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@MadLittleMods @Johennes