Skip to content

Commit

Permalink
fix: Firefox LiveReload
Browse files Browse the repository at this point in the history
Firefox infinitely reloads the page as long as `<LiveReload>` is rendering.

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.

Closes #4692
  • Loading branch information
ryanflorence committed Nov 30, 2022
1 parent 3d81516 commit 6f0a855
Showing 1 changed file with 10 additions and 9 deletions.
19 changes: 10 additions & 9 deletions packages/remix-react/components.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -1663,15 +1662,17 @@ export const LiveReload =
config.onOpen();
}
};
ws.onclose = (error) => {
ws.onclose = (event) => {
console.log("Remix dev asset server web socket closed. Reconnecting...");
setTimeout(
() =>
remixLiveReloadConnect({
onOpen: () => window.location.reload(),
}),
1000
);
if (event.code === 1006) {
setTimeout(
() =>
remixLiveReloadConnect({
onOpen: () => window.location.reload(),
}),
1000
);
}
};
ws.onerror = (error) => {
console.log("Remix dev asset server web socket error:");
Expand Down

0 comments on commit 6f0a855

Please sign in to comment.