feat: access client side logging from Test Tools Modal by TMisiukiewicz · Pull Request #38803 · Expensify/App

TMisiukiewicz · 2024-03-22T12:25:08Z

Details

Fixed Issues

$ #38456
PROPOSAL:

Tests

iOS/Android:

Open dev menu and select "Open Test Preferences"

iOS Web/Android Web

Use physical device and use four-finger tap or switch isVisible={!!isTestToolsModalOpen} to isVisible in src/components/TestToolsModal.tsx

Enable "Client side logging"
Wait a while and disable "Client side logging"

iOS/Android
3. Verify path of the file is visible
4. Press "Share" and verify sharing modal appeared
5. Go to the Files on the device and verify it was saved

iOS Web/Android Web
3. Verify file was downloaded on the device

All platforms - access from Troubleshoot page

Go to Profile -> About -> Troubleshoot
Enable Client Side Logging
Disable Client Side Logging

iOS/Android
4. Verify the filepath is displayed and Share button is visible
5. Press "Share" and verify the Share menu is visible

Other platforms
4. Verify file was downloaded to the device

Verify that no errors appear in the JS console

Offline tests

QA Steps

Open the app
Tap any area of the app with four fingers simultaneously.
Verify "Client side logging" is available
Enable Client Side logging
Disable Client Side logging

iOS/Android
8. Verify path of the file is visible
9. Press "Share" and verify sharing modal appeared
10. Go to the Files on the device and verify it was saved

iOS Web/Android Web
6. Verify file was downloaded on the device

All platforms - access from Troubleshoot page

Go to Profile -> About -> Troubleshoot
Enable Client Side Logging
Disable Client Side Logging

iOS/Android
4. Verify the filepath is displayed and Share button is visible
5. Press "Share" and verify the Share menu is visible

Other platforms
4. Verify file was downloaded to the device

Verify that no errors appear in the JS console

PR Author Checklist

Screenshots/Videos

Android: Native

ANDROID.mp4

Android: mWeb Chrome

ANDROID_WEB.mov

iOS: Native

IOS.mov

iOS: mWeb Safari

IOS-WEB.mov

MacOS: Chrome / Safari

Screen.Recording.2024-03-26.at.12.38.17.mov

MacOS: Desktop

Screen.Recording.2024-03-26.at.12.40.08.mov

melvin-bot · 2024-03-22T14:18:40Z

@s77rt Please copy/paste the Reviewer Checklist from here into a new comment on this PR and complete it. If you have the K2 extension, you can simply click: [this button]

adhorodyski · 2024-03-22T14:47:39Z

src/components/ClientSideLoggingToolMenu/index.native.tsx

+        if (!shouldStoreLogs) {
+            Console.setShouldStoreLogs(true);
+        } else {
+            if (capturedLogs) {


these could be simplified with early returns on all the edge cases (like no logs captured)

s77rt · 2024-03-23T17:22:50Z

src/pages/settings/AboutPage/TroubleshootPage.tsx

                    <Switch
                        accessibilityLabel="Client side logging"
                        isOn={!!shouldStoreLogs}
-                        onToggle={() => (shouldStoreLogs ? Console.disableLoggingAndFlushLogs() : Console.setShouldStoreLogs(true))}
+                        onToggle={onToggleClientSideLogging}


Use <ClientSideLoggingToolMenu />

s77rt · 2024-03-23T17:31:15Z

src/components/ClientSideLoggingToolMenu/index.tsx

+export default withOnyx<ClientSideLoggingToolProps, ClientSideLoggingToolMenuOnyxProps>({
+    capturedLogs: {
+        key: ONYXKEYS.LOGS,
+    },
+    shouldStoreLogs: {
+        key: ONYXKEYS.SHOULD_STORE_LOGS,
+    },
+})(ClientSideLoggingToolMenu);


We don't need to subscribe to onyx keys twice. Only subscribe in BaseClientSideLoggingToolMenu and pass the required values through the props. (or the other way around)

thanks, now i am subscribing to Onyx only in ClientSideLogginToolMenu and passing it down to base component

Due to recent change I see no use in subscribing in ClientSideLogginToolMenu. Let's subscribe in the base component instead

s77rt · 2024-03-23T17:32:03Z

src/components/ClientSideLoggingToolMenu/index.native.tsx

+                const logs = Object.values(capturedLogs as Log[]);
+                const logsWithParsedMessages = parseStringifyMessages(logs);
+                localFileCreate('logs', JSON.stringify(logsWithParsedMessages, null, 2)).then((localFile) => {
+                    if (getOperatingSystem() === CONST.OS.ANDROID) {


Avoid platform specific code. Instead write a index.android.tsx file

s77rt · 2024-03-23T17:41:39Z

src/components/ClientSideLoggingToolMenu/types.ts

+import type {OnyxEntry} from 'react-native-onyx';
+import type {Log} from '@libs/Console';
+
+type CapturedLogs = Record<number, Log>;


In ONYXKEYS please use that type

Change

[ONYXKEYS.LOGS]: Record<number, OnyxTypes.Log>;

to:

[ONYXKEYS.LOGS]: OnyxTypes.CapturedLogs;

s77rt · 2024-03-23T17:53:51Z

src/components/ClientSideLoggingToolMenu/index.tsx

+                Console.disableLoggingAndFlushLogs();
+                return;
+            }
+            const logs = Object.values(capturedLogs as Log[]);


Suggested change

const logs = Object.values(capturedLogs as Log[]);

const logs = Object.values(capturedLogs);

s77rt · 2024-03-23T18:09:26Z

src/components/ClientSideLoggingToolMenu/BaseClientSideLoggingToolMenu.tsx

+                        <Button
+                            small
+                            text="Share"
+                            onPress={onShareLogs}


Pass file as a param in onShareLogs

Or better remove the onShareLogs prop and let the button always call Share.open

this has to be platform-specific, as there is no share option for web/desktop

Let's pass the file prop through onShareLogs for now

Actually there is no benefit in doing this.

…p-logging

TMisiukiewicz · 2024-03-25T09:08:51Z

@s77rt thanks for your review, I have addressed all of your comments

s77rt · 2024-03-25T13:12:34Z

src/components/ClientSideLoggingToolMenu/index.tsx

+function ClientSideLoggingToolMenu({capturedLogs, shouldStoreLogs}: ClientSideLoggingToolProps) {
+    const onToggle = (logs: Log[]) => {
+        localFileDownload('logs', JSON.stringify(logs, null, 2));
+        Console.disableLoggingAndFlushLogs();


Move this line to BaseClientSideLoggingToolMenu.onToggle

s77rt · 2024-03-25T13:23:20Z

src/libs/Console/index.ts

+ * @param logs Logs captured on the current device
+ * @returns CapturedLogs with parsed messages
+ */
+const parseStringifyMessages = (logs: Log[]) => {


Suggested change

const parseStringifyMessages = (logs: Log[]) => {

function parseStringifyMessages(logs: Log[]): Log[] {

s77rt · 2024-03-25T13:26:44Z

src/components/ClientSideLoggingToolMenu/index.tsx

+export default withOnyx<ClientSideLoggingToolProps, ClientSideLoggingToolMenuOnyxProps>({
+    capturedLogs: {
+        key: ONYXKEYS.LOGS,
+    },
+    shouldStoreLogs: {
+        key: ONYXKEYS.SHOULD_STORE_LOGS,
+    },
+})(ClientSideLoggingToolMenu);


Due to recent change I see no use in subscribing in ClientSideLogginToolMenu. Let's subscribe in the base component instead

s77rt · 2024-03-25T14:06:20Z

src/components/ClientSideLoggingToolMenu/types.ts

+import type {OnyxEntry} from 'react-native-onyx';
+import type {Log} from '@libs/Console';
+
+type CapturedLogs = Record<number, Log>;


Change

[ONYXKEYS.LOGS]: Record<number, OnyxTypes.Log>;

to:

[ONYXKEYS.LOGS]: OnyxTypes.CapturedLogs;

s77rt · 2024-03-25T14:08:26Z

src/components/ClientSideLoggingToolMenu/index.android.tsx

+            RNFetchBlob.MediaCollection.copyToMediaStore(
+                {
+                    name: localFile.newFileName,
+                    parentFolder: '',
+                    mimeType: 'text/plain',
+                },
+                'Download',
+                localFile.path,
+            );


Is there a reason to copy the files to the media store?

yes, on Android it is required to copy the file to media store to make it available in the public download directory

hi @TMisiukiewicz was there a reason to first save the file in RNFetchBlob.fs.dirs.DocumentDir and then copy in downloads, Can we save it directly in DownloadDir, is there a catch I am missing ?

s77rt · 2024-03-25T14:17:26Z

src/components/ClientSideLoggingToolMenu/BaseClientSideLoggingToolMenu.tsx

+                        <Button
+                            small
+                            text="Share"
+                            onPress={onShareLogs}


Let's pass the file prop through onShareLogs for now

s77rt · 2024-03-25T14:18:37Z

Not sure I can test on Android. It does not seem to be working (file not being saved?)

Screen.Recording.2024-03-25.at.3.03.12.PM.mov

s77rt · 2024-03-25T14:19:24Z

On toggle on I think we need to hide the previous path and share buttons

Screen.Recording.2024-03-25.at.3.00.58.PM.mov

s77rt · 2024-03-25T14:20:08Z

Pressing Share causes the illustration to disappear

Screen.Recording.2024-03-25.at.2.42.38.PM.mov

s77rt · 2024-03-25T14:22:33Z

I'm not sure if this design is pre-approved, the spacing looks like they can be improved cc @Expensify/design

shawnborton · 2024-03-25T14:24:22Z

Spacing of what exactly? Looks pretty good to me personally.

s77rt · 2024-03-25T15:04:13Z

@shawnborton The path (in muted text) and the Logs menu item

shawnborton · 2024-03-25T15:11:43Z

Got it - yeah, I think it works.

quinthar · 2024-03-26T06:48:33Z

Who is this waiting on -- @s77rt ? what is the next step and when will it happen?

TMisiukiewicz · 2024-03-26T10:44:13Z

@TMisiukiewicz Can you please address this too #38803 (comment)

@s77rt could you elaborate more on that? because I'm not sure I understand what exactly needs to be done, do you want to use both file prop and pass file through onShareLog param?

s77rt · 2024-03-26T10:58:19Z

@TMisiukiewicz Can you please unify the testing steps? I think this is testable on all platforms

s77rt · 2024-03-26T11:13:34Z

Reviewer Checklist

I have verified the author checklist is complete (all boxes are checked off).
I verified the correct issue is linked in the ### Fixed Issues section above
I verified testing steps are clear and they cover the changes made in this PR
- I verified the steps for local testing are in the Tests section
- I verified the steps for Staging and/or Production testing are in the QA steps section
- I verified the steps cover any possible failure scenarios (i.e. verify an input displays the correct error message if the entered data is not correct)
- I turned off my network connection and tested it while offline to ensure it matches the expected behavior (i.e. verify the default avatar icon is displayed if app is offline)
I checked that screenshots or videos are included for tests on all platforms
I included screenshots or videos for tests on all platforms
I verified tests pass on all platforms & I tested again on:
- Android: Native
- Android: mWeb Chrome
- iOS: Native
- iOS: mWeb Safari
- MacOS: Chrome / Safari
- MacOS: Desktop
If there are any errors in the console that are unrelated to this PR, I either fixed them (preferred) or linked to where I reported them in Slack
I verified proper code patterns were followed (see Reviewing the code)
- I verified that any callback methods that were added or modified are named for what the method does and never what callback they handle (i.e. toggleReport and not onIconClick).
- I verified that the left part of a conditional rendering a React component is a boolean and NOT a string, e.g. myBool && <MyComponent />.
- I verified that comments were added to code that is not self explanatory
- I verified that any new or modified comments were clear, correct English, and explained "why" the code was doing something instead of only explaining "what" the code was doing.
- I verified any copy / text shown in the product is localized by adding it to src/languages/* files and using the translation method
- I verified all numbers, amounts, dates and phone numbers shown in the product are using the localization methods
- I verified any copy / text that was added to the app is grammatically correct in English. It adheres to proper capitalization guidelines (note: only the first word of header/labels should be capitalized), and is either coming verbatim from figma or has been approved by marketing (in order to get marketing approval, ask the Bug Zero team member to add the Waiting for copy label to the issue)
- I verified proper file naming conventions were followed for any new files or renamed files. All non-platform specific files are named after what they export and are not named "index.js". All platform-specific files are named for the platform the code supports as outlined in the README.
- I verified the JSDocs style guidelines (in STYLE.md) were followed
If a new code pattern is added I verified it was agreed to be used by multiple Expensify engineers
I verified that this PR follows the guidelines as stated in the Review Guidelines
I verified other components that can be impacted by these changes have been tested, and I retested again (i.e. if the PR modifies a shared library or component like Avatar, I verified the components using Avatar have been tested & I retested again)
I verified all code is DRY (the PR doesn't include any logic written more than once, with the exception of tests)
I verified any variables that can be defined as constants (ie. in CONST.js or at the top of the file that uses the constant) are defined as such
If a new component is created I verified that:
- A similar component doesn't exist in the codebase
- All props are defined accurately and each prop has a /** comment above it */
- The file is named correctly
- The component has a clear name that is non-ambiguous and the purpose of the component can be inferred from the name alone
- The only data being stored in the state is data necessary for rendering and nothing else
- For Class Components, any internal methods passed to components event handlers are bound to this properly so there are no scoping issues (i.e. for onClick={this.submit} the method this.submit should be bound to this in the constructor)
- Any internal methods bound to this are necessary to be bound (i.e. avoid this.submit = this.submit.bind(this); if this.submit is never passed to a component event handler like onClick)
- All JSX used for rendering exists in the render method
- The component has the minimum amount of code necessary for its purpose, and it is broken down into smaller components in order to separate concerns and functions
If any new file was added I verified that:
- The file has a description of what it does and/or why is needed at the top of the file if the code is not self explanatory
If a new CSS style is added I verified that:
- A similar style doesn't already exist
- The style can't be created with an existing StyleUtils function (i.e. StyleUtils.getBackgroundAndBorderStyle(theme.componentBG)
If the PR modifies code that runs when editing or sending messages, I tested and verified there is no unexpected behavior for all supported markdown - URLs, single line code, code blocks, quotes, headings, bold, strikethrough, and italic.
If the PR modifies a generic component, I tested and verified that those changes do not break usages of that component in the rest of the App (i.e. if a shared library or component like Avatar is modified, I verified that Avatar is working as expected in all cases)
If the PR modifies a component related to any of the existing Storybook stories, I tested and verified all stories for that component are still working as expected.
If the PR modifies a component or page that can be accessed by a direct deeplink, I verified that the code functions as expected when the deeplink is used - from a logged in and logged out account.
If the PR modifies the UI (e.g. new buttons, new UI components, changing the padding/spacing/sizing, moving components, etc) or modifies the form input styles:
- I verified that all the inputs inside a form are aligned with each other.
- I added Design label and/or tagged @Expensify/design so the design team can review the changes.
If a new page is added, I verified it's using the ScrollView component to make it scrollable when more elements are added to the page.
If the main branch was merged into this PR after a review, I tested again and verified the outcome was still expected according to the Test steps.
I have checked off every checkbox in the PR reviewer checklist, including those that don't apply to this PR.

Screenshots/Videos

Android: Native

android.mov

Android: mWeb Chrome

mweb-chrome.mov

iOS: Native

ios.mov

iOS: mWeb Safari

mweb-safari.mov

MacOS: Chrome / Safari

web.mov

MacOS: Desktop

desktop.mov

TMisiukiewicz · 2024-03-26T11:41:32Z

I think it might be an emulator thing, here's the video from Android device

Can you confirm if the file is actually there? e.g. was able to read the content or share it

I just tested it by sending it with an email, seems like a file is visible as an attachment and once sent, it's possible to open it and read the content:

Record_2024-03-26-12-24-14.mp4

Record_2024-03-26-12-24-33.mp4

I've updated test steps for Web & desktop for all platforms together with missing recordings for web & desktop based on Troubleshoot section

s77rt · 2024-03-26T11:44:52Z

@TMisiukiewicz Thank you!

melvin-bot · 2024-03-26T11:45:08Z

We did not find an internal engineer to review this PR, trying to assign a random engineer to #38456 as well as to this PR... Please reach out for help on Slack if no one gets assigned!

amyevans

Love this feature improvement, and tests well! Just a few minor thoughts on the code

amyevans · 2024-03-26T19:28:08Z

src/components/ClientSideLoggingToolMenu/BaseClientSideLoggingToolMenu.tsx

+    const styles = useThemeStyles();
+    return (
+        <>
+            <TestToolRow title="Client side logging">


Should we add a translation for this phrase? I see that it's consistent with other titles in Tools (all are hardcoded English) so NAB, but curious if there's a reason for not translating

amyevans · 2024-03-26T19:29:32Z

src/components/ClientSideLoggingToolMenu/BaseClientSideLoggingToolMenu.tsx

+                    <TestToolRow title="Logs">
+                        <Button
+                            small
+                            text="Share"


There's an existing translation for this, let's use it

amyevans · 2024-03-26T19:33:17Z

src/components/ProfilingToolMenu/index.native.tsx

+                    <TestToolRow title="Profile trace">
+                        <Button
+                            small
+                            text="Share"


Same comment as above

amyevans · 2024-03-26T19:35:52Z

src/libs/Console/index.ts

+ * @param logs Logs captured on the current device
+ * @returns CapturedLogs with parsed messages
+ */
+function parseStringifyMessages(logs: Log[]): Log[] {


Perhaps Stringified instead?

Suggested change

function parseStringifyMessages(logs: Log[]): Log[] {

function parseStringifiedMessages(logs: Log[]): Log[] {

TMisiukiewicz · 2024-03-27T08:07:39Z

@amyevans thanks for you comments! I have updated the translations, I think it makes sense to use translation for Client side logging as well, would be good to remove all existing hard-coded phrases in the future

amyevans · 2024-03-27T18:07:01Z

Okay great! I've requested translations from our Spanish speakers and will update here once I've got them

amyevans · 2024-04-01T14:52:24Z

Here are the translations:

en: 'No logs to share'
es: 'No hay logs que compartir'

en: 'There are no logs to share'
es: 'No hay logs que compartir'

en: 'Use profiling'
es: 'Usar el trazado'

en: 'Profile trace'
es: 'Traza de ejecución'

en: 'Release options'
es: 'Opciones de publicación'

en: 'Client side logging'
es: 'Logs del cliente'

en: 'Logs'
es: 'Logs'

Let's get those in and then we should be set to 🚀

…p-logging

TMisiukiewicz · 2024-04-02T07:12:26Z

@amyevans thank you, updated!

OSBotify · 2024-04-08T10:54:56Z

🚀 Deployed to production by https://github.com/Julesssss in version: 1.4.60-13 🚀

platform	result
🤖 android 🤖	success ✅
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	success ✅
🕸 web 🕸	success ✅

jayeshmangwani · 2024-07-10T19:43:46Z

Hi 👋 @TMisiukiewicz @s77rt ,For Client side logging, Why are we showing the share option for Android and iOS only? I am reviewing a PR that captures profiling data for web/desktop, and there we are showing the share button, but it downloads the file on the web. Moving forward with that PR, I need to understand why we hide the Share button for web/desktop for Client side logging.

s77rt · 2024-07-10T22:39:20Z

@jayeshmangwani On web there is no share functionality. The log file is downloaded automatically after you stop capturing the logs.

TMisiukiewicz added 8 commits March 21, 2024 16:00

add client side logging tool to hidden menu

125f181

save and share logs from hidden menu

576786c

share logs on android and ios

cc424f7

allow to download logs on web

a6ea8bd

download file when disabling logging in troubleshoot page

e2882ad

Merge branch 'main' into feat/four-finger-tap-logging

851831c

update types

d0b6195

prevent trying to parse empty logs

e807fce

TMisiukiewicz marked this pull request as ready for review March 22, 2024 14:18

TMisiukiewicz requested a review from a team as a code owner March 22, 2024 14:18

melvin-bot bot removed the request for review from a team March 22, 2024 14:18

melvin-bot bot requested a review from s77rt March 22, 2024 14:18

adhorodyski reviewed Mar 22, 2024

View reviewed changes

s77rt suggested changes Mar 23, 2024

View reviewed changes

TMisiukiewicz added 4 commits March 25, 2024 08:53

Merge remote-tracking branch 'upstream/main' into feat/four-finger-ta…

fde28ad

…p-logging

code review updates

13e7124

unify platform-agnostic code

4b6ab28

update types

5b54245

s77rt suggested changes Mar 25, 2024

View reviewed changes

code review updates

56790ae

rename disable switch callback name

0611f14

move types to base component

40e4fb3

TMisiukiewicz requested a review from s77rt March 26, 2024 11:42

s77rt approved these changes Mar 26, 2024

View reviewed changes

melvin-bot bot requested a review from amyevans March 26, 2024 11:47

amyevans reviewed Mar 26, 2024

View reviewed changes

TMisiukiewicz added 2 commits March 27, 2024 08:45

Merge branch 'main' into feat/four-finger-tap-logging

25ebd15

code review updates

17a8844

Merge branch 'main' into feat/four-finger-tap-logging

eb2184f

TMisiukiewicz added 2 commits April 2, 2024 08:53

Merge remote-tracking branch 'upstream/main' into feat/four-finger-ta…

72d348e

…p-logging

update translations

155d7ed

amyevans approved these changes Apr 2, 2024

View reviewed changes

amyevans merged commit 2bcdd75 into Expensify:main Apr 2, 2024

github-actions bot mentioned this pull request Apr 4, 2024

[INCORRECT] (used to be a checklist but was incorrectly triggered) #39573

Closed

44 tasks

mountiny mentioned this pull request Apr 4, 2024

Deploy Checklist: New Expensify 2024-04-04 #39588

Closed

48 tasks

melvin-bot bot mentioned this pull request Apr 8, 2024

[HOLD for payment 2024-04-15] HIGH: [Reliability] Enable console logging with four-finger tap #38456

Closed

	const logs = Object.values(capturedLogs as Log[]);
	const logs = Object.values(capturedLogs);

	const parseStringifyMessages = (logs: Log[]) => {
	function parseStringifyMessages(logs: Log[]): Log[] {

	function parseStringifyMessages(logs: Log[]): Log[] {
	function parseStringifiedMessages(logs: Log[]): Log[] {

Conversation

TMisiukiewicz commented Mar 22, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Details

Fixed Issues

Tests

iOS/Android:

iOS Web/Android Web

All platforms - access from Troubleshoot page

Offline tests

QA Steps

All platforms - access from Troubleshoot page

PR Author Checklist

Screenshots/Videos

Uh oh!

melvin-bot bot commented Mar 22, 2024

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

TMisiukiewicz commented Mar 25, 2024

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

s77rt commented Mar 25, 2024

Uh oh!

s77rt commented Mar 25, 2024

Uh oh!

s77rt commented Mar 25, 2024

Uh oh!

s77rt commented Mar 25, 2024

Uh oh!

shawnborton commented Mar 25, 2024

Uh oh!

s77rt commented Mar 25, 2024

Uh oh!

shawnborton commented Mar 25, 2024

Uh oh!

quinthar commented Mar 26, 2024

Uh oh!

TMisiukiewicz commented Mar 26, 2024

TMisiukiewicz commented Mar 22, 2024 •

edited

Loading

s77rt commented Mar 26, 2024 •

edited

Loading