[Payment 2024-12-20] [$250] Search - App crashes when clicking on search icon while app is loading

[IuliiaHerets]

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: 9.0.63-0
Reproducible in staging?: Y
Reproducible in production?: Y
Email or phone of affected tester (no customers): [email protected]
Issue reported by: Applause Internal Team

Action Performed:

1. Go to staging.new.expensify.com
2. Go offline.
3. Trigger app loading state by going to Troubleshoot > Clear cache and restart > Reset and refresh.
4. Click on search icon on the top right.

Expected Result:

App will not crash.

Actual Result:

App crashes when clicking on search icon while app is loading.

Workaround:

Unknown

Platforms:

• Android: Standalone
• Android: HybridApp
• Android: mWeb Chrome
• iOS: Standalone
• iOS: HybridApp
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

1511_1.txt

Bug6666535_1731688950569.20241116_003703.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021858741837244395820
• Upwork Job ID: 1858741837244395820
• Last Price Increase: 2024-11-19
• Automatic offers:
• nkdengineer | Contributor | 105177573

Issue Owner

Current Issue Owner: @strepanier03

[melvin-bot]

Triggered auto assignment to @strepanier03 (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[FitseTLT]

Proposal

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

Search - App crashes when clicking on search icon while app is loading

What is the root cause of that problem?

The personalDetailsForParticipants is null/undefined immediately after clearing cache so it cannot be converted to object here

App/src/components/Search/SearchRouter/SearchRouter.tsx

Line 126 in 09f6db7

Object.values(personalDetailsForParticipants)

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

We should use

            Object.values(personalDetailsForParticipants ?? {})

or we can use a backup empty object here like this

App/src/pages/RoomMembersPage.tsx

Line 59 in 09f6db7

const personalDetails = usePersonalDetails() || CONST.EMPTY_OBJECT;

What alternative solutions did you explore? (Optional)

[nkdengineer]

Proposal

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

App crashes when clicking on search icon while app is loading

What is the root cause of that problem?

After we clear the cache, personalDetailsForParticipants become undefined

App/src/components/Search/SearchRouter/SearchRouter.tsx

Line 122 in a54f913

const personalDetailsForParticipants = usePersonalDetails();

Then the app crashes here when we open the search page

App/src/components/Search/SearchRouter/SearchRouter.tsx

Lines 126 to 129 in a54f913

	Object.values(personalDetailsForParticipants)
	.filter((details): details is NonNullable<PersonalDetails> => !!(details && details?.login))
	.map((details) => ({
	name: details.displayName ?? Str.removeSMSDomain(details.login ?? ''),

But if the personalDetailsForParticipants to be undefined why no ts error when we use Object.values(personalDetailsForParticipants) here?

App/src/components/Search/SearchRouter/SearchRouter.tsx

Lines 126 to 129 in a54f913

	Object.values(personalDetailsForParticipants)
	.filter((details): details is NonNullable<PersonalDetails> => !!(details && details?.login))
	.map((details) => ({
	name: details.displayName ?? Str.removeSMSDomain(details.login ?? ''),

The problem from here, usePersonalDetails is a hook context that is created from createOnyxContext

App/src/components/OnyxProvider.tsx

Line 9 in a54f913

const [, PersonalDetailsProvider, , usePersonalDetails] = createOnyxContext(ONYXKEYS.PERSONAL_DETAILS_LIST);

The return value of this hook is cast as NonNullable<OnyxValue<TOnyxKey>>, then there's no waring when we use like this Object.values(personalDetailsForParticipants)

App/src/components/createOnyxContext.tsx

Line 36 in a54f913

() => NonNullable<OnyxValue<TOnyxKey>>,

App/src/components/createOnyxContext.tsx

Line 90 in a54f913

return value as NonNullable<OnyxValue<TOnyxKey>>;

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

To avoid the same case can happen in the feature, we can return the type here as OnyxValue<TOnyxKey> here

App/src/components/createOnyxContext.tsx

Line 36 in a54f913

() => NonNullable<OnyxValue<TOnyxKey>>,

and remove the cast type here

App/src/components/createOnyxContext.tsx

Line 90 in a54f913

return value as NonNullable<OnyxValue<TOnyxKey>>;

After that, we can see all waring places via ts error or lint error that possible cause the app crashes when we use the value from the createOnyxContext hook and fix all places.

or if the value here is undefined, we can return a non null value based on the type of OnyxValue<TOnyxKey>. For example, return empty object if this type is an object, return empty array if the type is array,...

App/src/components/createOnyxContext.tsx

Line 90 in a54f913

return value as NonNullable<OnyxValue<TOnyxKey>>;

What alternative solutions did you explore? (Optional)

[strepanier03]

Repro'd.

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

@strepanier03, @alitoshmatov Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[melvin-bot]

@strepanier03, @alitoshmatov 6 days overdue. This is scarier than being forced to listen to Vogon poetry!

[nkdengineer]

@alitoshmatov Can you review the proposals?

[alitoshmatov]

@FitseTLT Thank you for your proposal, Your RCA is correct and solution is solving the issue.

[alitoshmatov]

@nkdengineer Thank you for detailed RCA, I think you are right we should fix typing here to prevent all similar cases from occurring.

[alitoshmatov]

I think we can go with @nkdengineer 's proposal. Which addresses the root cause, and fixes the wrong typing which didn't not cover this edge case

C+ reviewed 🎀 👀 🎀

[melvin-bot]

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

[nkdengineer]

@deetergp Please help to take a look when you have a chance.

[melvin-bot]

@deetergp @strepanier03 @alitoshmatov this issue was created 2 weeks ago. Are we close to approving a proposal? If not, what's blocking us from getting this issue assigned? Don't hesitate to create a thread in #expensify-open-source to align faster in real time. Thanks!

[melvin-bot]

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

[nkdengineer]

The PR is almost done, will open in a few hours.

[mvtglobally]

Issue not reproducible during KI retests. (First week)

[melvin-bot]

Reviewing label has been removed, please complete the "BugZero Checklist".

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 9.0.75-6 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• fix: App crashes when clicking on search icon while app is loading #53521

If no regressions arise, payment will be issued on 2024-12-20. 🎊

For reference, here are some details about the assignees on this issue:

• @alitoshmatov requires payment through NewDot Manual Requests
• @nkdengineer requires payment automatic offer (Contributor)

[melvin-bot]

@alitoshmatov @strepanier03 @alitoshmatov The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed. Please copy/paste the BugZero Checklist from here into a new comment on this GH and complete it. If you have the K2 extension, you can simply click: [this button]

[alitoshmatov]

BugZero Checklist:

• [Contributor] Classify the bug:

Bug classification

Source of bug:

• 1a. Result of the original design (eg. a case wasn't considered)
• 1b. Mistake during implementation
• 1c. Backend bug
• 1z. Other:

Where bug was reported:

• 2a. Reported on production (eg. bug slipped through the normal regression and PR testing process on staging)
• 2b. Reported on staging (eg. found during regression or PR testing)
• 2d. Reported on a PR
• 2z. Other:

Who reported the bug:

• 3a. Expensify user
• 3b. Expensify employee
• 3c. Contributor
• 3d. QA
• 3z. Other:

• [Contributor] 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: https://github.com/Expensify/App/pull/34487/files#r1887152390

• [Contributor] If the regression was CRITICAL (e.g. interrupts a core flow) A discussion in #expensify-open-source 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: No discussion

• [Contributor] If it was decided to create a regression test for the bug, please propose the regression test steps using the template below to ensure the same bug will not reach production again.

I think no regression is needed, it was one off scenario

[strepanier03]

Payment Summary

• $250 @alitoshmatov via New Expensify
• $250 @nkdengineer via Upwork

[strepanier03]

I'll remove the hold from the payment summary tomorrow.

[strepanier03]

@nkdengineer - I've paid and closed your contract in Upwork, thank you!

@alitoshmatov - The payment summary is here and you're welcome to request payment, thank you as well.

Have a lovely new year!

[JmillsExpensify]

$250 approved for @alitoshmatov