Broken socket reconnection on browser forward/back navigation

[mateusz-slab]

Environment

• Elixir version: Elixir 1.18.2 (compiled with Erlang/OTP 27)
• Phoenix version: phoenix 1.7.17
• Operating system: MacOS X, Chrome

Actual behavior

We observe that the phoenix websocket connection is not re-established on forward/back navigation in user browser. While there's logic related to forward/back navigation in javascript client it seems to work incorrectly.

The pageshow event handler calls this.connect() that returns early if there's an active connection - if(this.conn){ return }.
The pagehide event is supposed to clear the this.conn field by calling this.disconnect() that calls this.teardown. Unfortunately, the code that actually clears the this.conn field is executed asynchronously. As user has already navigated out of the page the the code is not executed before pageshow event.

The behavior probably vary between browsers. I've tested on Chrome 133.0.6943.55.

Expected behavior

After forward/back navigation in user browser the websocket connection should be established.

[SteffenDE]

@mateusz-slab can you please try

{:phoenix, github: "phoenixframework/phoenix", branch: "sd-issue-6103-assets", override: true}

That should resolve the issue, but I don't have an application to test at hand at the moment, so confirmation would be appreciated!

[mateusz-slab]

Hi @SteffenDE and thank you for acting on this!

I am afraid the fix is not sufficient. The problem with this change is that on pageshow we call this.connect() that synchronously updates the Socket state, e.g. sets this.conn in transportConnect. As logic in pagehide is mostly asynchronous we end up with teardown acting on the newly created this.conn.

I am not sure what the proper solution is. Perhaps we should wait for the disconnect to finish prior to running the connect logic in pageshow?

[SteffenDE]

@mateusz-slab I added another check for the connectClock in teardown, so it should exit early when it detects that there was a new call to connect: 883ef3c

Can you test again please?

[chrismccord]

ping @mateusz-slab

[mateusz-slab]

Hi @chrismccord, thanks for the new version. I will try it tomorrow or in two days.

[mateusz-slab]

I confirm that the version with this commit reconnects successfully after forward/back navigation 🎉 . Thank you for acting on this!