Phoenix liveview fail on one computer

jle · December 22, 2021, 2:06pm

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!!!)

derek-zhou · December 22, 2021, 4:10pm

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

jle · December 22, 2021, 6:30pm

There are no additional calls

derek-zhou · December 22, 2021, 6:34pm

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

jle · December 22, 2021, 11:02pm

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

jle · December 23, 2021, 8:57am

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

jle · December 23, 2021, 9:01am

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

Therefore, It looks the websocket is properly connected

derek-zhou · December 23, 2021, 1:26pm

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.

jle · December 23, 2021, 7:02pm

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

derek-zhou · December 23, 2021, 7:08pm

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

quatermain · December 27, 2021, 7:42am

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.

wanton7 · December 27, 2021, 8:23pm

Have you tried 127.0.0.1 instead of localhost? On my Windows computers localhost has problems with WebSocket connections on Chrome. WebSocket connections take very long time to connect. But 127.0.0.1 works fine.

jle · December 28, 2021, 6:39pm

Yep, I tried with 127.0.0.1 and the IP address (after changing configuration to allow external connections on dev)

Nothing working

I’m trying to debug as quatermain proposed.
Thanks

jle · December 28, 2021, 6:52pm

When I run

liveSocket.enableDebug()

in the machine that fails… I got an error

liveSocket.enableDebug() is not a function

But running on a machine that works, I can see on console the debug info and trafic

wanton7 · December 28, 2021, 9:20pm

Are sure you are running 100% identical code in both machines? Because liveSocket is a variable that JavaScript related to LiveView should create. If it’s not available then it feels to me that something is wrong with the JavaScript code or maybe the code itself is not run at all.

quatermain · December 29, 2021, 7:51am

Exactly. Can you check source code from browser debug tool? Because it looks like your JS is not executed on that machine. Which browser do you use? Do you use some extensions? Ad blockers? What about log from your terminal/console when you start Phoenix app, usually webpack “compile” your assets and generate main js file. What do you use for assets? esbuild? node? webpack?

jle · December 29, 2021, 7:33pm

Yep, I tested with my code, and with examples from Chris McCord downloaded from github and compiled on my machine

I downloaded my on code from repository in different folders and machines

I created new projects, and works on all machines, excepting this one

Everything works fine except in one machine. In that machine, nothing related with liveview works

I’m going to test a client from a different machine against the server. Then I will know if the problem is on server side, or client side (I bet is on server side, elixir/phoenix)

wanton7 · December 29, 2021, 7:38pm

Can you post a link to github repo that has code that you are using?

jle · December 29, 2021, 8:02pm

I could, I could create a very simple application that fails on this computer, but… I don’t think it will help

I have problems with my code, with a new project, with code from examples from Chris MacCord on github. And only fails on one machine. The same code in 3 different machines, works perfectly

jle · December 29, 2021, 8:06pm

The program fails on chromium and firefox
No addblockers configured

I putted a breakpoint on socket.js on

export default class Socket {
  constructor(endPoint...
  this...

I ran step by step, no errors, no exceptions, no messages on console…
After running the constructor, I tested on console the activation of debug

liveSocket.enableDebug()

It appears on code completion but the execuion gives…

VM630:1 Uncaught TypeError: liveSocket.enableDebug is not a function
    at <anonymous>:1:12