From 28f803c6da8ebcf497941007da0f4cb71e5bf423 Mon Sep 17 00:00:00 2001
From: Ryan Florence <rpflorence@gmail.com>
Date: Wed, 30 Nov 2022 16:04:01 -0700
Subject: [PATCH] fix: Firefox LiveReload

Firefox infinitely reloads the page as long as `<LiveReload>` is rendering.

Closes #4692
---
 .changeset/thin-oranges-boil.md     | 15 +++++++++++++++
 packages/remix-react/components.tsx | 21 +++++++++++----------
 2 files changed, 26 insertions(+), 10 deletions(-)
 create mode 100644 .changeset/thin-oranges-boil.md

diff --git a/.changeset/thin-oranges-boil.md b/.changeset/thin-oranges-boil.md
new file mode 100644
index 00000000000..c3c1017cfa5
--- /dev/null
+++ b/.changeset/thin-oranges-boil.md
@@ -0,0 +1,15 @@
+---
+"@remix-run/react": patch
+---
+
+Fixed a problem with live reload and firefox infinitely reloading the page
+
+The problem is:
+
+1. Firefox is calling `ws.onclose` immediately upon connecting (?!)
+2. Then we’re trying to reconnect, and upon reconnection, we reload the page.
+3. Firefox then calls `ws.onclose` again after reconnecting and the loop starts over
+
+This fix is to check `event.code === 1006` before actually trying to reconnect and the reload the page. 1006 means the connection was closed abnormally (https://www.rfc-editor.org/rfc/rfc6455#section-7.4.1). In our case, that means the server was shut down in local dev and then the socket can reconnect again when the server is back up.
+
+It’s unclear to me why Firefox is calling `onclose` immediately upon connecting to the web socket, but it does.
diff --git a/packages/remix-react/components.tsx b/packages/remix-react/components.tsx
index 45e4a9efc1d..ee9f7504374 100644
--- a/packages/remix-react/components.tsx
+++ b/packages/remix-react/components.tsx
@@ -1646,7 +1646,6 @@ export const LiveReload =
                   let socketPath = protocol + "//" + host + ":" + ${String(
                     port
                   )} + "/socket";
-
                   let ws = new WebSocket(socketPath);
                   ws.onmessage = (message) => {
                     let event = JSON.parse(message.data);
@@ -1663,15 +1662,17 @@ export const LiveReload =
                       config.onOpen();
                     }
                   };
-                  ws.onclose = (error) => {
-                    console.log("Remix dev asset server web socket closed. Reconnecting...");
-                    setTimeout(
-                      () =>
-                        remixLiveReloadConnect({
-                          onOpen: () => window.location.reload(),
-                        }),
-                      1000
-                    );
+                  ws.onclose = (event) => {
+                    if (event.code === 1006) {
+                      console.log("Remix dev asset server web socket closed. Reconnecting...");
+                      setTimeout(
+                        () =>
+                          remixLiveReloadConnect({
+                            onOpen: () => window.location.reload(),
+                          }),
+                        1000
+                      );
+                    }
                   };
                   ws.onerror = (error) => {
                     console.log("Remix dev asset server web socket error:");