Improve metro device error connection reporting

Summary: Slightly better error handling, as websockets errors propagated without context

Differential Revision: D29515852

fbshipit-source-id: 1df85977965e061a5e4d76bb22a4a3dfb74b6c04

desktop/app/src/dispatcher/metroDevice.tsx

@@ -80,35 +80,45 @@ export default (store: Store, logger: Logger) => {
     }
 
     if (await isMetroRunning()) {
-      const _ws = new WebSocket(METRO_LOGS_ENDPOINT);
+      try {
+        const _ws = new WebSocket(METRO_LOGS_ENDPOINT);
 
-      _ws.onopen = () => {
+        _ws.onopen = () => {
-        clearTimeout(guard);
-        ws = _ws;
-        registerMetroDevice(ws, store, logger);
-      };
-
-      _ws.onclose = _ws.onerror = () => {
-        if (!unregistered) {
-          unregistered = true;
           clearTimeout(guard);
-          ws = undefined;
+          ws = _ws;
-          destroyDevice(store, logger, METRO_URL);
+          registerMetroDevice(ws, store, logger);
-          scheduleNext();
+        };
-        }
-      };
 
-      const guard = setTimeout(() => {
+        _ws.onclose = _ws.onerror = function (event?: any) {
-        // Metro is running, but didn't respond to /events endpoint
+          if (event?.type === 'error') {
-        store.dispatch(
+            console.error(
-          addErrorNotification(
+              `Failed to connect to Metro on ${METRO_LOGS_ENDPOINT}`,
-            'Failed to connect to Metro',
+              event,
-            `Flipper did find a running Metro instance, but couldn't connect to the logs. Probably your React Native version is too old to support Flipper. Cause: Failed to get a connection to ${METRO_LOGS_ENDPOINT} in a timely fashion`,
+            );
-          ),
+          }
-        );
+          if (!unregistered) {
-        registerMetroDevice(undefined, store, logger);
+            unregistered = true;
-        // Note: no scheduleNext, we won't retry until restart
+            clearTimeout(guard);
-      }, 5000);
+            ws = undefined;
+            destroyDevice(store, logger, METRO_URL);
+            scheduleNext();
+          }
+        };
+
+        const guard = setTimeout(() => {
+          // Metro is running, but didn't respond to /events endpoint
+          store.dispatch(
+            addErrorNotification(
+              'Failed to connect to Metro',
+              `Flipper did find a running Metro instance, but couldn't connect to the logs. Probably your React Native version is too old to support Flipper. Cause: Failed to get a connection to ${METRO_LOGS_ENDPOINT} in a timely fashion`,
+            ),
+          );
+          registerMetroDevice(undefined, store, logger);
+          // Note: no scheduleNext, we won't retry until restart
+        }, 5000);
+      } catch (e) {
+        console.error('Error while setting up Metro websocket connect', e);
+      }
     } else {
       scheduleNext();
     }