Phoenix liveview fail on one computer

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
     ..."_____________ connected?(socket) #{connected?(socket)}")

and this is the output

[info] Running DemoWeb.Endpoint with cowboy 2.9.0 at (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!!!)

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

There are no additional calls :frowning:

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

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

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

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

Therefore, It looks the websocket is properly connected

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.

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 :frowning:

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

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.

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

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

Nothing working

I’m trying to debug as quatermain proposed.

When I run


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

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.

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?


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 :open_mouth:

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)

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

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 :frowning:

The program fails on chromium and firefox
No addblockers configured

I putted a breakpoint on socket.js on

export default class Socket {

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


It appears on code completion but the execuion gives…

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