[Network] Messages are sent twice

[isagoico]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Action Performed:

1. Log in to New Expensify with an unstable internet connection
2. Send some messages to an account you have access too. (Preferably you're logged in on another device with)

Expected Result:

Messages sent with an unstable internet connection should be sent without any issues.

Actual Result:

Messages are sent twice when there's unstable internet connection

Workaround:

Unknown.

Platform:

Where is this issue occurring?

• Web
• iOS
• Android
• Desktop App
• Mobile Web

Version Number: 1.0.80-0

Logs: https://stackoverflow.com/c/expensify/questions/4856

Notes/Photos/Videos: Any additional supporting documentation

Expensify/Expensify Issue URL:

View all open jobs on Upwork

---

From @JmillsExpensify https://expensify.slack.com/archives/C01GTK53T8Q/p1626890348078000

When chatting with someone on a slow wifi connection, you get two of every message they send.

[MelvinBot]

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

[MelvinBot]

Triggered auto assignment to @JmillsExpensify (External), see https://stackoverflow.com/c/expensify/questions/8582 for more details.

[JmillsExpensify]

Posted to Upwork here! https://www.upwork.com/jobs/~018c22cb61e93a114c. Make sure to share your technical proposal with us here and a colleague will approve your technical proposal. Thank you!

[Santhosh-Sellavel]

Proposal

The issue happens when the network is offline, retryableRequests are set in ONYX, but not cleared from networkRequestQueue(current queue)

App/src/libs/Network.js

Lines 105 to 117 in ad77386

	// NetInfo tells us whether the app is offline
	if (isOffline) {
	if (!networkRequestQueue.length) {
	return;
	}
	// If we have a request then we need to check if it can be persisted in case we close the tab while offline
	const retryableRequests = _.filter(networkRequestQueue, request => (
	!request.data.doNotRetry && request.data.persist
	));
	Onyx.set(ONYXKEYS.NETWORK_REQUEST_QUEUE, retryableRequests);
	return;
	}

After updating in the ONYX, here queue gets duplicated,

App/src/libs/Network.js

Lines 32 to 45 in ad77386

	Onyx.connect({
	key: ONYXKEYS.NETWORK_REQUEST_QUEUE,
	callback: (persistedRequests) => {
	if (didLoadPersistedRequests || !persistedRequests) {
	return;
	}
	// Merge the persisted requests with the requests in memory then clear out the queue as we only need to load
	// this once when the app initializes
	networkRequestQueue = [...networkRequestQueue, ...persistedRequests];
	didLoadPersistedRequests = true;
	Onyx.set(ONYXKEYS.NETWORK_REQUEST_QUEUE, []);
	},
	});

networkRequestQueue = [...networkRequestQueue, ...persistedRequests];
We don't need to append networkRequestQueue to itself, if the network is offline, persistedRequests will have all requests we need.

This line should be revisited,

App/src/libs/Network.js

Line 35 in ad77386

if (didLoadPersistedRequests || !persistedRequests) {

didLoadPersistedRequests if it gets true once, no more requests will get appended.

[parasharrajat]

We have an existing issue #2451 which solves this problem as well. PR is stalled for that. I will update you here about the PR status.

[thienlnam]

@Santhosh-Sellavel Thank you for the great proposal! The changes look good but it seems like @parasharrajat is fixing this in another PR from fixing another bug so I'm just going to have him assigned to this issue as well.