[Awaiting Payment 29th May] [$500] Wrong message appears when the Expensify site is going down

[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?: y
Reproducible in production?: y
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: @flodnv
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1709063517335079

Action Performed:

1. Open any chat or go to sign in page when the site is down

Expected Result:

When the site is down we should show: We might have a problem. Check out status.expensify.com.

Actual Result:

You appear to be offline appears confusing the user that they have a network problem when really it's the site.

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

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01ed912188740cf497
• Upwork Job ID: 1764575263440932864
• Last Price Increase: 2024-04-24

[melvin-bot]

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

[melvin-bot]

Triggered auto assignment to @NickTooker (Waiting for copy), see https://stackoverflow.com/c/expensify/questions/7025/ for more details.

[ghost]

Proposal

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

Wrong message appears when the Expensify site is going down

What is the root cause of that problem?

New Feature but as discussed in the comment this is what we need to do.

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

Firstly, we need to fix the logical error of using the backend endpoint for determining isOffline :

1. We will remove the backend ping logic from here :

App/src/libs/NetworkConnection.ts

Lines 84 to 97 in da76977

	reachabilityUrl: `${CONFIG.EXPENSIFY.DEFAULT_API_ROOT}api?command=Ping`,
	reachabilityMethod: 'GET',
	reachabilityTest: (response) => {
	if (!response.ok) {
	return Promise.resolve(false);
	}
	return response
	.json()
	.then((json) => Promise.resolve(json.jsonCode === 200))
	.catch(() => Promise.resolve(false));
	},
	// If a check is taking longer than this time we're considered offline
	reachabilityRequestTimeout: CONST.NETWORK.MAX_PENDING_TIME_MS,

and after removing the backend ping logic.
2. We need to add a new method that seperates the backend ping logic seperately like this :

async function testBackendReachability() {
  try {
    const response = await fetch(`${CONFIG.EXPENSIFY.DEFAULT_API_ROOT}api?command=Ping`);
    return response.ok; 
  } catch {
    return false;
  }
}

So, that we have a seperate logic to ping backend seperately now.

3. Now, since we have seperated backend pinging logic seperately. Here :
   

   App/src/libs/NetworkConnection.ts

   Lines 11 to 12 in da76977

   	let isOffline = false;
   	let hasPendingNetworkCheck = false;

   
   we can add a new boolean Onyx property called isBackendUnavailable and initially its value will be false. So that we don't directly say that backend is unavailable.

let isBackendUnavailable = false;

4. Then, we need to update the setOfflineStatus function here :
   

   App/src/libs/NetworkConnection.ts

   Lines 36 to 46 in da76977

   	function setOfflineStatus(isCurrentlyOffline: boolean): void {
   	NetworkActions.setIsOffline(isCurrentlyOffline);
   	// When reconnecting, ie, going from offline to online, all the reconnection callbacks
   	// are triggered (this is usually Actions that need to re-download data from the server)
   	if (isOffline && !isCurrentlyOffline) {
   	triggerReconnectionCallbacks('offline status changed');
   	}
   	isOffline = isCurrentlyOffline;
   	}

to also set isBackendUnavailable in Onyx like this :

function setOfflineStatus(isCurrentlyOffline: boolean) {

  // Existing logic to set isOffline
  
  const isBackendUp = await testBackendReachability();
  isBackendUnavailable = !isBackendUp;

  // Dispatch new action to set isBackendUnavailable in Onyx
}

5. In NetInfo.addEventListener i.e. here :
   

   App/src/libs/NetworkConnection.ts

   Lines 103 to 111 in da76977

   	NetInfo.addEventListener((state) => {
   	Log.info('[NetworkConnection] NetInfo state change', false, {...state});
   	if (shouldForceOffline) {
   	Log.info('[NetworkConnection] Not setting offline status because shouldForceOffline = true');
   	return;
   	}
   	setOfflineStatus(state.isInternetReachable === false);
   	});
   	}

we need to call testBackendReachability() on network changes like this :

NetInfo.addEventListener(state => {

  await setOfflineStatus(state.isInternetReachable === false);

})

This will help us to separates the offline and backend unavailable logic, removing the dependency on the backend endpoint for determining offline status.

Also, at last in en.ts file we can add a new key and value for saying this We might have a problem. Check out status.expensify.com when the Expensify App is literally down.

What alternative solutions did you explore? (Optional)

N/A

[NickTooker]

How about:

We might have a problem. Check out status.expensify.com.

[neonbhai]

Proposal

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

Wrong message appears when the Expensify site is going down

What is the root cause of that problem?

We need to update the Copy in Offline Indicator here:

App/src/components/OfflineIndicator.tsx

Line 49 in 39a257d

<Text style={[styles.ml3, styles.chatItemComposeSecondaryRowSubText]}>{translate('common.youAppearToBeOffline')}</Text>

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

We will be creating a new key in src/languages according to the approved copy:

offlineMessage: "We might have a problem. Check out "

Then use it here:

App/src/components/OfflineIndicator.tsx

Line 49 in 39a257d

<Text style={[styles.ml3, styles.chatItemComposeSecondaryRowSubText]}>{translate('common.youAppearToBeOffline')}</Text>

We will be rendering the link in the approved copy with the TextLink component:

<TextLink onPress={() => Link.openExternalLink('https://status.expensify.com/')}>
  status.expensify.com
</TextLink>

[NickTooker]

This is the approved copy @neonbhai.

We might have a problem. Check out status.expensify.com.

[trjExpensify]

Sounds like we have the copy, adding External to get a C+ assigned.

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

Current assignee @trjExpensify is eligible for the NewFeature assigner, not assigning anyone new.

[trjExpensify]

We haven't implemented this feature previously, so adding New feature label. I've also updated the OP with the expected results copy.

[ghost]

Updated Proposal @trjExpensify

[melvin-bot]

@trjExpensify, @aldo-expensify, @tienifr, @DylanDylann 6 days overdue. This is scarier than being forced to listen to Vogon poetry!

[melvin-bot]

@trjExpensify, @aldo-expensify, @tienifr, @DylanDylann Now this issue is 8 days overdue. Are you sure this should be a Daily? Feel free to change it!

[trjExpensify]

Hit staging yesterday melv, chill.

[flodnv]

I did notice the change working last week 😅 👍 🙇

[mvtglobally]

Issue not reproducible during KI retests. (First week)

[melvin-bot]

@trjExpensify, @aldo-expensify, @tienifr, @DylanDylann Whoops! This issue is 2 days overdue. Let's get this updated quick!

[trjExpensify]

Not overdue, Melv. Awaiting payment on the 29th.

[trjExpensify]

Payment summary for tomorrow as follows:

• $500 to @tienifr for the implementation
• $500 to @DylanDylann for the C+ review

[mvtglobally]

Issue not reproducible during KI retests. (Second week)

[trjExpensify]

Offers sent!

[tienifr]

Thanks @trjExpensify I accepted the offer!

[trjExpensify]

Paid, @tienifr! @DylanDylann, I think you need to accept? 🤔

[DylanDylann]

@trjExpensify Accepted! Thanks

[trjExpensify]

Paid!