Liveview not working on Heroku

I have deployed a phoenix 1.5.1 application on Heroku following instructions from https://hexdocs.pm/phoenix/heroku.html. I created the application with -live option and the default dependency search works when I run it locally. On Heroku when I try to search something it just reloads and nothing happens. I set the domain in prod.exs like this url: [scheme: "https", host: "afternoon-gorge-48332.herokuapp.com", port: 443]. Am not sure why it’s not working.

what does the logs say?:

do a heroku logs --tail -a afternoon-gorge-48332 in your terminal…

This is what I get.

2020-05-12T12:31:11.633295+00:00 app[web.1]: 12:31:11.633 [info] CONNECTED TO 
Phoenix.LiveView.Socket in 179µs
2020-05-12T12:31:11.633303+00:00 app[web.1]: Transport: :websocket
2020-05-12T12:31:11.633304+00:00 app[web.1]: Serializer: 
Phoenix.Socket.V2.JSONSerializer
2020-05-12T12:31:11.633305+00:00 app[web.1]: Parameters: %{"_csrf_token" => 
"SCF2Jh0UeBVnNmd3NAYkWX4MAycfMDo9qW3iV99y5xU9WSCtLXlqpbPj", "vsn" => 
"2.0.0"}
 2020-05-12T12:31:11.819005+00:00 app[web.1]: 12:31:11.818 request_id=ff40bdf2-35bc- 
471c-993b-12a51a0c5df1 [info] GET /
2020-05-12T12:31:11.819673+00:00 app[web.1]: 12:31:11.819 request_id=ff40bdf2-35bc- 
471c-993b-12a51a0c5df1 [info] Sent 200 in 812µs
2020-05-12T12:31:11.820509+00:00 heroku[router]: at=info method=GET path="/" 
 host=afternoon-gorge-48332.herokuapp.com request_id=ff40bdf2-35bc-471c-993b- 
12a51a0c5df1 fwd="41.210.146.22" dyno=web.1 connect=1ms service=3ms status=200 
bytes=3919 protocol=https
2020-05-12T12:31:13.187992+00:00 app[web.1]: 12:31:13.187 [info] CONNECTED TO 
Phoenix.LiveView.Socket in 304µs
2020-05-12T12:31:13.188004+00:00 app[web.1]: Transport: :websocket
2020-05-12T12:31:13.188005+00:00 app[web.1]: Serializer: 
Phoenix.Socket.V2.JSONSerializer
2020-05-12T12:31:13.188007+00:00 app[web.1]: Parameters: %{"_csrf_token" => 
"Cyd9Pn5sSjsgPANuQA06PQBbZTl3M1E7XcJY049KNJP78KVhD7Vh1r5L", "vsn" => "2.0.0"}

ok, so it does connect…

can you check heroku logs for anything going on when you do the search? - also check your browsers console and also try liveSocket.enableDebug() in the browser console before doing the search…

I did that and its indeed crashing. The problem is that it crashes so fast and immediately refreshes that its impossible to grab the error message in the console because its gone in an instant.

there should be a “Preserve log” checkbox in the browser console somewhere… make sure that one is checked - and you can see the errors…

Ok that works. When I check the logs am seeing this message TypeError: Cannot read property 'requestContent' of undefined.

I thought this was an error on Heroku but am getting the same problem with Gigalixir. These are the errors am getting in the console for both.

phx-FhDXzuu_58HkzwCk error: view crashed -  {}
phx-FhDXzuu_58HkzwCk join: encountered 0 consecutive reloads

Are you able to provide the code for your LiveView? It seems like a bug in it, possibly.

Yeah sure. Its actually the auto generated code when you create a phoenix app with -live option.

defmodule PatchtraceWeb.PageLive do
  use PatchtraceWeb, :live_view

 @impl true
  def mount(_params, _session, socket) do
    {:ok, assign(socket, query: "", results: %{})}
  end

  @impl true
 def handle_event("suggest", %{"q" => query}, socket) do
   {:noreply, assign(socket, results: search(query), query: query)}
end

 @impl true
  def handle_event("search", %{"q" => query}, socket) do
    case search(query) do
  %{^query => vsn} ->
    {:noreply, redirect(socket, external: "https://hexdocs.pm/#{query}/#{vsn}")}

  _ ->
    {:noreply,
     socket
     |> put_flash(:error, "No dependencies found matching \"#{query}\"")
     |> assign(results: %{}, query: query)}
 end
end

defp search(query) do
    if not PatchtraceWeb.Endpoint.config(:code_reloader) do
   raise "action disabled when not in development"
end

for {app, desc, vsn} <- Application.started_applications(),
    app = to_string(app),
    String.starts_with?(app, query) and not List.starts_with?(desc, ~c"ERTS"),
    into: %{},
    do: {app, vsn}
 end
end

Using erlang=22.2, elixir 1.10.2, phoenix=1.5.3 and phoenix_live_view=0.13.0 from phx.new generator on Heroku.

I stumbled into a similiar problem, searched in google and found this thread. Thanks for the hint with the heroku logs. It told me to:

Origin of the request: https://xxxxxxxxxx.herokuapp.com

This happens when you are attempting a socket connection to
a different host than the one configured in your config/
 files. For example, in development the host is configured
to "localhost" but you may be trying to access it from
"127.0.0.1". To fix this issue, you may either:

1. update [url: [host: ...]] to your actual host in the
config file for your current environment (recommended)

2. pass the :check_origin option when configuring your
endpoint or when configuring the transport in your
UserSocket module, explicitly outlining which origins
are allowed:

check_origin: ["https://example.com",
"//another.com:888", "//other.com"]

So I updated url: and added explicitly check_origin: to my config/config.exs

application_hostname =
  System.get_env("FOO_HOSTNAME") ||
    IO.puts """
    environment variable FOO_HOSTNAME is missing.
    """
    
config :foo, FooWeb.Endpoint,
  url: [host: application_hostname], # 
  secret_key_base: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
  render_errors: [view: FooWeb.ErrorView, accepts: ~w(html json), layout: false],
  pubsub_server: Foo.PubSub,
  live_view: [signing_salt: "xxxxxxxxxx"],
  check_origin: [
    "http://localhost:4000/",
    "https://#{application_hostname}/",
  ]

Set the new environment variable for FOO_HOSTNAME on heroku, redeployed and it worked instantly.

1 Like

Is FOO_HOSTNAME environment variable your Heroku URL eg blazing-tundra-2110.herokuapp.com does it include a port. I still haven’t figured out why it has refused to work on my end.

FOO_HOSTNAME contains only the full qualified domain name of the external/publicly reachable host. so in your case just the string blazing-tundra-2110.herokuapp.com. No port nor URI. When you are running in development environment (without containers) then probably just localhost or whatever hostname a user/browser will access you application.

1 Like