From 9ca8bee208b7bfe2b8c0dab8eb4b79688a0c84bc Mon Sep 17 00:00:00 2001
From: Michel Weststrate <mweststrate@fb.com>
Date: Mon, 5 Jul 2021 08:39:01 -0700
Subject: [PATCH] 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 | 62 +++++++++++++---------
 1 file changed, 36 insertions(+), 26 deletions(-)

diff --git a/desktop/app/src/dispatcher/metroDevice.tsx b/desktop/app/src/dispatcher/metroDevice.tsx
index 1cff56c81..f5e8692db 100644
--- a/desktop/app/src/dispatcher/metroDevice.tsx
+++ b/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 = () => {
-        clearTimeout(guard);
-        ws = _ws;
-        registerMetroDevice(ws, store, logger);
-      };
-
-      _ws.onclose = _ws.onerror = () => {
-        if (!unregistered) {
-          unregistered = true;
+        _ws.onopen = () => {
           clearTimeout(guard);
-          ws = undefined;
-          destroyDevice(store, logger, METRO_URL);
-          scheduleNext();
-        }
-      };
+          ws = _ws;
+          registerMetroDevice(ws, store, logger);
+        };
 
-      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);
+        _ws.onclose = _ws.onerror = function (event?: any) {
+          if (event?.type === 'error') {
+            console.error(
+              `Failed to connect to Metro on ${METRO_LOGS_ENDPOINT}`,
+              event,
+            );
+          }
+          if (!unregistered) {
+            unregistered = true;
+            clearTimeout(guard);
+            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();
     }