[PAID] [$125] Web - App crashes when navigate /request/new/confirmation page directly

[kbecciv]

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

---

Action Performed:

1. Open https://staging.new.expensify.com/request/new/confirmation
2. Observe that it's redirected to /request/new/distance
3. Close RHP
4. Send message containing https://staging.new.expensify.com/request/new/confirmation in any chat
5. Click this link

Expected Result:

Navigate to RHP

Actual Result:

App crashes

Workaround:

Unknown

Platforms:

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

• Android / native
• Android / Chrome
• iOS / native
• iOS / Safari
• MacOS / Chrome / Safari
• MacOS / Desktop

Version Number: 1.3.66.3
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
Notes/Photos/Videos: Any additional supporting documentation

crash.mov

Recording.4351.mp4

Expensify/Expensify Issue URL:
Issue reported by: @situchan
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1693886463699189

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01b6aa9a432e651fc5
• Upwork Job ID: 1700477720195043328
• Last Price Increase: 2023-10-09
• Automatic offers:
• sourcecodedeveloper | Contributor | 26730222
• situchan | Reporter | 26730224

[dukenv0307]

Proposal

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

[distance] App crashes when navigating/request/new/confirmation page directly

What is the root cause of that problem?

Sometimes lastRoute has no state field.

App/src/libs/Navigation/Navigation.js

Line 124 in 6b1a667

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

That makes the app crashes when we call Navigation.goBack here

App/src/pages/iou/steps/MoneyRequestConfirmPage.js

Line 101 in 6b1a667

Navigation.goBack(ROUTES.getMoneyRequestRoute(iouType.current, reportID.current), true);

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

We should use lodashGet here to avoid crashing

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

App/src/libs/Navigation/Navigation.js

Line 124 in 6b1a667

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

What alternative solutions did you explore? (Optional)

[melvin-bot]

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

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~01b6aa9a432e651fc5

[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 @flaviadefaria (External), see https://stackoverflow.com/c/expensify/questions/8582 for more details.

[melvin-bot]

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

[AyoubMoujane]

Proposal

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

• Open https://staging.new.expensify.com/request/new/confirmation
• Observe that it's redirected to /request/new/distance
• Close RHP
• Send message containing https://staging.new.expensify.com/request/new/confirmation in any chat
• Click this link

What is the root cause of that problem?

We're directly accessing index variable of state but state is optional.

type NavigationRoute<
  ParamList extends ParamListBase,
  RouteName extends keyof ParamList
> = Route<Extract<RouteName, string>, ParamList[RouteName]> & {
  state?: NavigationState | PartialState<NavigationState>;
};

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

add a defensive check in the condition that causes the crash

if (lastRoute.name === NAVIGATORS.RIGHT_MODAL_NAVIGATOR && lastRoute.state && lastRoute.state.index > 0)
The overall logic of the function remains the same, but it becomes more robust by handling potential undefined properties.

Behavior with fix ->

trim.mov

[pradeepmdk]

Proposal

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

App crashes when navigate /request/new/confirmation page directly]

What is the root cause of that problem?

App/src/libs/Navigation/Navigation.js

Line 118 in 6b1a667

const isFirstRouteInNavigator = !getActiveRouteIndex(navigationRef.current.getState());

and

App/src/libs/Navigation/Navigation.js

Line 121 in 6b1a667

const rootState = navigationRef.getRootState();

We are using navigationRef.current.getState() and navigationRef.getRootState() both are working differently. RHP closes time the state is reset at the time navigationRef.current.getState() completed removed the right side navigation but in the navigationRef.getRootState() only remove the state field. so that when state field is undefined trying to get index filed so its crashes.

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

when RIGHT_MODAL_NAVIGATOR is not there in the navigationRef.current.getState() means it returns some other state index in this function like CentralPaneNavigator state

App/src/libs/Navigation/Navigation.js

Line 118 in 6b1a667

const isFirstRouteInNavigator = !getActiveRouteIndex(navigationRef.current.getState());

so we need change this function using lodash filter only NAVIGATORS.RIGHT_MODAL_NAVIGATOR and return their state index.

in this function getActiveRouteIndex(navigationRef.current.getState()) to
getActiveRouteIndex(navigationRef.getRootState()) also not worked. because of the above statement.

2. just checking the state is key there or not

lastRoute.name === NAVIGATORS.RIGHT_MODAL_NAVIGATOR && lastRoute.state.index > 0
to 
lastRoute.name === NAVIGATORS.RIGHT_MODAL_NAVIGATOR && lastRoute.state && lastRoute.state.index > 0

or we can use lodash get lodashGet(lastRoute, 'state.index', 0) > 0

[flaviadefaria]

It seems like @strepanier03 was assigned here first so unassigning myself. @strepanier03 let me know in case I missed something.

[strepanier03]

@flaviadefaria - That's fine, thanks for the heads up. Been seeing the double assignment quite frequently lately so no worries at all, I got this.

[sobitneupane]

Thanks for the proposal everyone.

@Sourcecodedeveloper Can you please explain why getState should be replaced by getRootState? We are using getActiveRouteIndex in other places as well. Won't the change in getActiveRouteIndex affect other use cases? Don't you think its good idea to just use lodashGet here?

Detailed explanation with references will be appreciated.

[sobitneupane]

FYI, This was the PR which introduced the codeblock.

[melvin-bot]

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

[sobitneupane]

Thanks for the update @Sourcecodedeveloper

Proposal from @Sourcecodedeveloper looks good to me.

🎀 👀 🎀 C+ reviewed

[melvin-bot]

Triggered auto assignment to @mountiny, see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[melvin-bot]

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

Offer link
Upwork job

[sobitneupane]

The issue is not reproducible any longer on my end. We will not require the PR any longer. But I would request making the payment to the contributor as the PR was already raised and was in good shape.

cc: @mountiny @strepanier03

[mountiny]

In such cases we usually follow the 25% rule so I would pay $125 to @Sourcecodedeveloper sorry this did not work out fully

[melvin-bot]

Upwork job price has been updated to $125

[mountiny]

@strepanier03 Could you please pay $125 to @Sourcecodedeveloper for their work on this issue which at the later phase got resolved by other changes unrelated to this issue?

Also $50 to @situchan for reporting

[strepanier03]

Sure thing, will take care of that.

[strepanier03]

@Sourcecodedeveloper - Can you please apply for this job or share your UPwork profile with me? I'm not sure who you are in Upwork so can't hire you directly at this time.

[situchan]

@strepanier03 I can help on behalf

Here it is - #23488 (comment)

[melvin-bot]

📣 @smukherjee-drapefit! 📣
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>

[strepanier03]

Thank you @situchan, I appreciate it a lot!

@Sourcecodedeveloper - I've sent you the offer and will check again by the end of the day to pay.

---

@smukherjee-drapefit - This issue is already resolved and is set to be closed in the next day or two.

Was there something specific you were asking to work on? Check out our contributing.md to learn more about how to work as a member of our community.

[strepanier03]

@Sourcecodedeveloper - I've paid out your contract in UpWork and closed the contract.

@situchan - I've hired you to a reporting job and will check back in for payment. Sorry, I missed that before.

[situchan]

I already accepted offer from #27085 (comment)

[strepanier03]

Aaah, that comment was hidden and I missed it, thanks for linking it. Handling now.

[strepanier03]

Okay, everyone's been paid here and I unraveled the mess I made.

Thanks again everyone!