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.