[$500] Web - Chat - Console error "Uncaught TypeError" shows up when sending a message

[kbecciv]

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: 1.3.96.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:

Issue found when executing PR #29561

Action Performed:

1. Navigate to staging.new.expensify.com
2. Go to any chat.
3. Send a text.

Expected Result:

No console error shows up.

Actual Result:

Console error "Uncaught TypeError" shows up.

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

Bug6266672_1699316082231.20231107_074315.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~0189b4f1ab639c484e
• Upwork Job ID: 1721795764122386432
• Last Price Increase: 2023-11-07
• Automatic offers:
• s-alves10 | Contributor | 27553747
• Ollyws | Contributor | 27880003

[OSBotify]

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

[melvin-bot]

Triggered auto assignment to @robertjchen (Engineering), see https://stackoverflow.com/c/expensify/questions/4319 for more details.

[s-alves10]

Proposal

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

Console error shows when sending a message

What is the root cause of that problem?

App/src/components/InvertedFlatList/index.js

Line 27 in d5725c5

const listRef = React.createRef();

We should not use React.createRef in a function component because it recreates a new ref every time it is rendered

This is the root cause

Note: Why does this bug appears recently? Even though listRef is changed on every render, the listRef.current has the instance of FlatList after render. The change of listRef triggers the effect callback and so the innerRef.current has the instance of the FlatList. But introduction of MVCPFlatList in PR #28793 made things change.

Let's take a look at this component, Below is the ref callback function

App/src/components/FlatList/MVCPFlatList.js

Lines 147 to 156 in da2c79e

	(newRef) => {
	// Make sure to only call refs and re-attach listeners if the node changed.
	if (newRef == null || newRef === scrollRef.current) {
	return;
	}
	setMergedRef(newRef);
	prepareForMaintainVisibleContentPosition();
	setupMutationObserver();
	},

As you can see, we do nothing if newRef === scrollRef.current. scrollRef doesn't change once it's created. So this code segment runs only on mount. This means forwardedRef.current is set only once on mount. But as mentioned above, forwardedRef changes on every render and its current property has null value starting from the second render. That's why this potential issue appears recently.

I don't think the logic of onRef of MVCPFlatList is wrong because ref itself(not current) doesn't change once it's created. We should fix the use of React.createRef

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

Simply updating the above code to

    const listRef = useRef();

would solve the issue

Or we can remove the listRef from the component because it is not needed

Result

bandicam.2023-11-07.10-04-12-297.mp4

What alternative solutions did you explore? (Optional)

[robertjchen]

@s-alves10 Hm, looks like that change went in 3 months ago. Any idea why it would be erroring now and not earlier? 🤔

[s-alves10]

Proposal

Updated

@robertjchen

I added the answer to your question #30935 (comment)

[melvin-bot]

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

[robertjchen]

Perfect, thanks for the explanation- let's move forward with your proposal.

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

⚠️ Looks like this issue was linked to a Deploy Blocker here

If you are the assigned CME please investigate whether the linked PR caused a regression and leave a comment with the results.

If a regression has occurred and you are the assigned CM follow the instructions here.

If this regression could have been avoided please consider also proposing a recommendation to the PR checklist so that we can avoid it in the future.

[robertjchen]

Hm, I'm confused- what's the expected behavior here?

[Ollyws]

I think @s-alves10 was just referring to the fact that Melvin never added the Awaiting payment label or related automation.

[s-alves10]

@robertjchen

Could you please check on the payment status? The PR was merged into production 3 weeks ago

[s-alves10]

@robertjchen Pay day for this issue would be 22 Nov.

[robertjchen]

Ah, I see it now- #30962 was the fix but this issue was not properly automated for compensation. Will handle this, apologies for the delay.

[melvin-bot]

Triggered auto assignment to @puneetlath (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[melvin-bot]

Bug0 Triage Checklist (Main S/O)

• This "bug" occurs on a supported platform (ensure Platforms in OP are ✅)
• This bug is not a duplicate report (check E/App issues and #expensify-bugs)
  • If it is, comment with a link to the original report, close the issue and add any novel details to the original issue instead
• This bug is reproducible using the reproduction steps in the OP. S/O
  • If the reproduction steps are clear and you're unable to reproduce the bug, check with the reporter and QA first, then close the issue.
  • If the reproduction steps aren't clear and you determine the correct steps, please update the OP.
• This issue is filled out as thoroughly and clearly as possible
  • Pay special attention to the title, results, platforms where the bug occurs, and if the bug happens on staging/production.
• I have reviewed and subscribed to the linked Slack conversation to ensure Slack/Github stay in sync

[melvin-bot]

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

[robertjchen]

Is the original offer on Upwork still valid? 🤔

[s-alves10]

@robertjchen Yes. I accepted the original offer. Thanks

[Ollyws]

Offer isn't available anymore for me.

[puneetlath]

@s-alves10 has been paid.

@Ollyws new offer is here. Please ping me here when you've accepted it.

[Ollyws]

@puneetlath Accepted, thanks!

[puneetlath]

All paid. Thanks y'all!