[$500] Request Money- App crashes when User B clicks on the Request Money description page

[izarutskaya]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Version Number: v1.4.3-6
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:

1. Log in with User A account.
2. Open User B chat.
3. Go to Request Money.
4. Enter amount and click "Next"
5. Click on "Description"
6. Copy the description page URL.
7. Go to User B account in a different browser.
8. Open User A chat and send the copied URL.
9. Click on the sent URL 2-3 times or refresh the page, then click again.

Expected Result:

The app on User B's side should not crash when clicking on the URL from the Request Money description page.

Actual Result:

The app crashes on User B's side when clicking on the Request Money description page URL.

Workaround:

Unknown

Platforms:

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

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Bug6290258_1700916571533.2023-11-25_17-29-23.1.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~010302bfe94f4fe40e
• Upwork Job ID: 1728917517583142912
• Last Price Increase: 2023-12-03

[melvin-bot]

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

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~010302bfe94f4fe40e

[melvin-bot]

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

[melvin-bot]

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

[abzokhattab]

Proposal

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

App crashes when clicking on money request description url from the chat of user B

What is the root cause of that problem?

App/src/libs/Navigation/Navigation.js

Line 179 in b6abdd4

if (lastRoute.name === NAVIGATORS.RIGHT_MODAL_NAVIGATOR && lastRoute.state.index > 0) {

in this line the lastRoute.state is null resulting in an error when accessing lastRoute.state.index

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

change lastRoute.state.index to lodashGet(lastRoute,"state","index")

[ZhenjaHorbach]

Proposal

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

Request Money- App crashes when User B clicks on the Request Money description page

What is the root cause of that problem?

The problem is with calling this useEffect again

App/src/pages/iou/MoneyRequestDescriptionPage.js

Lines 82 to 92 in d985a0e

	useEffect(() => {
	const moneyRequestId = `${iouType}${reportID}`;
	const shouldReset = iou.id !== moneyRequestId;
	if (shouldReset) {
	IOU.resetMoneyRequestInfo(moneyRequestId);
	}
	if (!isDistanceRequest && (_.isEmpty(iou.participants) || (iou.amount === 0 && !iou.receiptPath) || shouldReset)) {
	Navigation.goBack(ROUTES.MONEY_REQUEST.getRoute(iouType, reportID), true);
	}
	}, [iou.id, iou.participants, iou.amount, iou.receiptPath, iouType, reportID, isDistanceRequest]);

And apparently when we leave the screen for the first time

We are completely resetting the route store using goBack first time
And when we reopen the screen
We have an empty route store

As a result on this line, we have empty lastRoute

App/src/libs/Navigation/Navigation.js

Line 179 in b6abdd4

if (lastRoute.name === NAVIGATORS.RIGHT_MODAL_NAVIGATOR && lastRoute.state.index > 0) {

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

As for me
Best way to fix this
If there is missing state in lastRoute, simply return the return
To get the expected result

        const lastRouteIndex = lodashGet(lastRoute, 'state.index');
        if (lastRoute.name === NAVIGATORS.RIGHT_MODAL_NAVIGATOR) {
            if (typeof lastRouteIndex === 'undefined') {
                return;
            }
            if (lastRouteIndex) {
                navigationRef.current.goBack();
                return;
            }
        }

App/src/libs/Navigation/Navigation.js

Lines 179 to 182 in b6abdd4

	if (lastRoute.name === NAVIGATORS.RIGHT_MODAL_NAVIGATOR && lastRoute.state.index > 0) {
	navigationRef.current.goBack();
	return;
	}

!!! If we fix this bug like this, we will never see the description screen. Since we will constantly navigate back

        if (lastRoute.name === NAVIGATORS.RIGHT_MODAL_NAVIGATOR &&  lodashGet(lastRoute, 'state.index') > 0) {
            navigationRef.current.goBack();
            return;
        }

What alternative solutions did you explore? (Optional)

I think this solution is partly a bug.
Since we will not be on the description screen
But maybe we expect it )))

        if (lastRoute.name === NAVIGATORS.RIGHT_MODAL_NAVIGATOR &&  lodashGet(lastRoute, 'state.index', 0) > 0) {
            navigationRef.current.goBack();
            return;
        }

[it-education-md]

Cannot find this issue on dev environment

[codecreator28]

Proposal

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

App crashes when User B clicks on the Request Money description page

What is the root cause of that problem?

The conditional check lastRoute.name === NAVIGATORS.RIGHT_MODAL_NAVIGATOR && lastRoute.state.index > 0 attempts to access lastRoute.state.index to determine whether the user is currently within the Right Modal Navigator and has more than one route in the stack. However, if lastRoute.state is null, accessing lastRoute.state.index will result in an error, causing the app to crash.

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

Change the code as follows:
if (lastRoute.name === NAVIGATORS.RIGHT_MODAL_NAVIGATOR && lastRoute.state.index > 0) {
to
if (lastRoute.name === NAVIGATORS.RIGHT_MODAL_NAVIGATOR && lastRoute.state && lastRoute.state.index > 0) {

What alternative solutions did you explore? (Optional)

[angelaflore]

Proposal

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

App crashes when User B clicks on the Request Money description page

What is the root cause of that problem?

App/src/libs/Navigation/Navigation.js

Line 179 in b6abdd4

if (lastRoute.name === NAVIGATORS.RIGHT_MODAL_NAVIGATOR && lastRoute.state.index > 0) {

In this line, It crashes when accessing the lastRoute.state.index even though lastRoute.state is null.

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

It's simple to fix: we can replace the lastRoute.state.index with lastRoute.state?.index in this line.

[melvin-bot]

📣 @angelaflore! 📣
Hey, it seems we don’t have your contributor details yet! You'll only have to do this once, and this is how we'll hire you on Upwork.
Please follow these steps:

1. Make sure you've read and understood the contributing guidelines.
2. Get the email address used to login to your Expensify account. If you don't already have an Expensify account, create one here. If you have multiple accounts (e.g. one for testing), please use your main account email.
3. Get the link to your Upwork profile. It's necessary because we only pay via Upwork. You can access it by logging in, and then clicking on your name. It'll look like this. If you don't already have an account, sign up for one here.
4. Copy the format below and paste it in a comment on this issue. Replace the placeholder text with your actual details.
   
   Format:

Contributor details
Your Expensify account email: <REPLACE EMAIL HERE>
Upwork Profile Link: <REPLACE LINK HERE>

[angelaflore]

Contributor details
Your Expensify account email: [email protected]
Upwork Profile Link: https://www.upwork.com/freelancers/~018fda6a31a31c3b17

[melvin-bot]

✅ Contributor details stored successfully. Thank you for contributing to Expensify!

[melvin-bot]

⚠️ Missing/invalid email or upwork profile link. Please make sure you add both your Expensify email and Upwork profile link in the format specified.

[melvin-bot]

📣 @aoneahsan! 📣
Hey, it seems we don’t have your contributor details yet! You'll only have to do this once, and this is how we'll hire you on Upwork.
Please follow these steps:

1. Make sure you've read and understood the contributing guidelines.
2. Get the email address used to login to your Expensify account. If you don't already have an Expensify account, create one here. If you have multiple accounts (e.g. one for testing), please use your main account email.
3. Get the link to your Upwork profile. It's necessary because we only pay via Upwork. You can access it by logging in, and then clicking on your name. It'll look like this. If you don't already have an account, sign up for one here.
4. Copy the format below and paste it in a comment on this issue. Replace the placeholder text with your actual details.
   
   Format:

Contributor details
Your Expensify account email: <REPLACE EMAIL HERE>
Upwork Profile Link: <REPLACE LINK HERE>

[aoneahsan]

Contributor details
Your Expensify account email: [email protected]
Upwork Profile Link: https://www.upwork.com/freelancers/~0119502c272d9a465a

[melvin-bot]

✅ Contributor details stored successfully. Thank you for contributing to Expensify!

[dev2833]

Contributor details
Your Expensify account email: [email protected]
Upwork Profile Link: https://www.upwork.com/freelancers/~016d88914261f760e7

[melvin-bot]

✅ Contributor details stored successfully. Thank you for contributing to Expensify!

[aoneahsan]

Proposal

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

Request Money- App crashes when User B clicks on the Request Money description page #31893

Action Performed:

• Log in with User A account.
• Open User B chat.
• Go to Request Money.
• Enter amount and click "Next"
• Click on "Description"
• Copy the description page URL.
• Go to User B account in a different browser.
• Open User A chat and send the copied URL.
• Click on the sent URL 2-3 times or refresh the page, then click again.

I tried and was able to recreate this issue every time in my local development environment.

What is the root cause of that problem?

Uncaught TypeError: Cannot read properties of undefined (reading 'index')

The code that is causing this issue is indeed.

src/libs/Navigation/Navigation.js

if (lastRoute.name === NAVIGATORS.RIGHT_MODAL_NAVIGATOR && lastRoute.state.index > 0) {

But it has nothing to do with this reset in

src/pages/iou/MoneyRequestDescriptionPage.js

useEffect(() => {
        const moneyRequestId = `${iouType}${reportID}`;
        const shouldReset = iou.id !== moneyRequestId;
        if (shouldReset) {
            IOU.resetMoneyRequestInfo(moneyRequestId);
        }

as shown in the screenshot added below

As you can see, the shouldReset property value is false in both logs, which confirms that IOU.resetMoneyRequestInfo(moneyRequestId); is never called in both executions (when I clicked the link the first time and when I clicked the link a second time.

The main issue is the state not being available in the second execution (when I clicked the link the second time); that is the main issue (as shown in the image below).

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

A simple workaround will be to change this line of code.

if (lastRoute.name === NAVIGATORS.RIGHT_MODAL_NAVIGATOR && lastRoute.state.index > 0) {

In this, check the property if it exists, then use the value otherwise undefined instead of throwing this error Uncaught TypeError: Cannot read properties of undefined (reading 'index') what we are getting right now.

if (lastRoute.name === NAVIGATORS.RIGHT_MODAL_NAVIGATOR && lastRoute.state?.index > 0) {

Note: using lastRoute.state?.index will give es/no-optional-chaining eslint error

We can get around that by using one of the below solutions.

if (lastRoute.name === NAVIGATORS.RIGHT_MODAL_NAVIGATOR && lastRoute.state && lastRoute.state.index > 0) {

or

if (lastRoute.name === NAVIGATORS.RIGHT_MODAL_NAVIGATOR && lodashGet(lastRoute, 'state.index', 0) > 0) {

That is wrong, as when the issue occurs, it will just redirect the user to https://dev.new.expensify.com:8082/request/new/8454902468342866/manual, and the user will not be able to see https://dev.new.expensify.com:8082/request/new/description/8454902468342866 the already created Request Money url, which is this issue all about.

So yes, these two workarounds are not the solution to this problem at all; they will introduce another issue, and this issue will still be there, hence not solving anything at all.

The main thing to note here is why it happened in the first place, as I have checked. The variables we are using in function and in that useEffect are identical, so I need to debug this properly, find the root cause of this error, and mention that with a proper solution as PR for this issue.

That is the only correct solution for this error.

Debug the reason why that state object is missing in the second execution and resolve that and explain that adequately in PR so we can avoid this and correctly resolve this issue without introducing any other issues.

Note: I will provide the reason why the state object was missing in my PR, along with steps we need to take to make sure we never reencounter this issue, and I will make sure that the solution I implement does not introduce any new solutions as I have explained with workarounds mentioned above.

What alternative solutions did you explore? (Optional)

I have tried these, but as explained above, they will introduce a new issue without solving it, so yes, they are not valid solutions.

I will mention this here: The only valid solution for this problem is to debug why that state object is missing in the second call, resolve to correct that, and confirm that it does not introduce any new ripple effects.

[mollfpr]

I wasn't able to reproduce the issue.

@izarutskaya Could help confirm if it's already fixed?

[izarutskaya]

@mollfpr I cannot reproduce this anymore
Build v1.4.5-4

Recording.1951.mp4

[melvin-bot]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[puneetlath]

Seems like this likely got fixed from some other PR. Going to go ahead and close it out. Let me know if I'm mistaken.