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

@strepanier03

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: 9.0.63-0
Reproducible in staging?: Y
Reproducible in production?: Y
Email or phone of affected tester (no customers): applausetester+kh051101@applause.expensifail.com
Issue reported by: Applause Internal Team

Action Performed:

Go to staging.new.expensify.com
Go offline.
Trigger app loading state by going to Troubleshoot > Clear cache and restart > Reset and refresh.
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:

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

@strepanier03

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.

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)

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)

Repro'd.

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

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

@alitoshmatov

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)

@alitoshmatov

@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]

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:

[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

@alitoshmatov

Payment Summary

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

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

@nkdengineer

@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!

@alitoshmatov

$250 approved for @alitoshmatov

Navigation Menu

Repository navigation

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

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

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)

31 remaining items

BugZero Checklist:

Payment Summary

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

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

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

Description

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

Activity

melvin-bot commented on Nov 15, 2024

FitseTLT commented on Nov 15, 2024

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)

nkdengineer commented on Nov 15, 2024

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)

strepanier03 commented on Nov 19, 2024

melvin-bot commented on Nov 19, 2024

31 remaining items

melvin-bot commented on Dec 13, 2024

melvin-bot commented on Dec 13, 2024

melvin-bot commented on Dec 13, 2024

alitoshmatov commented on Dec 16, 2024

BugZero Checklist:

strepanier03 commented on Dec 19, 2024

Payment Summary

strepanier03 commented on Dec 19, 2024

strepanier03 commented on Dec 20, 2024

JmillsExpensify commented on Dec 30, 2024

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions