Fullscreen loader logging by kidroca · Pull Request #8347 · Expensify/App

kidroca · 2022-03-29T19:04:43Z

Details

As per the ticket requirement we're adding logging to Fullscreen loaders in order to capture a loader never being removed from the screen
When name and timeout props are used on the loader, it would log a message when it mounts/unmounts or stays longer than the specified timeout
In order to have simpler component did mount / will unmount logic, the visible prop was removed and existing usages refactored. FullScreenLoadingIndicator is used uniformly across the app by conditional rendering:

{this.state.isLoading && <FullScreenLoadingIndicator />}

Fixed Issues

$ #7424

Tests

Verify [LoadingIndicator] "${this.props.name}" became visible is logged when loader is visible
- logged for NavigationRoot when launching App (on ios/android)
- logged for MainDrawerNavigation after login (on all platforms)
Verify [LoadingIndicator] "${this.props.name}" disappeared is logged when loader hides
- logged for NavigationRoot when launching App (on ios/android)
- logged for MainDrawerNavigation after login (on all platforms)
Verify [LoadingIndicator] "${this.props.name}" is still visible after ${this.props.timeout} ms is logged when loader is displayed for longer than timeout duration
There should be no regressions on places that use the FullscreenLoadingIndicator

I was able to test the timeout message (3rd bullet) when I forced the MainDrawerLoader to never hide. It also happened once (on dev) because loading was too slow and took longer than 15 sec. (after signing in)

Sample logging output

note: Since "Disappeared" is logged on unmount, the component didn't received the new props and logs whatever logDetail it last had, hence reportID is still "" in the log

PR Review Checklist

Contributor (PR Author) Checklist

PR Reviewer Checklist

QA Steps

No feature or bug to be tested.
We're testing against any regressions around fullscreen loading indicators.
A fullscreen loading indicator is a small rotating circle in the middle of the page with semi-transparent (white/gray) background

On all platforms, verify loading circle still appears:

briefly after sign in
on Wallet statement modal, while statement is loading
after selecting "New chat" and search/users load
after selecting "Search" and search/users load
when you select a chat in LHN and it's loaded in the main view
on the IOU modal while it loads
on the Workspace / Manage Members / Invite page, while search/users load

(These are the pages that had the visible prop which was removed from the loader)

Screenshots

Web

Mobile Web

Desktop

iOS

Android

Android.Emulator.-.Pixel_2_API_29_5554.2022-03-29.22-00-54.mp4

…eens

…race

marcaaron

Can we pause reviews on this pending answers to the questions in this comment? Thanks 🙇

#7424 (comment)

marcaaron

Overall, I like this now that I understand the changes. Did have some suggestions though.

marcaaron · 2022-03-30T00:29:33Z

+    name: PropTypes.string,
+
+    /** Optional duration (ms) after which a message would be logged if the loader is still covering the screen */
+    timeout: PropTypes.number,


suggestion: Rather than have a custom timeout here we can just make this shouldLogAlertOnTimeout since we use 15 seconds everywhere anyway and there are not cases where we need a more specific timeout (and maybe never will be)

In order to capture meaningful logs we need to have logDetail with at least the screen name, or some name we can use to distinct log messages

Instead of introducing a flag like shouldLogAlertOnTimeout we use the optional logDetail prop - if it is provided it's an indication that we'd like to capture logs

If you prefer to have an explicit flag anyway let me know and I'll update

marcaaron · 2022-03-30T00:33:23Z

-        return null;
+class FullScreenLoadingIndicator extends React.Component {
+    componentDidMount() {
+        if (!this.props.name || !this.props.timeout) {


suggestion: We could still log without additional context. But if we want to enforce additional context then maybe we should throw and return so that someone implementing this will remember to add details.

Good point in order to distinct the loader, we should require some context - at least the screen name where it's used, so we should throw an error - if someone tries to setup a new or existing loader with logging incorrectly they'll know right away

Updated the logic to throw an error if props.logDetail exists but logDetail.name is not set

But since logDetail.name is flagged as PropTypes.required I don't know whether we need to throw an exception, and maybe we should remove it and just return

kidroca

Left some notes, will address the changes tomorrow

BTW
I haven't checked some PR check items, because I'm not certain what I should do.
Waiting to be clarified in this slack thread: https://expensify.slack.com/archives/C01GTK53T8Q/p1648583058174529

kidroca · 2022-03-30T01:03:51Z

-        return null;
+class FullScreenLoadingIndicator extends React.Component {
+    componentDidMount() {
+        if (!this.props.name || !this.props.timeout) {


Good point in order to distinct the loader, we should require some context - at least the screen name where it's used, so we should throw an error - if someone tries to setup a new or existing loader with logging incorrectly they'll know right away

- remove `name` and `timeout` props. Use fixed timeout and a `logDetail` prop - use fixed strings in log messages and pass details as additional data - extract timeout duration to CONST - throw if logging is not configured correctly - trigger a special CONST.ERROR.ENSURE_BUGBOT alert

kidroca

Added changes from the provided suggestions

The updated logging looks like this:

note: since "Disappeared" is logged on unmount, the component didn't received the new props and logs whatever logDetail it last had, hence reportID is still "" in the log

A new change is the Timing API
We capture the duration for which a loader was visible using Timing.start/end
If that's undesired we can just discard the last commit

kidroca · 2022-03-30T12:23:25Z

+    name: PropTypes.string,
+
+    /** Optional duration (ms) after which a message would be logged if the loader is still covering the screen */
+    timeout: PropTypes.number,


In order to capture meaningful logs we need to have logDetail with at least the screen name, or some name we can use to distinct log messages

Instead of introducing a flag like shouldLogAlertOnTimeout we use the optional logDetail prop - if it is provided it's an indication that we'd like to capture logs

If you prefer to have an explicit flag anyway let me know and I'll update

kidroca · 2022-03-30T12:25:44Z

-        return null;
+class FullScreenLoadingIndicator extends React.Component {
+    componentDidMount() {
+        if (!this.props.name || !this.props.timeout) {


Updated the logic to throw an error if props.logDetail exists but logDetail.name is not set

But since logDetail.name is flagged as PropTypes.required I don't know whether we need to throw an exception, and maybe we should remove it and just return

parasharrajat

Looking good.

kidroca · 2022-04-04T08:19:23Z

@marcaaron PR is ready for review

thienlnam

Changes look good to me 👌

marcaaron · 2022-04-04T17:50:04Z

A new change is the Timing API We capture the duration for which a loader was visible using Timing.start/end If that's undesired we can just discard the last commit

Let's undo this as it feels like we're just tacking on extra scope. The timing stuff is pretty focused on a few key metrics and we don't even know what our issue is here. Let's not just time things for the sake of timing them.

Other components do not use class description Removed to be uniform with the rest of our components

kidroca · 2022-04-04T18:35:38Z

A new change is the Timing API We capture the duration for which a loader was visible using Timing.start/end If that's undesired we can just discard the last commit

Let's undo this as it feels like we're just tacking on extra scope. The timing stuff is pretty focused on a few key metrics and we don't even know what our issue is here. Let's not just time things for the sake of timing them.

Dropped the commit that introduced this change
Removed class level documentation - other components do not have such

Ready for review

parasharrajat

LGTM.

cc: @thienlnam

PR Reviewer Checklist

thienlnam

Changes look good, leaving to @marcaaron

OSBotify · 2022-04-05T17:58:14Z

✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release.

OSBotify · 2022-04-06T21:43:31Z

🚀 Deployed to staging by @marcaaron in version: 1.1.52-0 🚀

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

OSBotify · 2022-04-08T07:48:39Z

🚀 Deployed to production by @roryabraham in version: 1.1.52-0 🚀

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

kidroca added 3 commits March 29, 2022 21:34

Add logging to fullscreen loaders to investigate infinite loading scr…

ed18c49

…eens

FullscreenLoadingIndicator - don't print additional noise from stackt…

5590d10

…race

Add loader timeout logs for MainDrawerNavigator and NavigationRoot

48ebd2a

kidroca marked this pull request as ready for review March 29, 2022 20:00

kidroca requested review from a team and marcaaron as code owners March 29, 2022 20:00

botify requested review from parasharrajat and thienlnam March 29, 2022 20:00

melvin-bot Bot removed the request for review from a team March 29, 2022 20:00

kidroca changed the title ~~Kidroca/fix/fullscreen loader logs~~ Fullscreen loader logging Mar 29, 2022

kidroca mentioned this pull request Mar 29, 2022

[$4000] Android - Infinite loading spinner appears when sign in to the app leaving idle for 10 min after sign out #7424

Closed

marcaaron requested changes Mar 29, 2022

View reviewed changes

marcaaron assigned kidroca Mar 29, 2022

marcaaron self-requested a review March 30, 2022 00:26

marcaaron requested changes Mar 30, 2022

View reviewed changes

kidroca commented Mar 30, 2022

View reviewed changes

kidroca requested a review from marcaaron March 30, 2022 12:34

parasharrajat reviewed Mar 30, 2022

View reviewed changes

thienlnam previously approved these changes Apr 4, 2022

View reviewed changes

parasharrajat suggested changes Apr 4, 2022

View reviewed changes

Comment thread src/components/FullscreenLoadingIndicator.js Outdated

Comment thread src/components/FullscreenLoadingIndicator.js Outdated

Comment thread src/components/FullscreenLoadingIndicator.js Outdated

Remove FullscreenLoadingIndicator class description

2e50713

Other components do not use class description Removed to be uniform with the rest of our components

kidroca dismissed thienlnam’s stale review via 2e50713 April 4, 2022 18:31

kidroca force-pushed the kidroca/fix/fullscreen-loader-logs branch from 2f6e18b to 2e50713 Compare April 4, 2022 18:31

parasharrajat approved these changes Apr 5, 2022

View reviewed changes

thienlnam approved these changes Apr 5, 2022

View reviewed changes

marcaaron approved these changes Apr 5, 2022

View reviewed changes

marcaaron merged commit 0609796 into Expensify:main Apr 5, 2022

OSBotify mentioned this pull request Apr 6, 2022

Deploy Checklist: New Expensify 2022-04-06 #8516

Closed

17 tasks

kidroca deleted the kidroca/fix/fullscreen-loader-logs branch April 6, 2022 18:17

thienlnam mentioned this pull request Dec 12, 2022

[HOLD payment 01-30-23] Remove loading screen logs #8367

Closed

Conversation

kidroca commented Mar 29, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Details

Fixed Issues

Tests

Sample logging output

PR Review Checklist

Contributor (PR Author) Checklist

PR Reviewer Checklist

QA Steps

Screenshots

Web

Mobile Web

Desktop

iOS

Android

Uh oh!

marcaaron left a comment

Choose a reason for hiding this comment

Uh oh!

marcaaron left a comment

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!

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!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

kidroca left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

kidroca left a comment

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!

parasharrajat left a comment

Choose a reason for hiding this comment

Uh oh!

kidroca commented Apr 4, 2022

Uh oh!

thienlnam left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

marcaaron commented Apr 4, 2022

Uh oh!

kidroca commented Apr 4, 2022

Uh oh!

parasharrajat left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

PR Reviewer Checklist

Uh oh!

thienlnam left a comment

Choose a reason for hiding this comment

Uh oh!

OSBotify commented Apr 5, 2022

Uh oh!

OSBotify commented Apr 6, 2022

Uh oh!

kidroca commented Mar 29, 2022 •

edited

Loading

parasharrajat left a comment •

edited

Loading