[$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

Issue Owner

Current Issue Owner: @alitoshmatov

[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)