White screen on iOS login

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

Action Performed:

Log out
Log in
View white screen 💥

Expected Result:

See chats after log in

Actual Result:

View white screen after login

Workaround:

None

Platform:

Where is this issue occurring?

iOS

Version Number: 1.0.82.2
Logs:

TypeError: Cannot convert undefined value to object

This error is located at:
    in HeaderView (at withOnyx.js:154)
    in withOnyx(HeaderView) (at withOnyx.js:178)
    in Unknown (at withLocalize.js:140)
    in withLocalize(Component) (at withWindowDimensions.js:77)
    in withWindowDimensions(withLocalize(Component)) (at withWindowDimensions.js:94)
    in Unknown (at ReportScreen.js:102)
    in RCTView (at View.js:34)
    in View (at ScreenWrapper.js:93)
    in ScreenWrapper (at withNavigation.tsx:26)
    in withNavigation(ScreenWrapper) (at ReportScreen.js:101)
    in ReportScreen (at withOnyx.js:154)
    in withOnyx(ReportScreen) (at withOnyx.js:178)
    in Unknown (at SceneView.tsx:118)
    in StaticContainer
    in EnsureSingleNavigator (at SceneView.tsx:110)
    in SceneView (at useDescriptors.tsx:199)
    in RCTView (at View.js:34)
    in View (at Screen.tsx:59)
    in RCTView (at View.js:34)
    in View (at Background.tsx:13)
    in Background (at Screen.tsx:54)
    in Screen (at DrawerView.tsx:232)
    in RNSScreen (at createAnimatedComponent.js:217)
    in AnimatedComponent (at createAnimatedComponent.js:278)
    in AnimatedComponentWrapper (at src/index.native.tsx:120)
    in Screen (at ScreenFallback.tsx:37)
    in MaybeScreen (at DrawerView.tsx:226)
    in RNSScreenContainer (at src/index.native.tsx:145)
    in ScreenContainer (at ScreenFallback.tsx:28)
    in MaybeScreenContainer (at DrawerView.tsx:192)
    in RCTView (at View.js:34)
    in View (at Drawer.tsx:565)
    in RCTView (at View.js:34)
    in View (at createAnimatedComponent.js:494)
    in AnimatedComponent(View) (at createAnimatedComponent.js:505)
    in AnimatedComponentWrapper (at Drawer.tsx:559)
    in RCTView (at View.js:34)
    in View (at createAnimatedComponent.js:494)
    in AnimatedComponent(View) (at createAnimatedComponent.js:505)
    in AnimatedComponentWrapper (at Drawer.tsx:547)
    in PanGestureHandler (at GestureHandlerNative.tsx:14)
    in PanGestureHandler (at Drawer.tsx:538)
    in DrawerView (at DrawerView.tsx:257)
    in DrawerViewBase (at DrawerView.tsx:301)
    in RCTView (at View.js:34)
    in View (at DrawerView.tsx:300)
    in SafeAreaProviderCompat (at DrawerView.tsx:299)
    in DrawerView (at createDrawerNavigator.tsx:100)
    in Unknown (at createDrawerNavigator.tsx:99)
    in DrawerNavigator (at BaseDrawerNavigator.js:31)
    in BaseDrawerNavigator (at withWindowDimensions.js:77)
    in withWindowDimensions(BaseDrawerNavigator) (at withWindowDimensions.js:94)
    in Unknown (at MainDrawerNavigator.js:48)
    in MainDrawerNavigator (at withOnyx.js:154)
    in withOnyx(MainDrawerNavigator) (at withOnyx.js:178)
    in Unknown (at SceneView.tsx:118)
    in StaticContainer
    in EnsureSingleNavigator (at SceneView.tsx:110)
    in SceneView (at useDescriptors.tsx:199)
    in RCTView (at View.js:34)
    in View (at CardContainer.tsx:283)
    in RCTView (at View.js:34)
    in View (at CardContainer.tsx:282)
    in RCTView (at View.js:34)
    in View (at CardSheet.tsx:33)
    in CardSheet (at Card.tsx:566)
    in RCTView (at View.js:34)
    in View (at createAnimatedComponent.js:217)
    in AnimatedComponent (at createAnimatedComponent.js:278)
    in AnimatedComponentWrapper (at Card.tsx:545)
    in PanGestureHandler (at GestureHandlerNative.tsx:14)
    in PanGestureHandler (at Card.tsx:539)
    in RCTView (at View.js:34)
    in View (at createAnimatedComponent.js:217)
    in AnimatedComponent (at createAnimatedComponent.js:278)
    in AnimatedComponentWrapper (at Card.tsx:535)
    in RCTView (at View.js:34)
    in View (at Card.tsx:529)
    in Card (at CardContainer.tsx:222)
    in CardContainer (at CardStack.tsx:611)
    in RNSScreen (at createAnimatedComponent.js:217)
    in AnimatedComponent (at createAnimatedComponent.js:278)
    in AnimatedComponentWrapper (at src/index.native.tsx:120)
    in Screen (at Screens.tsx:37)
    in MaybeScreen (at CardStack.tsx:604)
    in RNSScreenContainer (at src/index.native.tsx:145)
    in ScreenContainer (at Screens.tsx:20)
    in MaybeScreenContainer (at CardStack.tsx:516)
    in RCTView (at View.js:34)
    in View (at Background.tsx:13)
    in Background (at CardStack.tsx:514)
    in CardStack (at StackView.tsx:438)
    in SafeAreaProviderCompat (at StackView.tsx:433)
    in RCTView (at View.js:34)
    in View (at StackView.tsx:432)
    in StackView (at createCustomModalStackNavigator.js:21)
    in CustomRootStackNavigator (at AuthScreens.js:258)
    in AuthScreens (at withOnyx.js:154)
    in withOnyx(AuthScreens) (at withOnyx.js:178)
    in Unknown (at withWindowDimensions.js:77)
    in withWindowDimensions(Component) (at withWindowDimensions.js:94)
    in Unknown (at AppNavigator/index.js:16)
    in AppNavigator (at NavigationRoot.js:46)
    in EnsureSingleNavigator (at BaseNavigationContainer.tsx:429)
    in BaseNavigationContainer (at NavigationContainer.tsx:132)
    in ThemeProvider (at NavigationContainer.tsx:131)
    in NavigationContainerInner (at NavigationRoot.js:37)
    in NavigationRoot (at Expensify.js:194)
    in Expensify (at withOnyx.js:154)
    in withOnyx(Expensify) (at withOnyx.js:178)
    in Unknown (at App.js:24)
    in BaseErrorBoundary (at App.js:23)
    in LocaleContextProvider (at withOnyx.js:154)
    in withOnyx(LocaleContextProvider) (at withOnyx.js:178)
    in Unknown (at App.js:21)
    in RNCSafeAreaProvider (at SafeAreaContext.tsx:74)
    in SafeAreaProvider (at App.js:20)
    in App (at renderApplication.js:47)
    in RCTView (at View.js:34)
    in View (at AppContainer.js:107)
    in RCTView (at View.js:34)
    in View (at AppContainer.js:134)
    in AppContainer (at renderApplication.js:40), js engine: hermes

View all open jobs on Upwork

@strepanier03

Triggered auto assignment to @strepanier03 (AutoAssignerTriage), see https://stackoverflow.com/c/expensify/questions/4749 for more details.

@isagoico

cc @isagoico if you've seen this on other platforms or via regression tests.

👋 Friendly reminder that deploy blockers are time-sensitive ⏱ issues! Check out the open StagingDeployCash deploy checklist to see the list of PRs included in this release, then work quickly to do one of the following:

Identify the pull request that introduced this issue and revert it.
Find someone who can quickly fix the issue.
Fix the issue yourself.

Briefly looked at the issue, I think this is the issue,

which looks like it's from here.

Haven't confirmed though. Just initial guess.

@chiragsalian

@chiragsalian I can tell why this is happening.

We update the timezone here

App/src/libs/Navigation/AppNavigator/AuthScreens.js

Line 80 in 9b1ea35

PersonalDetails.setPersonalDetails({timezone});

.
As soon as we do this, this will run.

App/src/libs/actions/PersonalDetails.js

Line 199 in 9b1ea35

const mergedDetails = lodashMerge(personalDetails[currentUserEmail], details);
But personalDetails are not yet ready or have not retrived by Onyx yet.

App/src/libs/actions/PersonalDetails.js

Line 23 in 9b1ea35

callback: val => personalDetails = val,

.

Thus an error. This is a race condition. I am not sure how to solve this race condition.

There is one way that we move the timezone setting code to personalDetails.js from AuthScreen.js

Onyx.connect({
    key: ONYXKEYS.MY_PERSONAL_DETAILS,
    callback: (val) => {
        const timezone = lodashGet(val, 'timezone', {});
        const currentTimezone = moment.tz.guess(true);

        // If the current timezone is different than the user's timezone, and their timezone is set to automatic
        // then update their timezone.
        if (_.isObject(timezone) && timezone.automatic && timezone.selected !== currentTimezone) {
            timezone.selected = currentTimezone;
            PersonalDetails.setPersonalDetails({timezone});
        }
    },
});

Then move this code to a function and run that function each time currentEmail changes which means a user is login/changing.

Onyx.connect({
    key: ONYXKEYS.SESSION,
    callback: val => currentUserEmail = val ? val.email : '',
});

We can wait to call that method until personalDetails are set.

@parasharrajat

i just got back online. Since its not assigned yet i'll check it out. Great investigation @parasharrajat.
Let me read the issue and understand the flow to better understand what to do next.

I've been trying this for a little while and yeah I cannot reproduce this on iOS simulator or phone. I do see Cannot read property 'replace' of undefined logs though and yeah what you posted Rajat makes the most sense to me. I don't get the second part of your explanation i.e.,

Then move this code to a function and run that function...

I don't think thats needed because if the user logs out and logs in then the callback for ONYXKEYS.MY_PERSONAL_DETAILS should just run again. Anyway i'll make the necessary changes to not get Cannot read property 'replace' of undefined and let's see if that resolves the problem.

@AndrewGable

I was able to log in successfully on web but I was unable to reproduce this issue consistently before. @AndrewGable @parasharrajat can you try reproducing the issue again on build 1.0.82-5

@AndrewGable

Yup, we just CP-d a possible fix. I think the version of this is 1.0.82.4 that just hit testflight. @AndrewGable when you get the chance can you test on your phone and let us know if any issue is present.

Still seeing white screen on 1.0.82.4

RPReplay_Final1628194472.MP4

I can reproduce the white screen on web staging right now as well

Untitled.mov

TypeError: Cannot read property 'chirag@expensify.com' of undefined
    at OptionsListUtils.js:105
    at Function.dt (map.js:13)
    at Tw (OptionsListUtils.js:104)
    at PL (HeaderView.js:71)
    at ni (react-dom.production.min.js:157)
    at Bs (react-dom.production.min.js:267)
    at wu (react-dom.production.min.js:250)
    at Su (react-dom.production.min.js:250)
    at _u (react-dom.production.min.js:250)
    at fu (react-dom.production.min.js:243)

Full stack trace

Verified fix in #4436 🚀

Navigation Menu

Repository navigation

White screen on iOS login #4388

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platform:

15 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

White screen on iOS login #4388

Description

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platform:

Activity

MelvinBot commented on Aug 3, 2021

AndrewGable commented on Aug 3, 2021

OSBotify commented on Aug 3, 2021

15 remaining items

chiragsalian commented on Aug 4, 2021

parasharrajat commented on Aug 4, 2021

parasharrajat commented on Aug 4, 2021

chiragsalian commented on Aug 5, 2021

chiragsalian commented on Aug 5, 2021

isagoico commented on Aug 5, 2021

chiragsalian commented on Aug 5, 2021

AndrewGable commented on Aug 5, 2021

AndrewGable commented on Aug 5, 2021

AndrewGable commented on Aug 5, 2021

AndrewGable commented on Aug 6, 2021

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions