[HOLD for payment 2024-11-20] [$250] Search - App freezes after cache and cookie clean of chat filter

[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: v9.0.35-7
Reproducible in staging?: Y
Reproducible in production?: N
Found when validating PR : #49258
Email or phone of affected tester (no customers): [email protected]
Logs: https://stackoverflow.com/c/expensify/questions/4856
Issue reported by: Applause-Internal team

Action Performed:

Precondition; logged in application.

1. Go to Search page > Chats
2. Click on Filters > Select some users for From field and save the search
3. Go to Troubleshoot > Reset cache and restart

Expected Result:

App doesn't crash. App doesn'r freeze

Actual Result:

App is freezed

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

Bug6605499_1726494649775.filter_chat.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021835730592300773674
• Upwork Job ID: 1835730592300773674
• Last Price Increase: 2024-09-23
• Automatic offers:
• rayane-djouah | Reviewer | 104197919

Issue Owner

Current Issue Owner: @Christinadobrzyn

[melvin-bot]

Triggered auto assignment to @Christinadobrzyn (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.

[izarutskaya]

We think this issue might be related to the #wave-control

[melvin-bot]

Triggered auto assignment to @tylerkaraszewski (DeployBlockerCash), see https://stackoverflowteams.com/c/expensify/questions/9980/ for more details.

[github-actions]

👋 Friendly reminder that deploy blockers are time-sensitive ⏱ issues! Check out the open `StagingDeployCash` deploy checklist to see the list of PRs included in this release, then work quickly to do one of the following:

1. Identify the pull request that introduced this issue and revert it.
2. Find someone who can quickly fix the issue.
3. Fix the issue yourself.

[Christinadobrzyn]

Asking everyone in this PR to take a peek - #49258

[DylanDylann]

I can't reproduce this issue on the latest main

Screen.Recording.2024-09-17.at.00.17.28.mov

[melvin-bot]

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

[melvin-bot]

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

[mountiny]

I cannot reproduce in staging, it is testing feature

[mountiny]

Screen.Recording.2024-09-16.at.19.28.08.mp4

[mvtglobally]

Multiple testers were able to reproduce this one. Let me check now again.
https://github.com/user-attachments/assets/0cf790f7-c925-4d9e-96d6-0cb3e74793d3

[izarutskaya]

Still reproducible but I am not sure what should I see. Check please my video
Build v9.0.55-2

Recording.2884.mp4

[TMisiukiewicz]

@izarutskaya thanks, looks like it hangs exactly at the same point.

So today I was finally able to reproduce it and found the root cause. When we open the Search in chats selector, we initialize the option list to load the items that are visible in the list:

App/src/components/Search/SearchFiltersChatsSelector.tsx

Lines 46 to 48 in 65fa00a

	const {options, areOptionsInitialized} = useOptionsList({
	shouldInitialize: didScreenTransitionEnd,
	});

This means, now every time the personalDetails list change, we will fall into this useEffect and execute the whole code since the early return won't work anymore:

App/src/components/OptionListContextProvider.tsx

Lines 82 to 128 in 65fa00a

	useEffect(() => {
	// there is no need to update the options if the options are not initialized
	if (!areOptionsInitialized.current) {
	return;
	}
	const newReportOptions: Array<{
	replaceIndex: number;
	newReportOption: OptionsListUtils.SearchOption<Report>;
	}> = [];
	Object.keys(personalDetails).forEach((accountID) => {
	const prevPersonalDetail = prevPersonalDetails?.[accountID];
	const personalDetail = personalDetails?.[accountID];
	if (isEqualPersonalDetail(prevPersonalDetail, personalDetail)) {
	return;
	}
	Object.values(reports ?? {})
	.filter((report) => !!Object.keys(report?.participants ?? {}).includes(accountID) || (ReportUtils.isSelfDM(report) && report?.ownerAccountID === Number(accountID)))
	.forEach((report) => {
	if (!report) {
	return;
	}
	const newReportOption = OptionsListUtils.createOptionFromReport(report, personalDetails);
	const replaceIndex = options.reports.findIndex((option) => option.reportID === report.reportID);
	newReportOptions.push({
	newReportOption,
	replaceIndex,
	});
	});
	});
	// since personal details are not a collection, we need to recreate the whole list from scratch
	const newPersonalDetailsOptions = OptionsListUtils.createOptionList(personalDetails).personalDetails;
	setOptions((prevOptions) => {
	const newOptions = {...prevOptions};
	newOptions.personalDetails = newPersonalDetailsOptions;
	newReportOptions.forEach((newReportOption) => (newOptions.reports[newReportOption.replaceIndex] = newReportOption.newReportOption));
	return newOptions;
	});
	// This effect is used to update the options list when personal details change so we ignore all dependencies except personalDetails
	// eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps
	}, [personalDetails]);

As you can see, it loops through all the personal details, and for each single one of them, it loops through all reports using filter and then forEach. This issue probably occurs only on heavy loaded accounts - for me it's reproducible on account where I have 8,5k personal details and more than 15k reports. I was able to measure it using profiler and it blocks my app for 50 seconds:

And here is the confirmation that loops mentioned earlier are responsible for that:

In this useEffect we have early return comparing the previous value of personal details with the current one, and it should do the work in all the other cases where this value gets updated. However in here it's kinda specific scenario, and it will never fall into this early return because the previous value of personal details is just an empty object, so we run the code for each one of them.

Haven't tested any solution yet, but first and easiest thing that comes to my mind is just setting areOptionsInitialized to false when clearing the cache. Will test it tomorrow morning and open a PR if it works properly.

[TMisiukiewicz]

PR open: #51725

mind checking if the issue is gone on your side when testing out this branch?

[TMisiukiewicz]

I'll be ooo until the end of the week so @MrRefactor will take care of this if needed

[MrRefactor]

I will adjust PR and upload all of the recordings necessary!

[rayane-djouah]

PR open: #51725

mind checking if the issue is gone on your side when testing out this branch?

I have tested the branch and confirmed that it resolves the bug 👍 - #51725 (comment)

[Christinadobrzyn]

Update for Melvin Monitoring PR - #51725

[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.60-3 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• fix: App freeze when clearing cache #51725

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

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

• @TMisiukiewicz does not require payment (Contractor)
• @rayane-djouah requires payment automatic offer (Reviewer)
• @Guccio163 does not require payment (Contractor)

[melvin-bot]

@rayane-djouah @Christinadobrzyn @rayane-djouah 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]

[Christinadobrzyn]

moving to daily since the payment date is coming

Payment summary here - #49282 (comment)

@rayane-djouah Do we need a regression test for this?

[rayane-djouah]

BugZero Checklist:

• 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
  • 2b. Reported on staging (deploy blocker)
  • 2c. Reported on a PR
  • 2z. Other:

  Who reported the bug:

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

• 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: feat: Troubleshooting page & resetting Onyx state #35306 (comment)

• 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: N/A

• 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.

• @Christinadobrzyn Create a GH issue for creating/updating the regression test once above steps have been agreed upon.

  Link to issue: https://github.com/Expensify/Expensify/issues/446145

Regression Test Proposal

#### Precondition:

- A "high traffic account" with a substantial number of reports.

#### Test:

1. Navigate to Search -> Chats -> Filters -> From.
2. Scroll through the list of items.
3. Proceed to Settings -> Troubleshoot.
4. Select "Clear cache and restart", then confirm the action.
5. Verify that there is no app freeze during data loading, and ensure that the app remains functional (e.g., you can hover over elements and navigate to other pages without issues).

Do we agree 👍 or 👎

[Christinadobrzyn]

Payment day - no regressions,

Payouts due:

• Reviewer: $250 @rayane-djouah (Paid in upwork - https://www.upwork.com/nx/wm/offer/104197919)

Closing this out as complete