Phoenix LiveView Websocket proxy and live_redirect

I am deploying an Elixir application behind an Nginx proxy (multiple Elixir applications actually) and am having some issues specific (I think) to live_redirect.

I have

  1. changed the url in my config.exs by adding the path as such: url: [host: "localhost", path: "/campaign"]
  2. prepended the base-url to the app.js as such: let liveSocket = new LiveSocket("/campaign/live", Socket, {params: {_csrf_token: csrfToken}})

I have another application that uses LiveView that works fine, but this campaign application, which another developer has developed, manifests the problems.

In the backend I see:

[error] an exception was raised:
    ** (ArgumentError) cannot invoke handle_params nor live_redirect/live_link to "https://[ELIDED]/campaign/dashboard/nonode%40nohost" because it isn't defined in CampaignsLiveWeb.Router
        (phoenix_live_view 0.12.1) lib/phoenix_live_view/utils.ex:209: Phoenix.LiveView.Utils.live_link_info!/3
        (phoenix_live_view 0.12.1) lib/phoenix_live_view/channel.ex:600: Phoenix.LiveView.Channel.verified_mount/4
        (phoenix_live_view 0.12.1) lib/phoenix_live_view/channel.ex:34: Phoenix.LiveView.Channel.handle_info/2

I am wondering if anyone has seen anything similar to this before, and can give me a hint as to where I might explore?

Again, I have successfully deployed another LiveView application using the above 2 points, so I know that nginx is properly passing/upgrading the websockets. I feel that this is related to the issue here, although in my case, I know what the top-level URL is going to be and am not using dynamic re-writing.

Thanks,
Daniel

Are those liveviews defined at the router level?

However, only the LiveViews defined directly in your router and use the “Live Navigation” functionality described here. This is important because LiveViews work closely with your router, guaranteeing you can only navigate to known routes.

https://hexdocs.pm/phoenix_live_view/Phoenix.LiveView.html#module-multiple-liveviews-in-the-same-page

Yes, they are.

 11   scope "/", CampaignsLiveWeb do                                                                                                                                            
 12     pipe_through :browser                                                                                                                                                   
 13                                                                                                                                                                             
 14     live "/", PageLive, :index                                                                                                                                              
 15                                                                                                                                                                             
 16     live "/attempts", AttemptLive.Index, :index 
...
67    end                                                                                                                                                                       

I’ve been peeking at the phoenix_live_view/util.ex (the live_link_info! method, in particular) and I think if pass the endpoint in there, I could grab the config-ed :url key and remove the proxy path there. Gonna see if I can hack this to understand what’s going on.

How are you calling live_dashboard in router.ex ?

live_dashboard("/campaign/dashboard")?

Sorry, that was a stacktrace from when I went to the dashboard, I was getting it the same way with other URLs:

81    if Mix.env() in [:dev, :test] do                                                                                                                                          
  1     import Phoenix.LiveDashboard.Router                                                                                                                                     
  2                                                                                                                                                                             
  3     scope "/" do                                                                                                                                                            
  4       pipe_through :browser                                                                                                                                                 
  5       live_dashboard "/dashboard", metrics: CampaignsLiveWeb.Telemetry                                                                                                      
  6     end                                                                                                                                                                     
  7   end         

I am noticing one thing in my codebase that might be problematic (and might have nothing to do with this particular error or is the problem). In the eex templates, I see that the action is using a old-style to: action,

 27         <td><%= live_redirect campaign.audience.name, to: Routes.audience_show_path(@socket, :show, campaign.audience) %></td>                                              

instead of the Routes.live_path that I see in the documentation.

I wonder if this might be related.

Well, my hack worked. I changed utils.ex and channel.ex and static.ex to pass in the endpoint to the live_link_info and then used the path to remove the prefix coming in from websocket and things started working.

Feeling proud of myself, I wanted to see if I could contribute it back and checked on github and saw that this has been fixed with the following patch: https://github.com/phoenixframework/phoenix_live_view/commit/06b3e81243c18b53e27d9a9a0e37201e8cda22ee

So if anyone is having a similar problem, grab the latest from master (I was on version 0.12.0)

EDIT: if you don’t want master, it looks like this fix is on 0.13.0

2 Likes