[$500] Login - App crashes when going through task creation flow while the app is still loading

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

Version Number: 1.3.92-2
**Reproducible in staging?:**Y
**Reproducible in production?:**Y
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: Applause - Internal Team
Slack conversation:

Action Performed:

Go to staging.new.expensify.com
Log in with a high traffic account
While the app is still loading, click + on the composer > Assign task
Enter a title and hit ENTER to proceed to the next page

Expected Result:

App does not crash

Actual Result:

App crashes

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Android: Native

Android: mWeb Chrome

iOS: Native

iOS: mWeb Safari

Windows: Chrome

Bug6253615_1698428410905.20231027_200501.mp4

MacOS: Desktop

View all open jobs on GitHub

Upwork Automation - Do Not Edit

Upwork Job URL: https://www.upwork.com/jobs/~01949234f35124ab07
Upwork Job ID: 1718005348020469760
Last Price Increase: 2023-10-27
Automatic offers:

jjcoffee | Reviewer | 27445256
DylanDylann | Contributor | 27445258

@abekkala

Triggered auto assignment to @abekkala (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

Job added to Upwork: https://www.upwork.com/jobs/~01949234f35124ab07

Bug0 Triage Checklist (Main S/O)

This "bug" occurs on a supported platform (ensure Platforms in OP are ✅)
This bug is not a duplicate report (check E/App issues and #expensify-bugs)
- If it is, comment with a link to the original report, close the issue and add any novel details to the original issue instead
This bug is reproducible using the reproduction steps in the OP. S/O
- If the reproduction steps are clear and you're unable to reproduce the bug, check with the reporter and QA first, then close the issue.
- If the reproduction steps aren't clear and you determine the correct steps, please update the OP.
This issue is filled out as thoroughly and clearly as possible
- Pay special attention to the title, results, platforms where the bug occurs, and if the bug happens on staging/production.
I have reviewed and subscribed to the linked Slack conversation to ensure Slack/Github stay in sync

@jjcoffee

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

Proposal

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

App crashes on assign task confirmation page when opened quickly after login

What is the root cause of that problem?

App/src/libs/actions/Task.js

Lines 672 to 676 in 533a373

    
           function getShareDestination(reportID, reports, personalDetails) { 
        
               const report = lodashGet(reports, `report_${reportID}`, {}); 
        
               const participantAccountIDs = lodashGet(report, 'participantAccountIDs'); 
        
               const isMultipleParticipant = participantAccountIDs.length > 1;

When open NewTaskPage before loading reports data, participantAccountIDs is undefined so in line 676, it calls undefined.length which leads to crash.

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

Add fallback to lodashGet - const participantAccountIDs = lodashGet(report, 'participantAccountIDs', []);

Proposal

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

App crashes on assign task confirmation page when opened quickly after login

What is the root cause of that problem?

When the report is undefined, so accessing length of participantAccountID leads to the error.

App/src/libs/actions/Task.js

Line 676 in a59d56f

const isMultipleParticipant = participantAccountIDs.length > 1;

The RCA is that when the reportID that we get from route is '0', then clicking on "Assign task" it will call clearOutTaskInfoAndNavigate(reportID) with reportID is '0':

App/src/libs/actions/Task.js

Lines 636 to 640 in a59d56f

    
           function clearOutTaskInfoAndNavigate(reportID) { 
        
               clearOutTaskInfo(); 
        
               setParentReportID(reportID); 
        
               Navigation.navigate(ROUTES.NEW_TASK_DETAILS); 
        
           }

Then it will navigate to the new assign task flow. In here, Task.getShareDestination is called with reportID is '0':

App/src/pages/tasks/NewTaskPage.js

Line 98 in a59d56f

const displayDetails = Task.getShareDestination(props.task.shareDestination, props.reports, props.personalDetails);
So the report returned from

App/src/libs/actions/Task.js

Line 673 in a59d56f

const report = lodashGet(reports, `report_${reportID}`, {});

is undefined, then accessing participantAccountIDs from undefined will leads to the bug.

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

Solution 1: If the reportID is still '0', we can consider the "Assign task" action in the report is the same the "Assign task" in the FAB by updating:

App/src/libs/actions/Task.js

Lines 636 to 640 in a59d56f

    
           function clearOutTaskInfoAndNavigate(reportID) { 
        
               clearOutTaskInfo(); 
        
               setParentReportID(reportID); 
        
               Navigation.navigate(ROUTES.NEW_TASK_DETAILS); 
        
           }

to

function clearOutTaskInfoAndNavigate(reportID) {
    ...
    if(reportID !== '0'){
        setParentReportID(reportID);
    }
    ...
}

Solution 2:

Also we should disable the action create task once the report is loading as we did with the message composer.
We already have a logic to display ReportFooter in case isReportReadyForDisplay is false:

App/src/pages/home/ReportScreen.js

Line 468 in a59d56f

<ReportFooter isReportReadyForDisplay={false} />
So just need to use isReportReadyForDisplay to check should we prevent user from clicking on "Assign task" or not

What alternative solutions did you explore? (Optional)

Also we can add the method that will auto-set the share destination once the reportID is loaded correctly. We can do that by using withCurrentReportID:

Firstly, update

App/src/pages/tasks/NewTaskPage.js

Lines 90 to 92 in a59d56f

    
           if (props.task.parentReportID) { 
        
               Task.setShareDestinationValue(props.task.parentReportID); 
        
           }

to

 if (props.task.parentReportID && props.task.parentReportID !== '0') {
            Task.setShareDestinationValue(props.task.parentReportID);
        }
  if (props.task.parentReportID === '0' && props.currentReportID !== '0') {
            Task.setShareDestinationValue(currentReportID);
        }

Proposal

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

Login - App crashes when going through task creation flow while the app is still loading

What is the root cause of that problem?

When login with account high traffic account or slow network report data still loading but create task use a report data so when click next button will crash at this line due to participantAccountIDs is empty
It can reproduce if we change network status on login

30539.mp4

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

We should subscribe ONYXKEYS.IS_LOADING_APP for NewTaskPage at withOnyx

    isLoadingApp: {
        key: ONYXKEYS.IS_LOADING_APP,
    },

then and render a loading state at this line

    {props.isLoadingApp ? (
        <FullScreenLoadingIndicator style={[styles.flex1, styles.pRelative]} />
        ) : (
        <ScrollView contentContainerStyle={styles.flexGrow1}>
        ....
        </ScrollView>
    )}

And set a default value for this line

    const participantAccountIDs = lodashGet(report, 'participantAccountIDs', []);

after fix

30539_after_fix_2.mp4

What alternative solutions did you explore? (Optional)

We can hide the ReportFooter if isLoaddingApp due to we don't have the context to create a task and avoid other issues
Subscribe app loading at

    withOnyx({
        shouldShowComposeInput: {
            key: ONYXKEYS.SHOULD_SHOW_COMPOSE_INPUT,
            initialValue: false,
        },
+       isLoadingApp: {
+           key: ONYXKEYS.IS_LOADING_APP,
+       },
    }),

and check before render

    if(props.isLoadingApp) {
        return null;
    }
    return (
        ...
    )

Proposal

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

Login - App crashes when going through task creation flow while the app is still loading

What is the root cause of that problem?

When logging in with a high-traffic account or on a slow network, the report data is still loading. However, when opening the NewTaskPage before the report data has loaded, the participantAccountIDs variable is undefined, resulting in a crash.

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

I should use a Shimmer as an input container placeholder to prevent users from assigning a task before the report data loads.

What alternative solutions did you explore? (Optional)

N/A

@jjcoffee

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

Offer link
Upwork job

@DylanDylann

📣 @DylanDylann 🎉 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 📖

@jjcoffee

@jjcoffee PR #30670 is ready for review

Deployed to Prod - 3 days ago 🎉

@abekkala

@abekkala I think this one's due for payment?

The PR that introduced the bug has been identified. Link to the PR: N/A - behaviour was always there as far as I can tell
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: N/A
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: N/A
Determine if we should create a regression test for this bug. Yes
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

Open the app, ideally on a slow network
Before the report chat finishes loading, click + on the composer > Assign task
Enter a title and proceed to the next page
Verify that the app does not crash

Do we agree 👍 or 👎

@abekkala

@abekkala Completed the checklist manually since automation went a bit wonky here! This has been in production since Nov 10, so is overdue payment.

@DylanDylann

Reviewer: Applause
Fix: @DylanDylann [$500]
PR Review: @jjcoffee [$500]

@DylanDylann

@DylanDylann and @jjcoffee payments made and contracts ended - thank you! 🎉

Navigation Menu

Repository navigation

[$500] Login - App crashes when going through task creation flow while the app is still loading #30539

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

Bug0 Triage Checklist (Main S/O)

Proposal

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

What is the root cause of that problem?

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

Proposal

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

What is the root cause of that problem?

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

What alternative solutions did you explore? (Optional)

Proposal

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

What is the root cause of that problem?

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

What alternative solutions did you explore? (Optional)

Proposal

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

What is the root cause of that problem?

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

What alternative solutions did you explore? (Optional)

17 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

	function getShareDestination(reportID, reports, personalDetails) {
	const report = lodashGet(reports, `report_${reportID}`, {});

	const participantAccountIDs = lodashGet(report, 'participantAccountIDs');
	const isMultipleParticipant = participantAccountIDs.length > 1;

	function clearOutTaskInfoAndNavigate(reportID) {
	clearOutTaskInfo();
	setParentReportID(reportID);
	Navigation.navigate(ROUTES.NEW_TASK_DETAILS);
	}

	if (props.task.parentReportID) {
	Task.setShareDestinationValue(props.task.parentReportID);
	}

[$500] Login - App crashes when going through task creation flow while the app is still loading #30539

Description

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

Activity

melvin-bot commented on Oct 27, 2023

melvin-bot commented on Oct 27, 2023

melvin-bot commented on Oct 27, 2023

Bug0 Triage Checklist (Main S/O)

melvin-bot commented on Oct 27, 2023

mkhutornyi commented on Oct 27, 2023

Proposal

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

What is the root cause of that problem?

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

DylanDylann commented on Oct 28, 2023

Proposal

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

What is the root cause of that problem?

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

What alternative solutions did you explore? (Optional)

suneox commented on Oct 28, 2023

Proposal

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

What is the root cause of that problem?

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

What alternative solutions did you explore? (Optional)

maxconnectAbhi commented on Oct 28, 2023

Proposal

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

What is the root cause of that problem?

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

What alternative solutions did you explore? (Optional)

17 remaining items

melvin-bot commented on Oct 30, 2023

melvin-bot commented on Oct 30, 2023

DylanDylann commented on Nov 1, 2023

abekkala commented on Nov 13, 2023

jjcoffee commented on Nov 20, 2023

jjcoffee commented on Nov 21, 2023

jjcoffee commented on Nov 21, 2023

abekkala commented on Nov 22, 2023

abekkala commented on Nov 22, 2023

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions