[HOLD for payment 2024-06-28] [$250] [MEDIUM] Debugability: Add a keyboard shortcut to open "four finger tap" debug screen on desktop

[muttmuure]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

What performance issue do we need to solve?

e.g. memory consumption, storage read/write times, React native bridge concerns, inefficient React component rendering, etc.

When debugging mobile when you are attempting to retrieve client-side logs, you can isolate the logs with the highest context and least noise by using the four-finger tap gesture and enabling at the very moment you need to.

There is no such method of isolating these logs immediately on web and desktop, which means to gather important logs you need to navigate to the Troubleshoot menu and add a bunch of noise and by navigating through the stack add another command which resolves the problematic command you wanted to debug in the first place.

What is the impact of this on end-users?

List specific user experiences that will be improved by solving this problem e.g. app boot time, time to for some interaction to complete, etc.

This will allow our internal team to debug web issues with the same precision and reliability as mobile.

List any benchmarks that show the severity of the issue

Please also provide exact steps taken to collect metrics above if any so we can independently verify the results.

N/A

Proposed solution (if any)

Please list out the steps you think we should take to solve this issue.

Add a keyboard shortcut that opens the debug page like we have on mobile:

List any benchmarks after implementing the changes to show impacts of the proposed solution (if any)

Note: These should be the same as the benchmarks collected before any changes.

Platforms:

Which of our officially supported platforms is this issue occurring on?

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Version Number:
Reproducible in staging?:
Reproducible in production?:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos: Any additional supporting documentation
Expensify/Expensify Issue URL:
Issue reported by:
Slack conversation:

View all open jobs on Upwork

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01b24a23b8f2770a3b
• Upwork Job ID: 1800150825662395255
• Last Price Increase: 2024-06-10
• Automatic offers:
• dominictb | Contributor | 102685139

Issue Owner

Current Issue Owner: @jayeshmangwani

[melvin-bot]

Auto-assigning issues to engineers is no longer supported. If you think this issue should receive engineering attention, please raise it in #whatsnext.

[muttmuure]

Only client side logging is currently supported on web and desktop natively right now, so the menu options should reflect that.

[dominictb]

Proposal

Please re-state the problem that we are trying to solve in this issue.

• Add a keyboard shortcut to open "four finger tap" debug screen on desktop

What is the root cause of that problem?

• New feature

What changes do you think we should make in order to solve the problem?

• We can define a new CONST.KEYBOARD_SHORTCUTS:

DEBUG: {
            descriptionKey: 'openDebug',
            shortcutKey: 'U',
            modifiers: ['CTRL'],
            trigger: {
                DEFAULT: {input: 'u', modifierFlags: keyModifierControl},
                [PLATFORM_OS_MACOS]: {input: 'u', modifierFlags: keyModifierCommand},
                [PLATFORM_IOS]: {input: 'u', modifierFlags: keyModifierCommand},
            },
        },

• In AuthScreens (or in AppNavigator if we want all users can use it feature), we can add the event listener to the above shortcut in this line:

 const unsubscribeDebugShortcut = KeyboardShortcut.subscribe(
            debugShortcutConfig.shortcutKey,
            () => {
                toggleTestToolsModal();
            },
            debugShortcutConfig.descriptionKey,
            debugShortcutConfig.modifiers,
            true,
        );

• We also need to modify the menu to match this requirement "Only client side logging is currently supported on web and desktop natively right now, so the menu options should reflect that.".
• The UI of the debug modal can be modified to fit the desktop screen, it is based on design team.

What alternative solutions did you explore? (Optional)

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~01b24a23b8f2770a3b

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @jayeshmangwani (External)

[jayeshmangwani]

Overall @dominictb's Proposal looks good to me. We can move forward with it and Disabling the Client side logging option for platforms other than web and desktop can be discussed in the PR.

@muttmuure What shortcut key should we use for opening the debug screen? CMD + D?

🎀 👀 🎀 C+ reviewed

[melvin-bot]

Triggered auto assignment to @Julesssss, see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[Julesssss]

CMD + D seems good 👍

[melvin-bot]

📣 @dominictb 🎉 An offer has been automatically sent to your Upwork account for the Contributor role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job
Please accept the offer and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Keep in mind: Code of Conduct | Contributing 📖

[Julesssss]

@dominictb as one additional change, could you add the shortcut to the Keyboard shortcut list under Settings > About. Thanks

[jayeshmangwani]

could you add the shortcut to the Keyboard shortcut list under Settings > About. Thanks

The new debug shortcut will be displayed on the KeyboardShortcutsPage. As short cut data comes from the CONST.KEYBOARD_SHORTCUTS and we will define the new debug shortcutKey under KEYBOARD_SHORTCUTS

[Julesssss]

Oh nice

[LLPeckham]

Got it, that's v helpful, thanks! Yeah we could either do Open testing preferences or if you want to include dialog like the other lines have - would it make sense to say, Open testing preferences dialog ?

[Julesssss]

Thanks. Agree that 'Open testing preferences dialog' aligns better with the other option.

[melvin-bot]

⚠️ Looks like this issue was linked to a Deploy Blocker here

If you are the assigned CME please investigate whether the linked PR caused a regression and leave a comment with the results.

If a regression has occurred and you are the assigned CM follow the instructions here.

If this regression could have been avoided please consider also proposing a recommendation to the PR checklist so that we can avoid it in the future.

[melvin-bot]

⚠️ Looks like this issue was linked to a Deploy Blocker here

If you are the assigned CME please investigate whether the linked PR caused a regression and leave a comment with the results.

If a regression has occurred and you are the assigned CM follow the instructions here.

If this regression could have been avoided please consider also proposing a recommendation to the PR checklist so that we can avoid it in the future.

[melvin-bot]

Reviewing label has been removed, please complete the "BugZero Checklist".

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 1.4.85-7 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• feat: add shortcut to open troubleshoot modal #43543

If no regressions arise, payment will be issued on 2024-06-28. 🎊

For reference, here are some details about the assignees on this issue:

• @jayeshmangwani requires payment through NewDot Manual Requests
• @dominictb requires payment automatic offer (Contributor)

[jayeshmangwani]

• [@jayeshmangwani] The PR that introduced the bug has been identified. Link to the PR: This is feature enhancement for the Debugability
• [@jayeshmangwani] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment: This is feature enhancement for the Debugability
• [@jayeshmangwani] A discussion in #expensify-bugs has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner. Link to discussion: This is a feature enhancement for Debugability. A regression test will be enough.
• [@jayeshmangwani] Determine if we should create a regression test for this bug. Yes
• [@jayeshmangwani] If we decide to create a regression test for the bug, please propose the regression test steps to ensure the same bug will not reach production again.

Regression Test Proposal

1. Open web/desktop app and press CTRL/CMD + D
2. Verify that the troubleshooting modal shown up

Do we agree 👍 or 👎

[melvin-bot]

Issue is ready for payment but no BZ is assigned. @kevinksullivan you are the lucky winner! Please verify the payment summary looks correct and complete the checklist. Thanks!

[melvin-bot]

@LLPeckham, @Julesssss, @kevinksullivan, @jayeshmangwani, @dominictb Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[kevinksullivan]

Summary:

• @jayeshmangwani $250 (NewDot)
• @dominictb $250

[jayeshmangwani]

Requested $250 on NewDot

[JmillsExpensify]

$250 approved for @jayeshmangwani