App: [Regression test required] [$500] HIGH: Add `Avatar > About > Troubleshooting` section

Here’s my take on the console screen. A few notes:

• Log takes up remaining part of the screen as you see with the keyboard shrinking the viewport.
• Sharing log takes you to a search screen

Keen on @Expensify/design thoughts

Oh interesting, I happened several times yesterday, and according to the logs it wasn’t coming from a local environment. I will report again if the alert pops up again, thanks!

Both Troubleshooting page and Debug console page are merged now 🎉 However they are currently displayed in an RHP, wondering if they should follow the new design and be displayed in full screen navigator? Could we get an input from someone from design team? cc @fedirjh @techievivek

100% with you on Mono font. I thought about it but was unsure if we even had access to it in the app. So glad you brought this up ❤️ Updated mocks with mono font:

Works nicely, thank you! 👍

Please submit proposals, especially for how you intend to do the console feature. The more detail you provide, the greater likelihood we select your proposal.

On Sun, Jan 7, 2024, 7:57 PM Antony Kithinzi @.***> wrote:

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

Some problems can’t be diagnosed cleanly after the fact from the logs, for a few reasons What is the root cause of that problem?

The settings page is not optimal for diagnosing. What changes do you think we should make in order to solve the problem?

Add a new page in settings called Test preferences. Then move the necessary components to the new page. Create a menu item on the settings menu for the page.

Then add another item in Test preferences page called Reset and refresh. This option will clear the onyx collection except for the auth data. Finally, it will refresh the page.

— Reply to this email directly, view it on GitHub https://github.com/Expensify/App/issues/34082#issuecomment-1880353158, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAEMNUQ4EYCWKZ7HZ4VAK63YNNVEDAVCNFSM6AAAAABBQ2U4NSVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTQOBQGM2TGMJVHA . You are receiving this because you authored the thread.Message ID: @.***>

Regression Test Proposal

Test 1 :

1. Go to Profile -> About
2. Verify "Troubleshoot" is available in the menu
3. Go to Troubleshoot
4. Verify "Test preferences" section is visible
5. Press "Reset and refresh"
6. Confirm the modal
7. Go back to home screen
8. Verify list of chats is visible
9. If you are on the home screen and the list is not visible yet, wait a moment until it's available (it means data is still loading)

Test 2 :

1. Go to Profile -> About -> Troubleshoot
2. Verify "Client side logging" is disabled
3. Enable "Client side logging"
4. Verify "View debug console" option appears
5. Press "View debug console"
6. Verify Debug console screen is open and logs are displayed in a console in real-time
7. Type 5+5 in the input below the console and press "Execute"
8. Verify 10 was displayed in a console
9. Press "Save log"
10. Verify file is downloaded to a device
11. Press "Share log"
12. Verify you are navigated to the search page
13. Press on any report
14. Verify you are moved to the report and logs are sent as an attachment

• Do we agree 👍 or 👎

Ahh yes. How quickly I forget. Thanks 😂

if they are on a bad connection, we might end up making the App unusable for them.

@techievivek Yes, that’s a possibility too. In such a case, should we consider logging out the user?

Should the button just be disabled when in offline mode? Or maybe should it display an alert with a message?

Displaying an alert seems friendlier. I’m curious about the @Expensify/design team’s thoughts on this.

@fedirjh

cc @quinthar What is the expected behavior for this feature in offline mode? Wiping the data may result in the app becoming unusable in offline mode. Should we consider enabling this option exclusively for online users, or is logging out the user in offline mode a more suitable approach?

Given that the app will become unusable, I think we can enable this option only for online users. Otherwise, if they are on a bad connection, we might end up making the App unusable for them.

Today I was able to implement sharing txt file with users on iOS:

https://github.com/Expensify/App/assets/13985840/6ee12393-46be-4132-a2c0-0b9e62e99b61

I still have to do some debugging on Android, as i am getting “Unexpected error” when trying to upload a file. Still need to work on Web/desktop implementation as I cannot use a filesystem there, trying to figure out how to achieve the same result with Blob

I have also added a flag in Onyx that determines if the logs should be collected. By default it’s false, and it’s set to true when user opens up the Debug console for the first time. Happy to discuss more improvements in this area, as we have to make sure the file does not exceed 24mbs.

@techievivek

Can we not have a job in the background that could wipe the logs at regular intervals?

Discussed it lately here, however it’s hard to decide what interval should we take here. My main concern is: the longer interval, the bigger possibility we could excess the 24 mb limit of the attachment file.

Recently I discovered logs are being sent to the server (via Logger from expensify-common package) and I am wondering if we could access those logs so we could avoid keeping the historic data on the device.

@shawnborton @dannymcclain @dubielzyk-expensify button styles updated ✅ once we have it merged this style will apply globally

Yep, what Shawn and Danny said. Also worth mentioning that the logs area is the only area that should scale:

It should always be center-aligned as far as I know… cc @Expensify/design for additional thoughts though.

Definitely. Those buttons should look like Jon’s mock.

It should always be center-aligned as far as I know… cc @Expensify/design for additional thoughts though.

Curious what @quinthar thinks about your questions, I’m not too sure how to answer them.

OMG YES DO IT!

Look great! Hear me out, would the console be a good spot to bring in Expensify Mono?? Just ignore if you think it’s unnecessary—you know me, always trying to find uses for ExMono 🙃

sounds great to me @LLPeckham 👍 Thank you!

For sure I can help

wiping the data basically means clearing all the Onyx data except those keys that are needed to run the app as a freshly logged-in user. There are some keys that could affect the user account, e.g. any draft messages would be gone.

Got it, thanks for clarifying. I could see where a small alert dialog would work in that case, which exists as an existing pattern (for instance, try to delete an outstanding money request and you will see the confirmation modal). Curious if @quinthar agrees though!

You can see the currently implemented behavior on both web and mobile here:

Got it. I think this is fine, especially if we have the confirmation modal.

I’m talking about “View console” feature mentioned in the https://github.com/Expensify/App/issues/34082#issue-2069570061. I assume it would look and work pretty similar to the console known from web browsers e.g. Chrome. Would be great if we could figure out how to implement this view in the app

I’m not entirely sure what the intention is behind this feature, so would love for @quinthar to chime in on this one too. Are you thinking we would display our own custom view of a console, or just launch the existing browser console, or something else?

Yeah. Lightbulb is cute. Dig it!

Thanks for finding it, here’s a version with a lightbulb:

Unsure exactly what the console view looks like, but here’s my take on how we could design the page. cc @Expensify/design

Quick update from my side:

• created Troubleshooting page and linked it with routing
• created “Reset and refresh” and “View console” menu items
• moved “Test preferences” section to “Troubleshooting” screen
• created basic implementation for “Reset and refresh”, it works most of the times but I’m still figuring out what exact Onyx keys should be preserved from cleanining.

Do we have any design for the new page? If we want to follow the design of other pages, what i need to know is:

• icon to use with “Troubleshooting” menu item
• lottie illustration to use in the page header
• icon for “Reset and refresh” menu item
• icon for “View console” menu item
• design for console view (?)