LiveView communication fails on production VM

I have a single live view component in my phoenix application.

      {:phoenix, "~> 1.5.4"},
      {:phoenix_live_view, "~> 0.14.2"},

I use mix release. Locally I can run the build without any problems, only on the target server I got a communications problem:

So it seems I get a :chunk_timeout.

On the server’s side the connection is established/recognized:

10:09:21.766 [info] CONNECTED TO Phoenix.LiveView.Socket in 208µs
  Transport: :websocket
  Serializer: Phoenix.Socket.V2.JSONSerializer
  Parameters: %{"_csrf_token" => "(..)", "_mounts" => "0", "vsn" => "2.0.0"}

Looks like the server’s response gets lost afterwards. I am unsure how to debug this further, I suppose in the end it will have something to do with the VMs configuration? I run Phoenix directly on Port 80 (no other webserver involved).

hmm, can you post more of the logs? eg anything in the browser console, or the disconnect in the server logs?

Unfortunately the lack of errors is kind of my problem. In the browser consoles (chrome/firefox) I don’t get any errors besides the failed join by the websocket displayed above.

The server hums along and does not log anything out of the ordinary:

Dez 07 09:03:57 (..) erga[20434]: 09:03:57.686 request_id=Fk5gh(..) [info] GET /
Dez 07 09:03:57 (..) erga[20434]: 09:03:57.728 request_id=Fk5gh(..) [info] Sent 200 in 41ms
Dez 07 09:04:03 (..) erga[20434]: 09:04:03.013 request_id=Fk5gh(..) [info] GET /projects/1/edit
Dez 07 09:04:03 (..) erga[20434]: 09:04:03.049 request_id=Fk5gh(..) [info] Sent 200 in 35ms
Dez 07 09:04:06 (..) erga[20434]: 09:04:06.942 request_id=Fk5gh(..) [info] GET /linked_resources/new/1
Dez 07 09:04:06 (..) erga[20434]: 09:04:06.963 request_id=Fk5gh(..) [info] Sent 200 in 20ms
Dez 07 09:04:07 (..) erga[20434]: 09:04:07.638 [info] CONNECTED TO Phoenix.LiveView.Socket in 168µs
Dez 07 09:04:07 (..) erga[20434]:   Transport: :websocket
Dez 07 09:04:07 (..) erga[20434]:   Serializer: Phoenix.Socket.V2.JSONSerializer
Dez 07 09:04:07 (..) erga[20434]:   Parameters: %{"_csrf_token" => "CzY6dSM(..)", "_mounts" => "0", "vsn" => "2.0.0"}

Activating debugging in my app.js (but that’s basically what I already know):

app-312(..).js?vsn=d:1 phx-Fk5m(..) error: unable to join -  {reason: "timeout"}
app-312(..).js?vsn=d:1 phx-Fk5m(..) destroyed: the child has been removed from the parent -  undefined
app-312(..).js?vsn=d:1 phx-Fk5m(..) join: encountered 801 consecutive reloads -  undefined
app-312(..).js?vsn=d:1 phx-Fk5m(..) join: exceeded 10 consecutive reloads. Entering failsafe mode -  undefined

It seems like this is a VPN configuration issue.
Edit: We are using Sonicwall. I have not gotten to the exact root of the problem so far.

Would you mind mentioning the VPN provider and what was the config problem so maybe others facing it in the future can reference it!?

Sure, I added it to the answer.

1 Like