[HOLD for payment 2024-08-07] [$250] App crashes when opening a emoji picker

[m-natarajan]

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:
Reproducible in staging?: needs reproduction
Reproducible in production?: needs reproduction
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: @rayane-djouah
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1720566364883959

Action Performed:

1. Type a message in composer
2. Open emoji picker

Expected Result:

App does not crash

Actual Result:

App crash

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

logs-2024-07-12 19_15_44.066.txt

2024-07-12_12-15-09.mp4

Screen.Recording.2024-07-09.at.11.41.05.PM.mov

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01bf8f915a1c60a468
• Upwork Job ID: 1812970166625272038
• Last Price Increase: 2024-07-15
• Automatic offers:
• rayane-djouah | Reviewer | 103148312
• ShridharGoel | Contributor | 103148313

Issue Owner

Current Issue Owner: @

Issue Owner

Current Issue Owner: @puneetlath

[MelvinBot]

This has been labelled "Needs Reproduction". Follow the steps here: https://stackoverflowteams.com/c/expensify/questions/16989

[melvin-bot]

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

[kabeer95]

Problem Statement: The Expensify app crashes when a user attempts to open the emoji picker, resulting in a poor user experience and potential loss of data.

Root Cause: The root cause of the problem is likely due to a compatibility issue between the emoji picker library and the Expensify app's tech stack, or a memory leak caused by the emoji picker's implementation.

Changes to Solve the Problem: To solve the problem, I propose the following changes:

Update Emoji Picker Library: Update the emoji picker library to the latest version, which may include bug fixes and performance improvements.
javascript

// Update emoji picker library to latest version
npm install emoji-picker-react@latest
Optimize Emoji Picker Implementation: Optimize the emoji picker implementation to reduce memory usage and improve performance.
javascript

// Optimize emoji picker implementation
import EmojiPicker from 'emoji-picker-react';

const EmojiComponent = () => {
const [emoji, setEmoji] = useState('');

const handleEmojiSelect = (emoji) => {
setEmoji(emoji);
};

return (
<EmojiPicker
onEmojiSelect={handleEmojiSelect}
disableSearchBar={true} // Disable search bar to reduce memory usage
/>
);
};
Implement Error Handling: Implement error handling to catch and handle any exceptions that may occur when opening the emoji picker.

javascript

// Implement error handling
try {
// Open emoji picker
} catch (error) {
console.error('Error opening emoji picker:', error);
// Handle error and provide feedback to user
}
Alternative Solutions Explored:

Use a Different Emoji Picker Library: Explore alternative emoji picker libraries, such as react-emoji-picker, to see if they provide better compatibility and performance.
Implement a Custom Emoji Picker: Implement a custom emoji picker solution using native components, which may provide better performance and compatibility.
Disable Emoji Picker on Problematic Devices: Disable the emoji picker on devices or platforms where the crash is most frequent, to prevent the crash from occurring.

[abzokhattab]

Unable to reproduce it on the latest main

[ShridharGoel]

Proposal

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

App crashes when opening a emoji picker.

What is the root cause of that problem?

I get the same issue on one of my accounts.

This happens when there's a frequently used emoji which we pick from Onyx, but it has no corresponding mapping in emojiCodeTableWithSkinTones.

Because of which emojiWithSkinTones becomes undefined.

App/src/libs/EmojiUtils.ts

Lines 37 to 45 in eb83ae1

	if (!item.code) {
	emoji = {...emoji, ...findEmojiByName(item.name)};
	}
	if (!item.name) {
	emoji = {...emoji, ...findEmojiByCode(item.code)};
	}
	const emojiWithSkinTones = Emojis.emojiCodeTableWithSkinTones[emoji.code];
	return {...emojiWithSkinTones, count: item.count, lastUpdatedAt: item.lastUpdatedAt};
	})

This leads to emoji being undefined in the below line:

App/src/libs/EmojiUtils.ts

Line 203 in eb83ae1

if ('header' in emoji) {

This can also happen when there's a specific unicode of an emoji which is not available in our mapping.

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

Add a check after this:

if (!emojiWithSkinTones) {
    return null
}

We can also consider adding an undefined and null check in this logic (and at similar places in EmojiUtils).

We might also need to expand the emoji mapping table.

[ShridharGoel]

Assuming @rayane-djouah is going to be the C+ here, can you check my proposal?

[rayane-djouah]

Still able to reproduce. @puneetlath - can we make it External?

Screen.Recording.2024-07-15.at.10.13.45.AM.mov

[ShridharGoel]

Test branch to check the fix @rayane-djouah : https://github.com/ShridharGoel/ExpensifyApp/tree/test-emoji

[abzokhattab]

Hey @rayane-djouah i am not able to reproduce it on any account, is there any other steps that I should make to encounter the issue?

[mallenexpensify]

Unable to reproduce on staging and new.expensify.com today, ¯_(ツ)_/¯ (was able to last week).

[rayane-djouah]

Reproduction steps:

1. Go to https://staging.new.expensify.com/home
2. Tap on a report
3. Write a message and include ♤ White Spade Suit Emoji (Insert it from device keyboard or by copy paste) and send it
4. Open the app emoji picker
5. Notice that the app crashes

I think that this is reproducible with more special emojis, not just the spade emoji

[melvin-bot]

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

[rayane-djouah]

@ShridharGoel's proposal looks good to me.

🎀👀🎀 C+ reviewed

[melvin-bot]

📣 @rayane-djouah 🎉 An offer has been automatically sent to your Upwork account for the Reviewer role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job

[melvin-bot]

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

[rayane-djouah]

Still not able to reproduce on staging, Chrome, am I holding it wrong?

2024-07-16_15-51-50.mp4

The emoji should be inserted from the device keyboard or by copy/paste, not from the app's emoji picker/suggestions.

[rayane-djouah]

@ShridharGoel - Friendly reminder. Thanks!

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

• Fix crash on missing emoji mapping #45860

If no regressions arise, payment will be issued on 2024-08-07. 🎊

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

• @ShridharGoel requires payment automatic offer (Contributor)
• @rayane-djouah requires payment automatic offer (Reviewer)
• @rayane-djouah requires payment automatic offer (Reviewer)

[melvin-bot]

BugZero Checklist: The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

• [@rayane-djouah] The PR that introduced the bug has been identified. Link to the PR:
• [@rayane-djouah] 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:
• [@rayane-djouah] A discussion in #expensify-bugs 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:
• [@rayane-djouah] Determine if we should create a regression test for this bug.
• [@rayane-djouah] If we decide to create a regression test for the bug, please propose the regression test steps to ensure the same bug will not reach production again.
• [@puneetlath] Link the GH issue for creating/updating the regression test once above steps have been agreed upon:

[puneetlath]

@ShridharGoel has been paid. @rayane-djouah bump on the checklist for you.

[rayane-djouah]

• The PR that introduced the bug has been identified. Link to the PR: [TS migration] Migrate 'EmojiUtils.js' lib to TypeScript #28589
• 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/28589/files#r1708986740
• A discussion in #expensify-bugs 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
• Determine if we should create a regression test for this bug. Yes
• If we decide to create a regression test for the bug, please propose the regression test steps to ensure the same bug will not reach production again.

Regression Test Proposal

1. Go to Expensify app.
2. Open any chat.
3. Write a message and include special emojis like ♤ emoji (Insert it from device keyboard or by copy paste) and send it.
4. Open the app emoji picker.
5. The app should not crash.

Do we agree 👍 or 👎

[puneetlath]

Regression test issue: https://github.com/Expensify/Expensify/issues/418908

All paid. Thanks everyone!