Add client logs for different stages

Summary: ^

Reviewed By: antonk52

Differential Revision: D49973541

fbshipit-source-id: 3bac97fb22586cc49e74dd5deceeb5310a1385bc

desktop/flipper-server-client/src/FlipperServerClient.tsx

@@ -69,19 +69,21 @@ export function createFlipperServerWithSocket(
     let connected = false;
 
     socket.addEventListener('open', () => {
+      connected = true;
+      onStateChange(FlipperServerState.CONNECTED);
+
       if (initialConnectionTimeout) {
-        resolve(flipperServer);
         clearTimeout(initialConnectionTimeout);
         initialConnectionTimeout = undefined;
-      }
 
-      onStateChange(FlipperServerState.CONNECTED);
+        resolve(flipperServer);
-      connected = true;
+      }
     });
 
     socket.addEventListener('close', () => {
-      onStateChange(FlipperServerState.DISCONNECTED);
       connected = false;
+      onStateChange(FlipperServerState.DISCONNECTED);
+
       pendingRequests.forEach((r) =>
         r.reject(new Error('flipper-server disconnected')),
       );

desktop/flipper-ui-browser/src/index.tsx

@@ -43,7 +43,7 @@ async function start() {
 
   console.info(
     '[flipper-client][ui-browser] Token is available: ',
-    token?.length,
+    token?.length != 0,
   );
 
   const openPlugin = params.get('open-plugin');
@@ -65,6 +65,7 @@ async function start() {
 
   const searchParams = new URLSearchParams({token: token ?? ''});
 
+  console.info('[flipper-client][ui-browser] Create WS client');
   const flipperServer = await createFlipperServer(
     location.hostname,
     parseInt(location.port, 10),
@@ -72,18 +73,23 @@ async function start() {
     (state: FlipperServerState) => {
       switch (state) {
         case FlipperServerState.CONNECTING:
+          console.info('[flipper-client] Connecting to server');
           window.flipperShowMessage?.('Connecting to server...');
           break;
         case FlipperServerState.CONNECTED:
+          console.info('[flipper-client] Connection established with server');
           window.flipperHideMessage?.();
           break;
         case FlipperServerState.DISCONNECTED:
+          console.info('[flipper-client] Disconnected from server');
           window.flipperShowMessage?.('Waiting for server...');
           break;
       }
     },
   );
 
+  console.info('[flipper-client][ui-browser] WS client connected');
+
   flipperServer.on('server-log', (logEntry) => {
     console[logEntry.type](
       `[${logEntry.namespace}] (${new Date(
@@ -92,9 +98,17 @@ async function start() {
     );
   });
 
+  console.info('[flipper-client][ui-browser] Waiting for server connection');
   await flipperServer.connect();
+  console.info(
+    '[flipper-client][ui-browser] Connected to server, get configuration',
+  );
   const flipperServerConfig = await flipperServer.exec('get-config');
 
+  console.info(
+    '[flipper-client][ui-browser] Configuration obtained, initialise render host',
+  );
+
   initializeRenderHost(flipperServer, flipperServerConfig);
   initializePWA();
 
@@ -102,6 +116,8 @@ async function start() {
   // eslint-disable-next-line import/no-commonjs
   require('flipper-ui-core').startFlipperDesktop(flipperServer);
   window.flipperHideMessage?.();
+
+  console.info('[flipper-client][ui-browser] UI initialised');
 }
 
 start().catch((e) => {