Fix connection drop is not detected

ios/Podfile.lock

@@ -445,7 +445,7 @@ PODS:
     - React-Core
   - react-native-image-picker (4.1.2):
     - React-Core
-  - react-native-netinfo (7.1.3):
+  - react-native-netinfo (8.0.0):
     - React-Core
   - react-native-pdf (6.2.2):
     - React-Core
@@ -934,7 +934,7 @@ SPEC CHECKSUMS:
   react-native-document-picker: 772d04a4bc5c35da9abe27b08ac271420ae3f9ef
   react-native-flipper: cd9eabd8917104c1bbdca2621717cdca3b2addef
   react-native-image-picker: f45729c43d4f854508ab25c0d0f0f711a2a8a267
-  react-native-netinfo: 3a61a486f2329f5884753fd5bab21450a535d97c
+  react-native-netinfo: 0124c0695373fce63cea24aeebb97ab2d237947a
   react-native-pdf: 4b5a9e4465a6a3b399e91dc4838eb44ddf716d1f
   react-native-performance: 8edfa2bbc9a2af4a02f01d342118e413a95145e0
   react-native-plaid-link-sdk: 9e0ebdaed648a237b36d5f6f6292b5147af92da7

package.json

@@ -44,7 +44,7 @@
     "@react-native-community/cli": "6.2.0",
     "@react-native-community/clipboard": "^1.5.1",
     "@react-native-community/datetimepicker": "^3.5.2",
-    "@react-native-community/netinfo": "^7.1.3",
+    "@react-native-community/netinfo": "^8.0.0",
     "@react-native-community/progress-bar-android": "^1.0.4",
     "@react-native-community/progress-view": "^1.2.3",
     "@react-native-firebase/analytics": "^12.3.0",

src/CONST.js

@@ -306,6 +306,7 @@ const CONST = {
         },
         MAX_REQUEST_RETRIES: 10,
         PROCESS_REQUEST_DELAY_MS: 1000,
+        MAX_PENDING_TIME_MS: 10 * 1000,
     },
     HTTP_STATUS_CODE: {
         SUCCESS: 200,

src/libs/Network.js

@@ -28,6 +28,7 @@ const [onResponse, registerResponseHandler] = createCallback();
 const [onError, registerErrorHandler] = createCallback();
 const [onRequestSkipped, registerRequestSkippedHandler] = createCallback();
 const [getLogger, registerLogHandler] = createCallback();
+const [recheckConnectivity, registerConnectionCheckCallback] = createCallback();
 
 /**
  * @param {Object} request
@@ -42,8 +43,12 @@ function processRequest(request) {
         ? enhanceParameters(request.command, request.data)
         : request.data;
 
+    // If request is still in processing after this time, we might be offline
+    const timerId = setTimeout(recheckConnectivity, CONST.NETWORK.MAX_PENDING_TIME_MS);
+
     onRequest(request, finalParameters);
-    return HttpUtils.xhr(request.command, finalParameters, request.type, request.shouldUseSecure);
+    return HttpUtils.xhr(request.command, finalParameters, request.type, request.shouldUseSecure)
+        .finally(() => clearTimeout(timerId));
 }
 
 function processPersistedRequestsQueue() {
@@ -231,6 +236,8 @@ function processNetworkRequestQueue() {
         processRequest(queuedRequest)
             .then(response => onResponse(queuedRequest, response))
             .catch((error) => {
+                recheckConnectivity();
+
                 // When the request did not reach its destination add it back the queue to be retried
                 const shouldRetry = lodashGet(queuedRequest, 'data.shouldRetry');
                 if (shouldRetry && error.name !== CONST.ERROR.REQUEST_CANCELLED) {
@@ -362,4 +369,5 @@ export {
     setIsReady,
     registerRequestSkippedHandler,
     registerLogHandler,
+    registerConnectionCheckCallback,
 };

src/libs/NetworkConnection.js

@@ -1,15 +1,19 @@
 import _ from 'underscore';
-import NetInfo from './NetInfo';
+import NetInfo from '@react-native-community/netinfo';
 import AppStateMonitor from './AppStateMonitor';
 import promiseAllSettled from './promiseAllSettled';
 import Log from './Log';
-import * as Network from './actions/Network';
+import * as NetworkActions from './actions/Network';
+import * as NetowrkLib from './Network';
+import CONFIG from '../CONFIG';
+import CONST from '../CONST';
 
 // NetInfo.addEventListener() returns a function used to unsubscribe the
 // listener so we must create a reference to it and call it in stopListeningForReconnect()
 let unsubscribeFromNetInfo;
 let unsubscribeFromAppState;
 let isOffline = false;
+let hasPendingNetworkCheck = true;
 
 // Holds all of the callbacks that need to be triggered when the network reconnects
 const reconnectionCallbacks = [];
@@ -19,9 +23,9 @@ const reconnectionCallbacks = [];
  */
 const triggerReconnectionCallbacks = _.throttle((reason) => {
     Log.info(`[NetworkConnection] Firing reconnection callbacks because ${reason}`);
-    Network.setIsLoadingAfterReconnect(true);
+    NetworkActions.setIsLoadingAfterReconnect(true);
     promiseAllSettled(_.map(reconnectionCallbacks, callback => callback()))
-        .then(() => Network.setIsLoadingAfterReconnect(false));
+        .then(() => NetworkActions.setIsLoadingAfterReconnect(false));
 }, 5000, {trailing: false});
 
 /**
@@ -31,7 +35,7 @@ const triggerReconnectionCallbacks = _.throttle((reason) => {
  * @param {Boolean} isCurrentlyOffline
  */
 function setOfflineStatus(isCurrentlyOffline) {
-    Network.setIsOffline(isCurrentlyOffline);
+    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)
@@ -47,21 +51,40 @@ function setOfflineStatus(isCurrentlyOffline) {
  * internet connectivity or not. This is more reliable than the Pusher
  * `disconnected` event which takes about 10-15 seconds to emit.
  */
-function listenForReconnect() {
-    Log.info('[NetworkConnection] listenForReconnect called');
+function subscribeToNetInfo() {
+    // Calling NetInfo.configure (re)checks current state. We use it to force a recheck whenever we (re)subscribe
+    NetInfo.configure({
+        // By default, for web (including Electron) NetInfo uses `/` for `reachabilityUrl`
+        // When App is served locally or from Electron this would respond with OK even with no internet
+        // Using API url ensures reachability is tested over internet
+        reachabilityUrl: CONFIG.EXPENSIFY.URL_API_ROOT,
+        reachabilityTest: response => Promise.resolve(response.status === 200),
 
-    unsubscribeFromAppState = AppStateMonitor.addBecameActiveListener(() => {
-        triggerReconnectionCallbacks('app became active');
+        // If a check is taking longer than this time we're considered offline
+        reachabilityRequestTimeout: CONST.NETWORK.MAX_PENDING_TIME_MS,
     });
 
     // Subscribe to the state change event via NetInfo so we can update
     // whether a user has internet connectivity or not.
     unsubscribeFromNetInfo = NetInfo.addEventListener((state) => {
-        Log.info(`[NetworkConnection] NetInfo isConnected: ${state && state.isConnected}`);
-        setOfflineStatus(!state.isConnected);
+        Log.info('[NetworkConnection] NetInfo state change', false, state);
+        setOfflineStatus(state.isInternetReachable === false);
+
+        // When internet state is indeterminate a check is already running. Set the flag to prevent duplicate checks
+        hasPendingNetworkCheck = state.isInternetReachable === null;
     });
 }
 
+function listenForReconnect() {
+    Log.info('[NetworkConnection] listenForReconnect called');
+
+    unsubscribeFromAppState = AppStateMonitor.addBecameActiveListener(() => {
+        triggerReconnectionCallbacks('app became active');
+    });
+
+    subscribeToNetInfo();
+}
+
 /**
  * Tear down the event listeners when we are finished with them.
  */
@@ -86,6 +109,19 @@ function onReconnect(callback) {
     reconnectionCallbacks.push(callback);
 }
 
+function recheckNetworkConnection() {
+    if (hasPendingNetworkCheck) {
+        return;
+    }
+
+    Log.info('[NetworkConnection] recheck NetInfo');
+    hasPendingNetworkCheck = true;
+    unsubscribeFromNetInfo();
+    subscribeToNetInfo();
+}
+
+NetowrkLib.registerConnectionCheckCallback(recheckNetworkConnection);
+
 export default {
     setOfflineStatus,
     listenForReconnect,