[HOLD for payment 2024-05-08] [$250] App Crashes When Exiting and Re-entering Thread in Offline

[m-natarajan]

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: v1.4.67-0
Reproducible in staging?: y
Reproducible in production?: n
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
Expensify/Expensify Issue URL:
Issue reported by: Applause internal team
Slack conversation:

Action Performed:

1, sign in with your Gmail account> Navigate to any chat and set the status to offline.
2, Send a message and enter the thread.
3, Click on the three dots menu and select "Leave thread."
4, Re-enter the thread.
5, Switch status to online.

Expected Result:

App functions normally without crashing

Actual Result:

App crashes upon transitioning from offline to online after leaving and re-entering the thread.

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

Add any screenshot/video evidence

Bug6463543_1714202185410.Screen_Recording_2024-04-26_at_11.46.00_PM.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01cd50bce934ebc9f8
• Upwork Job ID: 1784870016982994944
• Last Price Increase: 2024-04-29
• Automatic offers:
• akinwale | Reviewer | 0
• gijoe0295 | Contributor | 0

Issue Owner

Current Issue Owner: @CortneyOfstad

[melvin-bot]

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

[melvin-bot]

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

[m-natarajan]

@arosiclair FYI I haven't added the External label as I wasn't 100% sure about this issue. Please take a look and add the label if you agree it's a bug and can be handled by external contributors.

[m-natarajan]

We think this bug might be related to #vip-vsb

[gijoe0295]

Proposal

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

App crashes upon transitioning from offline to online after leaving and re-entering the thread.

What is the root cause of that problem?

Regression of #41087.

We fallback undefined avatar to {}:

App/src/libs/SidebarUtils.ts

Line 415 in c6f599a

result.icons = ReportUtils.getIcons(report, personalDetails, UserUtils.getAvatar(personalDetail?.avatar ?? {}, personalDetail?.accountID), '', -1, policy);

Later we do not include empty source object check to determine whether to use fallback avatar:

App/src/components/Avatar.tsx

Line 84 in fa29a35

const useFallBackAvatar = imageError || source === Expensicons.FallbackAvatar || !source;

Then we used {} as a React component:

App/src/components/ImageSVG/index.tsx

Line 6 in 82b76c1

const ImageSvgComponent = src as React.FC<SvgProps>;

And thus got Element type is invalid: expected a string (for built-in components) or a class/function but got: object error.

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

Do not fallback to {}:

App/src/libs/SidebarUtils.ts

Line 415 in c6f599a

result.icons = ReportUtils.getIcons(report, personalDetails, UserUtils.getAvatar(personalDetail?.avatar ?? {}, personalDetail?.accountID), '', -1, policy);

What alternative solutions did you explore? (Optional)

Or add a check for empty source object to use fallback avatar:

App/src/components/Avatar.tsx

Line 84 in fa29a35

const useFallBackAvatar = imageError || source === Expensicons.FallbackAvatar || !source;