[$250] Messages are not showing in the LHN when someone sends it

[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:
Reproducible in staging?: needs reproduction
Reproducible in production?: needs reprroduction
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: @cead22
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1720045541007929

Action Performed:

1. Have NewDot open as user A
2. Send a message from user B to user A

Expected Result:

UserB's message should update in the LHN

Actual Result:

Message does not appear in the LHN and user A has to switch to another chat and open the chat report from B to appear the message

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

SS before chat :

When opening chat with B

After opening the chat

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01263f65273fb956e2
• Upwork Job ID: 1812617761124974581
• Last Price Increase: 2024-07-14
• Automatic offers:
• dukenv0307 | Reviewer | 103235910

Issue Owner

Current Issue Owner: @lakchote

[MelvinBot]

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

[melvin-bot]

Triggered auto assignment to @jliexpensify (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: Messages are not displaying in the LHN (Left Hand Navigation) when someone sends a message, resulting in users missing important notifications and updates.

Root Cause: The root cause of the problem is likely due to an issue with the message rendering logic, WebSocket connection, or data storage.

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

1. Update Message Rendering Logic Update the message rendering logic to ensure that new messages are correctly displayed in the LHN. This includes reviewing the message filtering and sorting logic to ensure that all messages are being displayed correctly.

// Update message rendering logic
const MessageList = () => {
const messages = useSelector((state) => state.messages);
const dispatch = useDispatch();

useEffect(() => {
dispatch(fetchMessages()); // Fetch messages on component mount
}, [dispatch]);

return (

{messages.map((message) => (

))}

);
};
2. Verify WebSocket Connection Verify that the WebSocket connection is established correctly and messages are being received from the server. This includes reviewing the WebSocket connection logic and error handling to ensure that messages are not being lost or dropped.

// Verify WebSocket connection
const socket = new WebSocket('wss://example.com/ws');

socket.onmessage = (event) => {
console.log(Received message: ${event.data});
// Handle incoming message and update LHN
};

socket.onopen = () => {
console.log('WebSocket connection established');
};

socket.onerror = (event) => {
console.error('WebSocket error:', event);
};
3. Check Data Storage Check that messages are being stored correctly in the database and retrieved correctly by the application. This includes reviewing the database schema and query logic to ensure that messages are being stored and retrieved correctly.

-- Check message storage in database
SELECT * FROM messages WHERE recipient_id = [user_id];
Alternative Solutions Explored:

Use a Different Message Rendering Library: Explore alternative message rendering libraries, such as react-chat-elements, to see if they provide better performance and reliability.
Implement Message Queueing: Implement message queueing to ensure that messages are processed and displayed in the correct order, even in cases of high traffic or network latency.
Add Error Handling: Add error handling to the message rendering logic to catch and display any errors that may occur, providing a better user experience.

[jliexpensify]

I can reproduce this with only one person in my LHN - @SofiedeVreese. All of her messages don't appear unless I click out of her chat and back in.

I think this will be hard to accurately repro, but it can be reproduced.

[melvin-bot]

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

[melvin-bot]

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