search

phoenixframework / phoenix

Peace of mind from prototype to production
https://www.phoenixframework.org
MIT License
21.41k stars 2.87k forks source link

"We can't find the internet" flashes on Page transitions and reloads on Firefox 106.0.5 on Phoenix 1.7-rx.0 #5102

Closed lschmierer closed 1 year ago

lschmierer commented 2 years ago

An error flash with the message "We can't find the internet" flashes for sub-second on page transitions and reloads in a new Phoenix project. I can only reproduce this on Firefox.

To reproduce:

Environment

Expected behavior

No error flash is shown.

Actual behavior

An error flash with the message "We can't find the internet" is shown.

nskins commented 2 years ago

The error flash also appears briefly when you successfully submit the form on the Register and Login pages (clicking the "Create an account" or "Sign In" buttons). It stays around a little longer in these cases so this is actually where I noticed it first. I can verify that it also shows up for me in the cases described by @lschmierer.

Also using Firefox.

KungPaoChicken commented 1 year ago

I can also reproduce this behaviour.

Fix

Change line 407 in socket.js within Socket.onConnClose():

const isFirefoxCloseEvent = event.code === 1001 && event.isTrusted;
if (!isFirefoxCloseEvent) {
  this.triggerChanError();
}

This is my first time looking into Phoenix internals, and I am not sure about other cases where the same event is triggered (e.g. server failure, see explanation below) and the original behaviour is desired, or how this affect the other transports. Feel free to start a PR :)

Explanation

When the user navigates away from the page, Firefox fires a CloseEvent which triggers onConnClose(), which ends with a phx-disconnected class. I couldn't reproduce the browser event in Google Chrome 107.0.5304.107.

CloseEvent.code is 1001 which means:

The endpoint is going away, either because of a server failure or because the browser is navigating away from the page that opened the connection.

I stumbled upon Event.isTrusted by accident, it helps with differentiating a browser/user event from one triggered by a script.

Edit: To separate server failure from browser navigation, a reason could be provided, but that probably needs coordination between server and client.

How did I get there?

The flash is shown on phx-disconnect, so I looked at the built app.js on things that could add the class, and tried to isolate the caller using console.log() since the inspector clears on page change and I don't know another way. It ends up at onConnClose(). Printing the event on console (with console.log(JSON.parse(JSON.stringify(event))); per MDN) only gave me Object { isTrusted: true }. this.conn refers to global.WebSocket in my case, so I looked up WebSocket events and isTrusted on MDN, and there you go :)

shamanime commented 1 year ago

@KungPaoChicken that was a very nice explanation.

By the way, you can set the inspector's console to "persist logs" so it is not cleared when the page changes. On Firefox it's on the "Console Settings" gear icon on the top-right of the Console tab. (if you were talking about the browser inspector, that is)

jbosse commented 1 year ago

I also just came across this in Edge and also was able to reproduce in Chrome Version 107.0.5304.110 (Official Build) (arm64)

KungPaoChicken commented 1 year ago

I couldn't reproduce it visually or by logging on Blink-based browsers on x64, could it be OS/architecture-related? The WebSocket close event is logged by Phoenix as transport close and I only found those on Firefox so far. Logs below are made with 'persist logs' (thanks @shamanime!)

Environment

Setup

  1. Generate project inside the installer/ directory
  2. Generate auth (mix phx.gen.auth Accounts User users)
  3. Set up LiveSocket logging in app.js: let liveSocket = new LiveSocket("/live", Socket, {params: {_csrf_token: csrfToken}, logger: console.log})
  4. Start server: iex -S mix phx.server
  5. Go to register page (The logs start from here)
  6. Click on Register link on top
  7. Click on Log in link on top

Google Chrome Version 107.0.5304.122 (Official Build) (64-bit)

Navigated to http://localhost:4000/users/register
socket.js:245 push lv:phx-Fyu4HXWev24ThQCl phx_join (4, 4) {redirect: undefined, url: 'http://localhost:4000/users/register', params: {…}, session: 'SFMyNTY.g2gDaAJhBXQAAAAIZAACaWRtAAAAFHBoeC1GeXU0SF…ABUYA.LIxxJ8LEeKj8h93wZGu_qD_dzHRS1V6qAeXM6jZQ_w4', static: 'SFMyNTY.g2gDaAJhBXQAAAADZAAKYXNzaWduX25ld2wAAAABZA…AFRgA.DxYV9MOS93ep_LFGFJO4OmdCYebPjwDX5VX9a1mlgak', …}
socket.js:245 transport connected to ws://localhost:4000/live/websocket?_csrf_token=DRd8ShZmbDU5ETccNVxCJXJoHHk0KzUdfH0rx_TWrNqxp92NFYT8PYXz&_track_static%5B0%5D=http%3A%2F%2Flocalhost%3A4000%2Fassets%2Fapp.css&_track_static%5B1%5D=http%3A%2F%2Flocalhost%3A4000%2Fassets%2Fapp.js&_mounts=0&_live_referer=undefined&vsn=2.0.0 undefined
socket.js:245 receive ok lv:phx-Fyu4HXWev24ThQCl phx_reply (4) {response: {…}, status: 'ok'}
utils.js:28 phx-Fyu4HXWev24ThQCl mount:  -  {0: {…}, 1: {…}, 2: {…}, 3: {…}, s: Array(5)}
Navigated to http://localhost:4000/users/log_in
socket.js:245 push lv:phx-Fyu4HnwP6EV5PgRB phx_join (4, 4) {redirect: undefined, url: 'http://localhost:4000/users/log_in', params: {…}, session: 'SFMyNTY.g2gDaAJhBXQAAAAIZAACaWRtAAAAFHBoeC1GeXU0SG…AAVGA.ALfuP3iy2oHif-aMo89_w-uervWd7jbm4XJV04oPxKA', static: 'SFMyNTY.g2gDaAJhBXQAAAADZAAKYXNzaWduX25ld2wAAAABZA…AFRgA.cChR75LDoq0BlzTu6oU1FwWZJN5K0v7cPbyvt4bjgTw', …}
socket.js:245 transport connected to ws://localhost:4000/live/websocket?_csrf_token=ARkvVx13UAokGB8AIh9JDlBmJzgjQBkOjFcosNhhoGYdgz9edWoyG2ti&_track_static%5B0%5D=http%3A%2F%2Flocalhost%3A4000%2Fassets%2Fapp.css&_track_static%5B1%5D=http%3A%2F%2Flocalhost%3A4000%2Fassets%2Fapp.js&_mounts=0&_live_referer=undefined&vsn=2.0.0 undefined
socket.js:245 receive ok lv:phx-Fyu4HnwP6EV5PgRB phx_reply (4) {response: {…}, status: 'ok'}
utils.js:28 phx-Fyu4HnwP6EV5PgRB mount:  -  {0: {…}, 1: {…}, 2: {…}, 3: {…}, s: Array(5)}

Microsoft Edge Version 107.0.1418.56 (Official build) (64-bit)

Navigated to http://localhost:4000/users/register
socket.js:245 push lv:phx-Fyu4KQxhy1aRWQFl phx_join (4, 4) {redirect: undefined, url: 'http://localhost:4000/users/register', params: {…}, session: 'SFMyNTY.g2gDaAJhBXQAAAAIZAACaWRtAAAAFHBoeC1GeXU0S1…ABUYA.ya7xcMvIjvmI9CoDt52xbrV_PZWXw6H1vA9a0-7duMU', static: 'SFMyNTY.g2gDaAJhBXQAAAADZAAKYXNzaWduX25ld2wAAAABZA…AFRgA.KrP6mAjjw5MkmyS0bvIOn1d0a85Cmj6dYnEi9Z6wbJs', …}
socket.js:245 transport connected to ws://localhost:4000/live/websocket?_csrf_token=HA8iGRYdLgEAW3k0UVUfJRd_fVV-BA5mMKu_Tzhjpn7p04ydsFHa-4D0&_track_static%5B0%5D=http%3A%2F%2Flocalhost%3A4000%2Fassets%2Fapp.css&_track_static%5B1%5D=http%3A%2F%2Flocalhost%3A4000%2Fassets%2Fapp.js&_mounts=0&_live_referer=undefined&vsn=2.0.0 undefined
socket.js:245 receive ok lv:phx-Fyu4KQxhy1aRWQFl phx_reply (4) {response: {…}, status: 'ok'}
utils.js:28 phx-Fyu4KQxhy1aRWQFl mount:  -  {0: {…}, 1: {…}, 2: {…}, 3: {…}, s: Array(5)}
Navigated to http://localhost:4000/users/log_in
socket.js:245 push lv:phx-Fyu4KX0bDTSs2QGl phx_join (4, 4) {redirect: undefined, url: 'http://localhost:4000/users/log_in', params: {…}, session: 'SFMyNTY.g2gDaAJhBXQAAAAIZAACaWRtAAAAFHBoeC1GeXU0S1…AAVGA.a-nuMa0be0vLNdOR-IS-yZH8GGcvlWOjW3NQCIOVH8Y', static: 'SFMyNTY.g2gDaAJhBXQAAAADZAAKYXNzaWduX25ld2wAAAABZA…AFRgA.kuMFANS1WJQBXQ2BFCvHBnzwWPvRndB-jmucG3kTLjs', …}
socket.js:245 transport connected to ws://localhost:4000/live/websocket?_csrf_token=I3wHIwkfIRkZfi0GJVI_FCpyYl0WQywOr8PeKxgriKcBD3YUNKWiEsfX&_track_static%5B0%5D=http%3A%2F%2Flocalhost%3A4000%2Fassets%2Fapp.css&_track_static%5B1%5D=http%3A%2F%2Flocalhost%3A4000%2Fassets%2Fapp.js&_mounts=0&_live_referer=undefined&vsn=2.0.0 undefined
socket.js:245 receive ok lv:phx-Fyu4KX0bDTSs2QGl phx_reply (4) {response: {…}, status: 'ok'}
utils.js:28 phx-Fyu4KX0bDTSs2QGl mount:  -  {0: {…}, 1: {…}, 2: {…}, 3: {…}, s: Array(5)}

Mozilla Firefox 107.0 (64-bit)

Navigated to http://localhost:4000/users/register
transport close 
close { target: WebSocket, isTrusted: true, wasClean: true, code: 1001, reason: "", srcElement: WebSocket, currentTarget: WebSocket, eventPhase: 2, bubbles: false, cancelable: false, … }
socket.js:245:29
channel error lv:phx-Fyu4EKHWjp4wUAFi undefined socket.js:245:29
push lv:phx-Fyu4EZOvMoBRggAk phx_join (4, 4) 
Object { redirect: undefined, url: "http://localhost:4000/users/register", params: {…}, session: "SFMyNTY.g2gDaAJhBXQAAAAIZAACaWRtAAAAFHBoeC1GeXU0RVpPdk1vQlJnZ0FrZAAMbGl2ZV9zZXNzaW9uaAJkACFyZWRpcmVjdF9pZl91c2VyX2lzX2F1dGhlbnRpY2F0ZWRuCACZcMcE6LcrF2QACnBhcmVudF9waWRkAANuaWxkAAhyb290X3BpZGQAA25pbGQACXJvb3Rfdmlld2QAJUVsaXhpci5EZXZBcHBXZWIuVXNlclJlZ2lzdHJhdGlvbkxpdmVkAAZyb3V0ZXJkABdFbGl4aXIuRGV2QXBwV2ViLlJvdXRlcmQAB3Nlc3Npb250AAAAAGQABHZpZXdkACVFbGl4aXIuRGV2QXBwV2ViLlVzZXJSZWdpc3RyYXRpb25MaXZlbgYANjG7vYQBYgABUYA.AOdkp66oM3npROyh0R-TnglZUSMR1c9l3wGJNnJYae4", static: "SFMyNTY.g2gDaAJhBXQAAAADZAAKYXNzaWduX25ld2wAAAABZAAMY3VycmVudF91c2VyamQABWZsYXNodAAAAABkAAJpZG0AAAAUcGh4LUZ5dTRFWk92TW9CUmdnQWtuBgA2Mbu9hAFiAAFRgA.pjUjwfwQmxs88K9tAs8DY0VILBMptj2oM0QWs1Xmlu4", flash: undefined }
socket.js:245:29
transport connected to ws://localhost:4000/live/websocket?_csrf_token=GSMnIUAZOBMOXwI-QTFwPD8OCRpwFn5OsOvB1NaJc8FFuEIvgIhhGD64&_track_static%5B0%5D=http%3A%2F%2Flocalhost%3A4000%2Fassets%2Fapp.css&_track_static%5B1%5D=http%3A%2F%2Flocalhost%3A4000%2Fassets%2Fapp.js&_mounts=0&_live_referer=undefined&vsn=2.0.0 undefined socket.js:245:29
receive ok lv:phx-Fyu4EZOvMoBRggAk phx_reply (4) 
Object { response: {…}, status: "ok" }
socket.js:245:29
phx-Fyu4EZOvMoBRggAk mount:  -  
Object { 0: {…}, 1: {…}, 2: {…}, 3: {…}, s: (5) […] }
utils.js:28:12
Navigated to http://localhost:4000/users/log_in
transport close 
close { target: WebSocket, isTrusted: true, wasClean: true, code: 1001, reason: "", srcElement: WebSocket, currentTarget: WebSocket, eventPhase: 2, bubbles: false, cancelable: false, … }
socket.js:245:29
channel error lv:phx-Fyu4EZOvMoBRggAk undefined socket.js:245:29
push lv:phx-Fyu4Eg7LGtCgUQOB phx_join (4, 4) 
Object { redirect: undefined, url: "http://localhost:4000/users/log_in", params: {…}, session: "SFMyNTY.g2gDaAJhBXQAAAAIZAACaWRtAAAAFHBoeC1GeXU0RWc3TEd0Q2dVUU9CZAAMbGl2ZV9zZXNzaW9uaAJkACFyZWRpcmVjdF9pZl91c2VyX2lzX2F1dGhlbnRpY2F0ZWRuCACZcMcE6LcrF2QACnBhcmVudF9waWRkAANuaWxkAAhyb290X3BpZGQAA25pbGQACXJvb3Rfdmlld2QAHkVsaXhpci5EZXZBcHBXZWIuVXNlckxvZ2luTGl2ZWQABnJvdXRlcmQAF0VsaXhpci5EZXZBcHBXZWIuUm91dGVyZAAHc2Vzc2lvbnQAAAAAZAAEdmlld2QAHkVsaXhpci5EZXZBcHBXZWIuVXNlckxvZ2luTGl2ZW4GAEg5u72EAWIAAVGA.ayN7cqboPwrGF1HsLnPXwbwdj5jAwbt-UQOwph9hnaI", static: "SFMyNTY.g2gDaAJhBXQAAAADZAAKYXNzaWduX25ld2wAAAABZAAMY3VycmVudF91c2VyamQABWZsYXNodAAAAABkAAJpZG0AAAAUcGh4LUZ5dTRFZzdMR3RDZ1VRT0JuBgBIObu9hAFiAAFRgA.pR24pO7oL1-9NNqTVNL6APX82Bz2tyHC-OLiPKs6cuY", flash: undefined }
socket.js:245:29
transport connected to ws://localhost:4000/live/websocket?_csrf_token=WAQXMC4lLTgUCgYwcQFTJix3BRQOHycX2hFS_rtaymBHEujlt0df9Mom&_track_static%5B0%5D=http%3A%2F%2Flocalhost%3A4000%2Fassets%2Fapp.css&_track_static%5B1%5D=http%3A%2F%2Flocalhost%3A4000%2Fassets%2Fapp.js&_mounts=0&_live_referer=undefined&vsn=2.0.0 undefined socket.js:245:29
receive ok lv:phx-Fyu4Eg7LGtCgUQOB phx_reply (4) 
Object { response: {…}, status: "ok" }
socket.js:245:29
phx-Fyu4Eg7LGtCgUQOB mount:  -  
Object { 0: {…}, 1: {…}, 2: {…}, 3: {…}, s: (5) […] }
utils.js:28:12

Mozilla Firefox Developer Version 108.0b7 (64-bit)

Navigated to http://localhost:4000/users/register
transport close 
close { target: WebSocket, isTrusted: true, wasClean: true, code: 1001, reason: "", srcElement: WebSocket, currentTarget: WebSocket, eventPhase: 2, bubbles: false, cancelable: false, … }
socket.js:245:29
channel error lv:phx-Fyu3_qy_zozbawAE undefined socket.js:245:29
push lv:phx-Fyu4AMQV61uw8wLh phx_join (4, 4) 
Object { redirect: undefined, url: "http://localhost:4000/users/register", params: {…}, session: "SFMyNTY.g2gDaAJhBXQAAAAIZAACaWRtAAAAFHBoeC1GeXU0QU1RVjYxdXc4d0xoZAAMbGl2ZV9zZXNzaW9uaAJkACFyZWRpcmVjdF9pZl91c2VyX2lzX2F1dGhlbnRpY2F0ZWRuCACZcMcE6LcrF2QACnBhcmVudF9waWRkAANuaWxkAAhyb290X3BpZGQAA25pbGQACXJvb3Rfdmlld2QAJUVsaXhpci5EZXZBcHBXZWIuVXNlclJlZ2lzdHJhdGlvbkxpdmVkAAZyb3V0ZXJkABdFbGl4aXIuRGV2QXBwV2ViLlJvdXRlcmQAB3Nlc3Npb250AAAAAGQABHZpZXdkACVFbGl4aXIuRGV2QXBwV2ViLlVzZXJSZWdpc3RyYXRpb25MaXZlbgYALBe6vYQBYgABUYA.A_bRG89SzrqRAqqd78LItlYVEyjLIvYvi7pVjDVFW-E", static: "SFMyNTY.g2gDaAJhBXQAAAADZAAKYXNzaWduX25ld2wAAAABZAAMY3VycmVudF91c2VyamQABWZsYXNodAAAAABkAAJpZG0AAAAUcGh4LUZ5dTRBTVFWNjF1dzh3TGhuBgAsF7q9hAFiAAFRgA.pBdWmfKPfW045MUcuFBgwhe2ALY_YjLh9rYwogJobBw", flash: undefined }
socket.js:245:29
transport connected to ws://localhost:4000/live/websocket?_csrf_token=NANkaig1Jic8UxMzXxo6exshXggcUyMnmb4-AGmTJcUJfWMCci5kwgBd&_track_static%5B0%5D=http%3A%2F%2Flocalhost%3A4000%2Fassets%2Fapp.css&_track_static%5B1%5D=http%3A%2F%2Flocalhost%3A4000%2Fassets%2Fapp.js&_mounts=0&_live_referer=undefined&vsn=2.0.0 undefined socket.js:245:29
receive ok lv:phx-Fyu4AMQV61uw8wLh phx_reply (4) 
Object { response: {…}, status: "ok" }
socket.js:245:29
phx-Fyu4AMQV61uw8wLh mount:  -  
Object { 0: {…}, 1: {…}, 2: {…}, 3: {…}, s: (5) […] }
utils.js:28:12
Navigated to http://localhost:4000/users/log_in
transport close 
close { target: WebSocket, isTrusted: true, wasClean: true, code: 1001, reason: "", srcElement: WebSocket, currentTarget: WebSocket, eventPhase: 2, bubbles: false, cancelable: false, … }
socket.js:245:29
channel error lv:phx-Fyu4AMQV61uw8wLh undefined socket.js:245:29
push lv:phx-Fyu4ATQApXoIGwMh phx_join (4, 4) 
Object { redirect: undefined, url: "http://localhost:4000/users/log_in", params: {…}, session: "SFMyNTY.g2gDaAJhBXQAAAAIZAACaWRtAAAAFHBoeC1GeXU0QVRRQXBYb0lHd01oZAAMbGl2ZV9zZXNzaW9uaAJkACFyZWRpcmVjdF9pZl91c2VyX2lzX2F1dGhlbnRpY2F0ZWRuCACZcMcE6LcrF2QACnBhcmVudF9waWRkAANuaWxkAAhyb290X3BpZGQAA25pbGQACXJvb3Rfdmlld2QAHkVsaXhpci5EZXZBcHBXZWIuVXNlckxvZ2luTGl2ZWQABnJvdXRlcmQAF0VsaXhpci5EZXZBcHBXZWIuUm91dGVyZAAHc2Vzc2lvbnQAAAAAZAAEdmlld2QAHkVsaXhpci5EZXZBcHBXZWIuVXNlckxvZ2luTGl2ZW4GAIEeur2EAWIAAVGA.6_uz185ew_PgwV2Yz7Tj7JcNfoSjVSNsAHX12WveCYk", static: "SFMyNTY.g2gDaAJhBXQAAAADZAAKYXNzaWduX25ld2wAAAABZAAMY3VycmVudF91c2VyamQABWZsYXNodAAAAABkAAJpZG0AAAAUcGh4LUZ5dTRBVFFBcFhvSUd3TWhuBgCCHrq9hAFiAAFRgA.MGNsGuR0u8idudWVQCRNl_v8QJKiXHpwjkPOddxEUAw", flash: undefined }
socket.js:245:29
transport connected to ws://localhost:4000/live/websocket?_csrf_token=OigSNgQmezgZbx5MWgRBcyAqAilZe1YJcIBqmT0Ko_X5cI6KXbiJ2O7J&_track_static%5B0%5D=http%3A%2F%2Flocalhost%3A4000%2Fassets%2Fapp.css&_track_static%5B1%5D=http%3A%2F%2Flocalhost%3A4000%2Fassets%2Fapp.js&_mounts=0&_live_referer=undefined&vsn=2.0.0 undefined socket.js:245:29
receive ok lv:phx-Fyu4ATQApXoIGwMh phx_reply (4) 
Object { response: {…}, status: "ok" }
socket.js:245:29
phx-Fyu4ATQApXoIGwMh mount:  -  
Object { 0: {…}, 1: {…}, 2: {…}, 3: {…}, s: (5) […] }
utils.js:28:12
KungPaoChicken commented 1 year ago

I got a few minutes on a Mac mini and this happens in Firefox but not Chrome :(

janeerik commented 1 year ago

I could also reproduce this on Chrome:

The error flash is visually most evident in the Register action.

drlogout commented 1 year ago

Same here on Chrome.

chrismccord commented 1 year ago

Fixed in LV 0.18.4

garrettlancaster commented 1 year ago

I still seem to be experiencing this in 0.18.11

kostspielig commented 1 year ago

Update: I had not configured the url host and check_origin parameters for production. After updating those is solved

I am in 0.18.16 and still see this.

I can reproduce in all browsers (firefox, chrome) see live here. See versions of phoenix/live-view:

      {:phoenix, "~> 1.7.0", override: true},
      {:phoenix_live_reload, "~> 1.2", only: :dev},
      {:phoenix_live_view, "~> 0.18.16"}
doughsay commented 1 year ago

On Firefox 110.0 with Phoenix 1.7.0 and LiveView 0.18.16 I still see it too.

Reproduces 100% of the time with a page refresh.

nshafer commented 1 year ago

Just a heads up, I'm still seeing this with Firefox 111, Phoenix 1.7.2, LiveView 0.18.18 on Linux. Cannot reproduce with Chrome. Reproduces every time whenever navigating away from a live view page, either refreshing, navigating to a dead view, or even navigating to another live view.

ghenry commented 1 year ago

Shouldn't we see this on a refresh as we are disconnecting the websocket.

Munksgaard commented 1 year ago

I'm also seeing this with phoenix 0.17.2 and 0.18.18.

ghenry commented 1 year ago

Isn't the logic that the flash_group component is in the static HTML served up (it then shows) then when LiveView loads up there is nothing in the flash so it removes?

nshafer commented 1 year ago

Isn't the logic that the flash_group component is in the static HTML served up (it then shows) then when LiveView loads up there is nothing in the flash so it removes?

Not exactly. For one this is the special-case "disconnected" flash, not a normal info or error flash. Also, it's set to be hidden by default, and only shows via JS commands if the phx-disconnected event is triggered. So it doesn't show on initial HTML load, nor when the live view mounts. It only shows during the teardown process when the browser is about to navigate away from the page. So it closes the socket, triggering the phx-disconnected event, which then triggers the JS.show() command which makes it visible. Once the browser replaces the visible viewport with the new page, it isn't shown anymore. It's a slight annoyance that only exists in Firefox, not in Chrome, and makes navigating around the site feel jarring and less polished.

ghenry commented 1 year ago

Thanks for the clarification. Extremely helpful. So why is Firefox triggering this and what can we raise upstream?

ccomkhj commented 1 year ago

As written by kostspielig,

This problem is resolved for both google Chrom, Firefox by writing environment variable of host.

in config/runtime.exs 

host = System.get_env("PHX_HOST") || "example.com"

PHX_HOST=domain.you.want mix phx.server

{:phoenix, "~> 1.7.2"}
{:phoenix_live_view, "~> 0.18.16"}
ghenry commented 1 year ago

As written by kostspielig,

This problem is resolved for both google Chrom, Firefox by writing environment variable of host.

in config/runtime.exs

host = System.get_env("PHX_HOST") || "example.com"

PHX_HOST=domain.you.want mix phx.server

{:phoenix, "~> 1.7.2"}
{:phoenix_live_view, "~> 0.18.16"}

Nah, this doesn't work for me. I see this on my live domain on fly.io:

      {:phoenix, "~> 1.7.2"},
      {:phoenix_ecto, "~> 4.4"},
      {:phoenix_html, "~> 3.0"},
      {:phoenix_live_dashboard, "~> 0.7.2"},
      {:phoenix_live_reload, "~> 1.2", only: :dev},
      {:phoenix_live_view, "~> 0.18.18"},

runtime.exs

  host = System.get_env("PHX_HOST") || "sentrypeer.com"

and my fly.toml

[env]
  GIT_REV = "a6737a9"
  PHX_HOST = "sentrypeer.com"
  PORT = "8080"

My home page on https://sentrypeer.com is a liveview and if click refresh on FF, I see it.

Thanks.

nshafer commented 1 year ago

I agree that kostspielig's solution is a red herring. I still see this in dev or production with and without PHX_HOST set. And I think it has nothing to do with it. This is most likely all in the way that the Phoenix JS tears down the websocket, and is probably completely client side.

ccomkhj commented 1 year ago

Can you try environment variables below, too? @ghenry

PHX_HOST=your.domain.address
PHX_SERVER=your.domain.address
ghenry commented 1 year ago

I'm not sure that's the right use?

https://github.com/phoenixframework/phoenix/blob/a310102eb0e20b918624bb2323a6afb124fcaddd/installer/templates/phx_single/config/runtime.exs#L19

On Sat, 6 May 2023, 16:39 Huijo, @.***> wrote:

Can you try environment variables below, too? @ghenry https://github.com/ghenry

PHX_HOST=your.domain.address PHX_SERVER=your.domain.address

— Reply to this email directly, view it on GitHub https://github.com/phoenixframework/phoenix/issues/5102#issuecomment-1537167466, or unsubscribe https://github.com/notifications/unsubscribe-auth/AABG66EOWH4WS6JBXNVNLM3XEZWEHANCNFSM6AAAAAAR6I7JOI . You are receiving this because you were mentioned.Message ID: @.***>

vince-roy commented 1 year ago

I'm also getting this in Firefox with the following packages:

{:phoenix, "~> 1.7.2"},
 {:phoenix_live_view, "~> 0.19.0"},

Repo and branch in question: https://github.com/vince-roy/LiveScheduling/tree/subscribe

Kraigie commented 1 year ago

Would like to add I'm also seeing this just on Firefox.

{:phoenix, "~> 1.7.3"},
{:phoenix_live_view, "~> 0.19.0"}

Firefox version 114.0.1

I am able to reproduce this using the original post's instructions just by refreshing liveview pages.

FWIW, it looks like this was fixed at some point, but was removed with https://github.com/phoenixframework/phoenix_live_view/commit/953a86288ce0a24f9359f89e2f3698a25d6ee5a1

MSE99 commented 1 year ago

I'm having the same issue in my app during page refresh and live navigation between liveviews in the same live session

{:phoenix, "~> 1.7.3"},
{:phoenix_live_view, "~> 0.19.0"}

Firefox version 100.0.2
Chromium version 114
MSE99 commented 1 year ago

I was able to fix this on my end, the issue only happened to me when i set the container of the flash to be a flexbox parent (had to do this because i was styling it with CSS), this made it show up on every page transition, not sure why?...

anyways to anyone looking for an answer check if you're overriding the display value of the flash message to a value like flex.

simonmcconnell commented 1 year ago

Still happening on Firefox in dev.

phoenix 1.7.6 phoenix_live_view 0.19.3

defp commented 1 year ago

chrome 

 defp deps do
    [
      {:bcrypt_elixir, "~> 3.0"},
      {:phoenix, "~> 1.7.6"},
      {:phoenix_ecto, "~> 4.4"},
      {:ecto_sql, "~> 3.6"},
      {:myxql, ">= 0.0.0"},
      {:phoenix_html, "~> 3.3"},
      {:torch, "~> 5.1"},
      {:phoenix_live_reload, "~> 1.2", only: :dev},
      {:phoenix_live_view, "~> 0.19.4"},
      {:floki, ">= 0.30.0", only: :test},
      {:phoenix_live_dashboard, "~> 0.8.0"},
      {:esbuild, "~> 0.5", runtime: Mix.env() == :dev},
      {:tailwind, "~> 0.2.0", runtime: Mix.env() == :dev},
      {:swoosh, "~> 1.3"},
      {:finch, "~> 0.16"},
      {:telemetry_metrics, "~> 0.6"},
      {:telemetry_poller, "~> 1.0"},
      {:tzdata, "~> 1.1"},
      {:quantum, "~> 3.5"},
      {:gettext, "~> 0.20"},
      {:con_cache, "~> 1.0"},
      {:cors_plug, "~> 3.0"},
      {:redix, "~> 1.2"},
      {:jason, "~> 1.4"},
      {:sentry, "~> 8.0"},
      {:hackney, "~> 1.8"},
      {:plug_cowboy, "~> 2.5"},
      {:credo, "~> 1.7", only: [:dev, :test], runtime: false}
    ]
  end

and prod deploy reproduce example https://pome-v2.xingququan.com/

caanmert commented 1 year ago

I have the same issue. When I create release and deploy it to production, On Register/Login pages I get the flash message "we can't find the internet". And neither I can login or register.

TheArrowsmith commented 1 year ago

@caanmert are you getting this issue on LiveViews in prod, but not on non-LiveView pages and not in development? Sounds like the same issue I had recently when deploying my app to prod for the first time. In my case it was because the LiveView socket couldn't connect the because the app's domain wasn't configured correctly.

I thiiiiink the thing that fixed it was configuring the url option for my endpoint in config/prod.exs:

config :spoonme, MyAppWeb.Endpoint,
  cache_static_manifest: "priv/static/cache_manifest.json",
  …
  # Add this line:
  url: [host: System.fetch_env!("DOMAIN"), port: 80],
  …

Then set the DOMAIN env var to example.com or whatever your domain is.

I might be remembering wrong but I think that's what solved it; hopefully it will point you in the right direction at least?

caanmert commented 1 year ago

@TheArrowsmith Thank you, That fixed it and also I had to add this lines into my Nginx configuration file.

proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection "upgrade";

ftes commented 8 months ago

I'm still experiencing this on page transitions and reloads

ftes commented 8 months ago

Here's my workaround for now: Add a delay-1000 to the disconnected transition and increase time.

phx-disconnected={JS.show(to: "#client-error", time: 1300, transition: {"delay-1000 ...", ...})}

In terms of actually fixing it: The commit @Kraigie mentioned led me to to open #5735 (just reverting the commit was not enough, but the PR does something similar).