[lib] Retry Tunnelbroker connection after closing

Summary:
Details in [[ https://linear.app/comm/issue/ENG-9246/mobile-app-gets-disconnected-from-tunnelbroker#comment-110ab1c6 | ENG-9246 ]].
Added a retry counter variable and a timeout.
- The effect hook has dependency on this variable
- It is increased after each retry
- Retry has to have interval to avoid infinite effect loop. Defaulted to 5s

Previously, effect wasn't triggered if `socketState.connected` was already `false`. Change `false -> false` doesn't trigger the hook, so socket wasn't recreated.

Test Plan:
- On native: Turned airplane mode on/off.
- On web: turned wifi on/off.
Observed console logs. The connection was successfully restored after network coming back.

Reviewers: kamil, tomek

Reviewed By: kamil

Subscribers: ashoat

Differential Revision: https://phab.comm.dev/D13382

lib/tunnelbroker/tunnelbroker-context.js

@@ -62,6 +62,7 @@ type TunnelbrokerSocketState =
     }
   | {
       +connected: false,
+      +retryCount: number,
     };
 
 type TunnelbrokerContextType = {
@@ -87,6 +88,8 @@ type Props = {
   +secondaryTunnelbrokerConnection?: SecondaryTunnelbrokerConnection,
 };
 
+const clientTunnelbrokerSocketReconnectDelay = 2000; // ms
+
 function getTunnelbrokerDeviceType(): TunnelbrokerDeviceTypes {
   return isWebPlatform(getConfig().platformDetails.platform) ? 'web' : 'mobile';
 }
@@ -142,7 +145,7 @@ function TunnelbrokerProvider(props: Props): React.Node {
     React.useRef<?TunnelbrokerInitializationMessage>(null);
 
   const [socketState, setSocketState] = React.useState<TunnelbrokerSocketState>(
-    { connected: false },
+    { connected: false, retryCount: 0 },
   );
   const listeners = React.useRef<Set<TunnelbrokerSocketListener>>(new Set());
   const socket = React.useRef<?WebSocket>(null);
@@ -165,7 +168,7 @@ function TunnelbrokerProvider(props: Props): React.Node {
     stopHeartbeatTimeout();
     heartbeatTimeoutID.current = setTimeout(() => {
       socket.current?.close();
-      setSocketState({ connected: false });
+      setSocketState({ connected: false, retryCount: 0 });
     }, tunnelbrokerHeartbeatTimeout);
   }, [stopHeartbeatTimeout]);
 
@@ -220,10 +223,25 @@ function TunnelbrokerProvider(props: Props): React.Node {
 
         tunnelbrokerSocket.onclose = () => {
           // this triggers the effect hook again and reconnect
-          setSocketState({ connected: false });
+          setSocketState(prev => ({
+            connected: false,
+            retryCount: prev.connected ? 0 : prev.retryCount,
+          }));
           onClose?.();
           socket.current = null;
           console.log('Connection to Tunnelbroker closed');
+          setTimeout(() => {
+            if (!socket.current && initMessage) {
+              console.log(
+                'Retrying Tunnelbroker connection. Attempt:',
+                socketState.retryCount + 1,
+              );
+              setSocketState(prev => ({
+                connected: false,
+                retryCount: prev.connected ? 0 : prev.retryCount + 1,
+              }));
+            }
+          }, clientTunnelbrokerSocketReconnectDelay);
         };
         tunnelbrokerSocket.onerror = e => {
           console.log('Tunnelbroker socket error:', e.message);
@@ -272,7 +290,7 @@ function TunnelbrokerProvider(props: Props): React.Node {
                 'received ConnectionInitializationResponse with status: Success for already connected socket',
               );
             } else {
-              setSocketState({ connected: false });
+              setSocketState({ connected: false, retryCount: 0 });
               console.log(
                 'creating session with Tunnelbroker error:',
                 message.status.data,
@@ -320,6 +338,7 @@ function TunnelbrokerProvider(props: Props): React.Node {
     onClose,
     createInitMessage,
     socketState.connected,
+    socketState.retryCount,
   ]);
 
   const sendMessage: (request: DeviceToTunnelbrokerRequest) => Promise<void> =

native/push/push-handler.react.js

@@ -141,6 +141,7 @@ type Props = {
       }
     | {
         +connected: false,
+        +retryCount: number,
       },
 };
 type State = {