Phoenix liveview fail on one computer

jle

Hi, I have a problem in one computer with applications running liveview

It has to be a problem with my computer configuration

The same application running on different computers works perfectly

I also ran the examples from Chris McCord with same problem
All these worked some days ago

I tested with firefox and chrome with same behaviour

I tested with elixir 12 and 13. No surprises it didn’t work with both, I’m sure it has to be a configuration problem in my computer

My question is about how to try to debug this issue

I added this trace on mount

  def mount(_params, _session, socket) do
     ...
    Logger.info("_____________ connected?(socket) #{connected?(socket)}")
    ...

and this is the output

[info] Running DemoWeb.Endpoint with cowboy 2.9.0 at 0.0.0.0:4000 (http)
[info] Access DemoWeb.Endpoint at http://localhost:4000
[watch] build finished, watching for changes...
[info] CONNECTED TO Phoenix.LiveView.Socket in 64µs
  Transport: :websocket
  Serializer: Phoenix.Socket.V2.JSONSerializer
  Parameters: %{"_csrf_token" => "bDccJkAePU00HgMdJj8GPgAgNFgqXBwXYm-OmNl4UXdHkG4VthU6L6xg", "vsn" => "2.0.0"}
[info] GET /
[debug] Processing with Phoenix.LiveView.Plug.Elixir.DemoWeb.ImageLive/2
  Parameters: %{}
  Pipelines: [:browser]
[info] _____________ connected?(socket) false
[info] Sent 200 in 68ms
[info] CONNECTED TO Phoenix.LiveView.Socket in 53µs
  Transport: :websocket
  Serializer: Phoenix.Socket.V2.JSONSerializer
  Parameters: %{"_csrf_token" => "RH4FFgYQDjAOXy1QBidWKAVzFgIDLC4n450cwzwahoHbuU7EwGSKdJB_", "vsn" => "2.0.0"}

Any tip of how could I investigate where the problem is?
Thanks (marvellous language, phoenix is impressive, nice community… congrats!!!)

47 comments

/phoenix #liveview

0 3545 47

2021-12-30 21:03:44 UTC

Showing Posts 1 to 10

Show Best Posts
Show All (oldest first)
Show All (newest first)

derek-zhou

There is nothing indicating a failure in the log; first call to mount/3 is unconnected as it should be.

Post #1

jle

There are no additional calls

Post #2

derek-zhou

then the problem is in the client side; check your browser’s console.

Post #3

jle

No messages or errors on console
It’s failing on firefox and chromium

Post #4

jle

From Chris McCord examples on github messages on firefox…

One or more documents in this page is in Quirks Mode, which will render the affected document(s) with quirks incompatible with the current HTML and CSS specifications.
Quirks Mode exists mostly due to historical reasons. If this is not intentional, you can add or modify the DOCTYPE to be `<!DOCTYPE html>` to render the page in No Quirks Mode.
1 element
Document in the DOM tree	Mode	URL
document	Quirks Mode	http://localhost:4000/phoenix/live_reload/frame

On chromium…

Cookie “_demo_key” will be soon rejected because it has the “SameSite” attribute set to “None” or an invalid value, without the “secure” attribute. To know more about the “SameSite“ attribute, read https://developer.mozilla.org/docs/Web/HTTP/Headers/Set-Cookie/SameSite

Post #5

jle

When I stop the server, there is a message of websocket disconnection on client console

Therefore, It looks the websocket is properly connected

Post #6

derek-zhou

Both of these problems need to be addressed. However, I doubt it would help in this case.

Try liveSocket.disconnect() then liveSocket.connect() and see what happens.

Post #7

jle

After liveSocket.disconnect()
Nothing happens on client side and server side (I mean, no error or warning)

When I run liveSocket.connect(), there is a log on server informing the socket has been connected

[info] CONNECTED TO Phoenix.LiveView.Socket in 51µs
  Transport: :websocket
  Serializer: Phoenix.Socket.V2.JSONSerializer

But live event’s continue not working

Post #8

derek-zhou

I am as lost as you; unless you have a minimum reproducible case you can share, I am afraid few people can help you.

Post #9

quatermain

Have you tried to run debug mode on client side? You can find more information here. After you enable it you can see all messages in network panel in browser. Maybe you can share it with us too.

Post #10

Load more posts (37 remaining)