LiveView Page Reload

Many a LiveView sites I am visiting, they tend to get reloaded midway - and - going to the top of the page. What could be the issue?
I thought, I am missing something fundamental - and - mistake is at my end. However, I observed that many a sites, while scrolling down - suddenly go to the top of the page - and - the cycle repeats.
Home · ElixirConf® 2021 - Same thing is happening here as well?
Is it like, connection loss - and - on reconnect the socket is reloading page?
Anyone experienced this?

Can’t reproduce at my iPhone with the mentioned website. Toggled airplane mode with a delay of one minute. Nothing happened, all good.

I can’t reproduce it on Safari (MacOS). It’s probably a problem with your client/connection.

Try opening console and see if there is any error there that might indicate something.

Also, check your browser version and update it if possible.

I have noticed this as well. Check your logs, in my case the check_origin test failed on production which lead to this behavior :slight_smile:

I tried with different browsers - edge, brave and chrome - all latest versions. Problem is repeating.
In the console, two warnings - platform field is missing.
No idea, why the page is refreshing. Actually very annoying user experience - while you are reading, the page goes to the top again.

1 Like

Use http://websocketstest.com/ for checking your WebSocket connection.


This is the response I got. Is it due to HTTP Proxy?

Maybe related Could not check origin Phoenix LiveView
Like @kwando wrote check your logs and your check_origin setting

No.

Previously, I encountered a similar problem.

But, apparently, you are not in my case.

Hope that others can help you. I have no ideas. :sweat_smile:

1 Like

Well, https://2021.elixirconf.com/ is Elixir Conference site. Must have been done using LiveView.

In the recent 2-3 weeks, I have seen atleast 3-4 Phoenix LiveView sites exhibiting similar behavior. Though, I am not suggesting this is LiveView bug - but I am curious why it is happening with LiveView sites. Most of the times, I am browsing them using Brave browser.
I thought it would be better if we identify the issue - and - highlight it somewhere with possible fixes. Otherwise, a none tech-user who is browsing through the site might get really annoyed with what is happening.
Let us hope, more users who experienced such behavior speak out.

1 Like

If you search other threads you’ll find a common theme with Brave showing hanging websockets connections in the 101 HTTP upgrade. This is maybe the fifth report I’ve seen from a brave user, and someone found a brave issue where this was supposedly fixed and released, but I haven’t verified on what Brave versions. So as far as brave goes, there seems to be something specific to it and websockets. I haven’t seen anything yet to suggest it is an issue on our side.

1 Like

@chrismccord Thanks for taking pain to explain. Yes, even I have read some of those issues. Hence, highlighted the browser.
I did not suggest that it is an issue on our side.
Just to confess - when I was developing locally, when I used brave to browse http://localhost:4000, I found the same issue. I initially thought I messed up LiveView setup - and - spent atleast a couple of days verifying my setup :slight_smile: Once I changed the browser, suddenly no issues!
However, this time, for the above site, I found the same issue while browsing with Microsoft Edge. Well, both browsers use V8 as underlying engine - may be the issue is common?
I just wanted to highlight the issue.

I’m not sure if this at all related but I had problem with WebSocket connections when using localhost. Phoenix LiveView is now... live! - #30 by wanton7
It was fixed by using http://127.0.0.1:4000 instead

I also experienced the same issue with 2021.elixirconf.com. I was in the speakers section and it jumped back to the top. I scrolled down to the speakers section again and it jumped again to the top. My internet connection was very slow at that moment.
I was using Chrome on Mac.

I just tested http://2021.elixirconf.com and I’m getting lot of Multiple IDs detected: information-heading. Ensure unique element ids. printed in the console when scrolling down. Could that be the reason?

Edit: Was using Chrome on Windows 10.

I noticed that liveSocket is available as global variable at http://2021.elixirconf.com so I could do liveSocket.disconnect() in console to disconnect websocket and then liveSocket.connect() to connect it again. It doesn’t scroll me to the top of the page at least with Chrome on Windows 10.

1 Like

I’ve done bit of testing with https://www.elixirconf.com. If I first do liveSocket.enableLatencySim(2000) in the console then do liveSocket.disconnect() I get this error to console phx-FqeNru74oQEXXjvB error: view crashed - undefined. Then when you do liveSocket.connect() phx-FqeNru74oQEXXjvB mount: is printed to console. There messages weren’t printed to console before I enabled latency sim and when I disabled latency sim they weren’t printed again. But maybe enabling latency sim enables these messages. Sadly I don’t there is any other way to test slow WebSocket connection. I forcefully disconnected WebSocket connection multiple times with Sysinternals TCPView and everytime websocket was connected again and page didn’t scroll to the top.

If I don’t do anything, I mean not call anything and just use site normally and just start scrolling down console starts getting these errors


That Multiple IDs detected probably comes from Morphdom.

I tried lot of stuff but wasn’t able to get scroll to top problem. But that site seems have some issues because there are duplicate ids attributes according to that message. So if something odd is happening it’s really hard to tell if it’s an LiveView issue or just issue with that site.

1 Like