Feature: Display backend unreachability message

src/CONST.ts

@@ -521,6 +521,7 @@ const CONST = {
     EMPTY_ARRAY,
     EMPTY_OBJECT,
     USE_EXPENSIFY_URL,
+    STATUS_EXPENSIFY_URL: 'https://status.expensify.com',
     GOOGLE_MEET_URL_ANDROID: 'https://meet.google.com',
     GOOGLE_DOC_IMAGE_LINK_MATCH: 'googleusercontent.com',
     IMAGE_BASE64_MATCH: 'base64',
@@ -950,13 +951,14 @@ const CONST = {
         MAX_RETRY_WAIT_TIME_MS: 10 * 1000,
         PROCESS_REQUEST_DELAY_MS: 1000,
         MAX_PENDING_TIME_MS: 10 * 1000,
+        REACHABILITY_TIMEOUT_MS: 60 * 1000,
         MAX_REQUEST_RETRIES: 10,
     },
     WEEK_STARTS_ON: 1, // Monday
     DEFAULT_TIME_ZONE: {automatic: true, selected: 'America/Los_Angeles'},
     DEFAULT_ACCOUNT_DATA: {errors: null, success: '', isLoading: false},
     DEFAULT_CLOSE_ACCOUNT_DATA: {errors: null, success: '', isLoading: false},
-    DEFAULT_NETWORK_DATA: {isOffline: false},
+    DEFAULT_NETWORK_DATA: {isOffline: false, isBackendReachable: true},
     FORMS: {
         LOGIN_FORM: 'LoginForm',
         VALIDATE_CODE_FORM: 'ValidateCodeForm',

src/Expensify.tsx

@@ -138,8 +138,10 @@ function Expensify({
         // Initialize this client as being an active client
         ActiveClientManager.init();
 
-        // Used for the offline indicator appearing when someone is offline
-        NetworkConnection.subscribeToNetInfo();
+        // Used for the offline indicator appearing when someone is offline or backend is unreachable
+        const unsubscribeNetInfo = NetworkConnection.subscribeToNetInfo();
+
+        return () => unsubscribeNetInfo();
     }, []);
 
     useEffect(() => {

src/components/OfflineIndicator.tsx

@@ -7,9 +7,11 @@ import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import variables from '@styles/variables';
+import CONST from '@src/CONST';
 import Icon from './Icon';
 import * as Expensicons from './Icon/Expensicons';
 import Text from './Text';
+import TextLink from './TextLink';
 
 type OfflineIndicatorProps = {
     /** Optional styles for container element that will override the default styling for the offline indicator */
@@ -23,7 +25,7 @@ function OfflineIndicator({style, containerStyles}: OfflineIndicatorProps) {
     const theme = useTheme();
     const styles = useThemeStyles();
     const {translate} = useLocalize();
-    const {isOffline} = useNetwork();
+    const {isOffline, isBackendReachable} = useNetwork();
     const {isSmallScreenWidth} = useWindowDimensions();
 
     const computedStyles = useMemo((): StyleProp<ViewStyle> => {
@@ -34,7 +36,7 @@ function OfflineIndicator({style, containerStyles}: OfflineIndicatorProps) {
         return isSmallScreenWidth ? styles.offlineIndicatorMobile : styles.offlineIndicator;
     }, [containerStyles, isSmallScreenWidth, styles.offlineIndicatorMobile, styles.offlineIndicator]);
 
-    if (!isOffline) {
+    if (!isOffline && isBackendReachable) {
         return null;
     }
 
@@ -46,7 +48,25 @@ function OfflineIndicator({style, containerStyles}: OfflineIndicatorProps) {
                 width={variables.iconSizeSmall}
                 height={variables.iconSizeSmall}
             />
-            <Text style={[styles.ml3, styles.chatItemComposeSecondaryRowSubText]}>{translate('common.youAppearToBeOffline')}</Text>
+            <Text style={[styles.ml3, styles.chatItemComposeSecondaryRowSubText]}>
+                {
+                    // If we reversed the ternary, unreachability message would always show even when offline
+                    isOffline ? (
+                        translate('common.youAppearToBeOffline')
+                    ) : (
+                        <>
+                            {translate('common.weMightHaveProblem')}
+                            <TextLink
+                                href={CONST.STATUS_EXPENSIFY_URL}
+                                style={[styles.chatItemComposeSecondaryRowSubText, styles.link]}
+                            >
+                                {new URL(CONST.STATUS_EXPENSIFY_URL).host}
+                            </TextLink>
+                            .
+                        </>
+                    )
+                }
+            </Text>
         </View>
     );
 }

src/hooks/useNetwork.ts

@@ -6,13 +6,13 @@ type UseNetworkProps = {
     onReconnect?: () => void;
 };
 
-type UseNetwork = {isOffline: boolean};
+type UseNetwork = {isOffline: boolean; isBackendReachable: boolean};
 
 export default function useNetwork({onReconnect = () => {}}: UseNetworkProps = {}): UseNetwork {
     const callback = useRef(onReconnect);
     callback.current = onReconnect;
 
-    const {isOffline} = useContext(NetworkContext) ?? CONST.DEFAULT_NETWORK_DATA;
+    const {isOffline, isBackendReachable} = useContext(NetworkContext) ?? CONST.DEFAULT_NETWORK_DATA;
     const prevOfflineStatusRef = useRef(isOffline);
     useEffect(() => {
         // If we were offline before and now we are not offline then we just reconnected
@@ -29,5 +29,5 @@ export default function useNetwork({onReconnect = () => {}}: UseNetworkProps = {
         prevOfflineStatusRef.current = isOffline;
     }, [isOffline]);
 
-    return {isOffline: isOffline ?? false};
+    return {isOffline: isOffline ?? false, isBackendReachable: isBackendReachable ?? true};
 }

src/languages/en.ts

@@ -266,6 +266,7 @@ export default {
         conciergeHelp: 'Please reach out to Concierge for help.',
         maxParticipantsReached: ({count}: MaxParticipantsReachedParams) => `You've selected the maximum number (${count}) of participants.`,
         youAppearToBeOffline: 'You appear to be offline.',
+        weMightHaveProblem: 'We might have a problem. Check out ',
         thisFeatureRequiresInternet: 'This feature requires an active internet connection to be used.',
         areYouSure: 'Are you sure?',
         verify: 'Verify',

src/languages/es.ts

@@ -256,6 +256,7 @@ export default {
         conciergeHelp: 'Por favor, contacta con Concierge para obtener ayuda.',
         maxParticipantsReached: ({count}: MaxParticipantsReachedParams) => `Has seleccionado el número máximo (${count}) de participantes.`,
         youAppearToBeOffline: 'Parece que estás desconectado.',
+        weMightHaveProblem: 'Peude que te tengamos un problema. Echa un vistazo a ',
         thisFeatureRequiresInternet: 'Esta función requiere una conexión a Internet activa para ser utilizada.',
         areYouSure: '¿Estás seguro?',
         verify: 'Verifique',

src/libs/NetworkConnection.ts

@@ -39,6 +39,7 @@ function setOfflineStatus(isCurrentlyOffline: boolean): void {
     // 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) {
+        NetworkActions.setIsBackendReachable(true);
         triggerReconnectionCallbacks('offline status changed');
     }
 
@@ -68,46 +69,56 @@ Onyx.connect({
 });
 
 /**
- * Set up the event listener for NetInfo to tell whether the user has
- * internet connectivity or not. This is more reliable than the Pusher
- * `disconnected` event which takes about 10-15 seconds to emit.
+ * Monitor internet connectivity and perform periodic backend reachability checks
  */
-function subscribeToNetInfo(): void {
-    // Note: We are disabling the configuration for NetInfo when using the local web API since requests can get stuck in a 'Pending' state and are not reliable indicators for "offline".
+function subscribeToNetInfo() {
+    let backendReachabilityCheckInterval: NodeJS.Timeout;
+    // Note: We are disabling the reachability check when using the local web API since requests can get stuck in a 'Pending' state and are not reliable indicators for "offline".
     // If you need to test the "recheck" feature then switch to the production API proxy server.
     if (!CONFIG.IS_USING_LOCAL_WEB) {
-        // Calling NetInfo.configure (re)checks current state. We use it to force a recheck whenever we (re)subscribe
-        NetInfo.configure({
-            // By default, NetInfo uses `/` for `reachabilityUrl`
-            // When App is served locally (or from Electron) this address is always reachable - even offline
+        // Set interval to periodically (re)check backend status
+        backendReachabilityCheckInterval = setInterval(() => {
+            // Offline status also implies backend unreachability
+            if (isOffline) {
+                return;
+            }
             // Using the API url ensures reachability is tested over internet
-            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,
-        });
+            fetch(`${CONFIG.EXPENSIFY.DEFAULT_API_ROOT}api?command=Ping`, {
+                method: 'GET',
+                cache: 'no-cache',
+            })
+                .then((response) => {
+                    if (!response.ok) {
+                        return Promise.resolve(false);
+                    }
+                    return response
+                        .json()
+                        .then((json) => Promise.resolve(json.jsonCode === 200))
+                        .catch(() => Promise.resolve(false));
+                })
+                .then(NetworkActions.setIsBackendReachable)
+                .catch(() => NetworkActions.setIsBackendReachable(false));
+        }, CONST.NETWORK.REACHABILITY_TIMEOUT_MS);
     }
 
-    // Subscribe to the state change event via NetInfo so we can update
-    // whether a user has internet connectivity or not.
-    NetInfo.addEventListener((state) => {
+    /**
+     * Set up the event listener for NetInfo to tell whether the user has
+     * internet connectivity or not. This is more reliable than the Pusher
+     * `disconnected` event which takes about 10-15 seconds to emit.
+     */
+    const unsubscribeNetInfo = 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) === false);
     });
+
+    return () => {
+        clearInterval(backendReachabilityCheckInterval);
+        unsubscribeNetInfo();
+    };
 }
 
 function listenForReconnect() {

src/libs/actions/Network.ts

@@ -1,6 +1,10 @@
 import Onyx from 'react-native-onyx';
 import ONYXKEYS from '@src/ONYXKEYS';
 
+function setIsBackendReachable(isBackendReachable: boolean) {
+    Onyx.merge(ONYXKEYS.NETWORK, {isBackendReachable});
+}
+
 function setIsOffline(isOffline: boolean) {
     Onyx.merge(ONYXKEYS.NETWORK, {isOffline});
 }
@@ -20,4 +24,4 @@ function setShouldFailAllRequests(shouldFailAllRequests: boolean) {
     Onyx.merge(ONYXKEYS.NETWORK, {shouldFailAllRequests});
 }
 
-export {setIsOffline, setShouldForceOffline, setShouldFailAllRequests, setTimeSkew};
+export {setIsBackendReachable, setIsOffline, setShouldForceOffline, setShouldFailAllRequests, setTimeSkew};

src/types/onyx/Network.ts

@@ -2,6 +2,8 @@ type Network = {
     /** Is the network currently offline or not */
     isOffline: boolean;
 
+    isBackendReachable: boolean;
+
     /** Should the network be forced offline */
     shouldForceOffline?: boolean;