Bandit + Phoenix LiveView on Safari iOS Fails to Reconnect

[aarroisi]

Environment

Elixir version: 1.16.2
Phoenix version: 1.7.12
Phoenix LiveView version: 0.20.14
Bandit version: 1.5.2
Thousand Island version: 1.3.5
Operating system: iOS 17.0.3
Browser: Safari

Actual behavior

I open Safari, viewing a LiveView page that's connected via websocket. Everything works normal. Then I return to home screen, wait for about a minute, then open Safari again. I saw the client-error with the usual "We can't find the internet" for about 10 seconds, then server-error with the usual "Something went wrong" for about 5 seconds, then the page refreshes automatically.

This error shows in the Safari console (I open it using Developer mode, connected to a Mac):
WebSocket connection to 'wss://example-aarroisi.fly.dev/live/websocket?_csrf_token=SihGLVAoM2hsVUo-PDwLHgcbJnU1LxItzB0GfBt93x8HyOjPVA_AQFDW&_track_static%5B0%5D=https%3A%2F%2Fexample-aarroisi.fly.dev%2Fassets%2Fapp-a5fe870326318b359c192ce86b220d13.css%3Fvsn%3Dd&_track_static%5B1%5D=https%3A%2F%2Fexample-aarroisi.fly.dev%2Fassets%2Fapp-a7b7a1bb2570182b93179aee6863d1bb.js%3Fvsn%3Dd&_mounts=0&_live_referer=undefined&vsn=2.0.0' failed: The operation couldn’t be completed. Operation timed out

I also saw the app is trying to connect using longpoll, but eventually failed and refreshed the page.

You can view the issue at play here: https://youtu.be/MxfFKilcA_k.

It's a very vanilla project generated with mix phx.new command, and using generated live view from generic mix phx.gen.live command.
The source code is here: https://github.com/aarroisi/example-aarroisi.
You can try it yourself at https://example-aarroisi.fly.dev/posts.

After I switched it from Bandit to Cowboy, the problem vanishes completely and working as expected. So I guess the problem is at Bandit on iOS Safari.

Expected behavior

When I try it in Chrome iOS, this problem doesn't show up. In Chrome, after waking up from sleep, the client error message only show up for about half a second, then it reconnects without refresh. I expect this should also happen in Safari.

[mtrudel]

Thanks for the report! I'll get a chance to look at this later this week.

Having a repro case provided makes my job about 1000x easier. Thanks for that!

[mtrudel]

I can repro this on your instance, but I'm unable to repro this locally or via a new fly instance.

In the cases where I can't repro, this seems to be happening:

• When Safari goes into the background, one or two future heartbeats go back and forth via the websocket
• When Safari comes back, a connection close frame is received from the server, and Safari starts a new websocket without issue

When it goes wrong, what seems to happen is that Safari doesn't get a response back when trying to create that new websocket connection, falls back to long polling, which also fails. At this point, signs would point to something funny with your fly config, or perhaps fly itself. As I'm not able to repro this myself, I wonder if you have any special fly config in that respect, or if you can provide both your fly logs and screenshots of your safari inspector (along with the 'preview' panes for any of the websocket connections displaying the back and forth websocket messages with timestamps).