LiveView session error help

Hi, I’m experimenting with adding LiveView to an app, based on the examples Chris has put together.

When accessing a LiveView route the following error gets thrown. Not sure how to solve it - any hints for a Phoenix newbie?

Thank you!

[error] GenServer #PID<0.565.0> terminating
** (MatchError) no match of right hand side value: %{"session" => "SFMyNTY.g3QAAAACZAAEZGF0YWgCYQF0AAAABWQAAmlkbQAAAAxwaHgtWHdmRVZ1dUxkAApwYXJlbnRfcGlkZAADbmlsZAAGcm91dGVyZAAZRWxpeGlyLkhvbWJlbmNoV2ViLlJvdXRlcmQAB3Nlc3Npb250AAAAAWQAC3BhdGhfcGFyYW1zdAAAAABkAAR2aWV3ZAAeRWxpeGlyLkhvbWJlbmNoV2ViLldlbGNvbWVMaXZlZAAGc2lnbmVkbgYAth4N1GsB.w5sWexNs_NadY74VpvmzUC8X-EyabpKVEAdpoB29OM0"}
    (phoenix_live_view) lib/phoenix_live_view/channel.ex:426: Phoenix.LiveView.Channel.verified_mount/9
    (stdlib) gen_server.erl:637: :gen_server.try_dispatch/4
    (stdlib) gen_server.erl:711: :gen_server.handle_msg/6
    (stdlib) proc_lib.erl:249: :proc_lib.init_p_do_apply/3
Last message: {:mount, Phoenix.LiveView.Channel}
State: {%{"session" => "SFMyNTY.g3QAAAACZAAEZGF0YWgCYQF0AAAABWQAAmlkbQAAAAxwaHgtWHdmRVZ1dUxkAApwYXJlbnRfcGlkZAADbmlsZAAGcm91dGVyZAAZRWxpeGlyLkhvbWJlbmNoV2ViLlJvdXRlcmQAB3Nlc3Npb250AAAAAWQAC3BhdGhfcGFyYW1zdAAAAABkAAR2aWV3ZAAeRWxpeGlyLkhvbWJlbmNoV2ViLldlbGNvbWVMaXZlZAAGc2lnbmVkbgYAth4N1GsB.w5sWexNs_NadY74VpvmzUC8X-EyabpKVEAdpoB29OM0"}, {#PID<0.558.0>, #Reference<0.662892447.1958739975.23354>}, %Phoenix.Socket{assigns: %{}, channel: Phoenix.LiveView.Channel, channel_pid: nil, endpoint: HombenchWeb.Endpoint, handler: Phoenix.LiveView.Socket, id: nil, join_ref: "1", joined: false, private: %{}, pubsub_server: Hombench.PubSub, ref: nil, serializer: Phoenix.Socket.V2.JSONSerializer, topic: "lv:phx-XwfEVuuL", transport: :websocket, transport_pid: #PID<0.558.0>}}

Hi @haubie welcome! Can you provide some of the code you’re using to setup the live view?

1 Like

Hi @benwilson512, thanks for the reply.

One example I’ve tried to get going is the the search suggest example (but I’ve also tried more basic examples and the same session error is thrown). Example code is below:

defmodule HombenchWeb.WelcomeLive do
    use Phoenix.LiveView

    def render(assigns) do
        ~L"""
            <h1>Search</h1>
            <form phx-change="suggest" phx-submit="search">
            <input class="bg-gray-400 rounded p-2 mb-6 text-gray-700" type="text" name="q" value="<%= @query %>" list="matches" placeholder="Search..."<%= if @loading, do: "readonly" %>/>
                <datalist id="matches">
                    <%= for match <- @matches do %>
                        <option value="<%= match %>"><%= match %></option>
                    <% end %>
                </datalist>
            <%= if @result do %><pre><%= @result %></pre><% end %>
            </form>
        """
    end

    def mount(_session, socket) do
        {:ok, assign(socket, query: nil, result: nil, loading: false, matches: [])}
    end

    def handle_event("suggest", %{"q" => q}, socket) when byte_size(q) <= 100 do
        {words, _} = System.cmd("grep", ~w"^#{q}.* -m 5 /usr/share/dict/words")
        {:noreply, assign(socket, matches: String.split(words, "\n"))}
    end

    def handle_event("search", %{"q" => q}, socket) when byte_size(q) <= 100 do
        send(self(), {:search, q})
        {:noreply, assign(socket, query: q, result: "…", loading: true, matches: [])}
    end

    def handle_info({:search, query}, socket) do
        {result, _} = System.cmd("dict", ["#{query}"], stderr_to_stdout: true)
        {:noreply, assign(socket, loading: false, result: result, matches: [])}
    end
end

In terms of setup, I’ve taken the following steps:

  1. Add the LiveView dependency to mix.exs:
{:phoenix_live_view, github: "phoenixframework/phoenix_live_view"}
  1. Updated the endpoint configuration in config.exs to include a live_view signing salt:
config :hombench, HombenchWeb.Endpoint,
  url: [host: "localhost"],
  secret_key_base: "rHtwNqM/hUf5axAXdg+/ONecPWiT7kmqnXx53SEYUUR15gxcI2Cbj4tWUYt7H+rR",
  render_errors: [view: HombenchWeb.ErrorView, accepts: ~w(html json)],
  pubsub: [name: Hombench.PubSub, adapter: Phoenix.PubSub.PG2],
  live_view: [
    signing_salt: "4Vz9DYdEwPScZaxrl5VWqk4lGv2GEMNR"
  ]
  1. Added the LiveView flash plug in router.ex:
  pipeline :browser do
    plug :accepts, ["html"]
    plug :fetch_session
    plug :fetch_flash
    plug Phoenix.LiveView.Flash
    plug :protect_from_forgery
    plug :put_secure_browser_headers
  end```

4) Added the live view controller, router and view imports to hombench_web.ex file

def controller do
quote do
use Phoenix.Controller, namespace: HombenchWeb

  import Plug.Conn
  import HombenchWeb.Gettext
  alias HombenchWeb.Router.Helpers, as: Routes
  import Phoenix.LiveView.Controller, only: [live_render: 3]
end

end

def view do
quote do
use Phoenix.View,
root: “lib/hombench_web/templates”,
namespace: HombenchWeb

  # Import convenience functions from controllers
  import Phoenix.Controller, only: [get_flash: 1, get_flash: 2, view_module: 1]

  # Use all HTML functionality (forms, tags, etc)
  use Phoenix.HTML

  import HombenchWeb.ErrorHelpers
  import HombenchWeb.Gettext
  alias HombenchWeb.Router.Helpers, as: Routes
  import Phoenix.LiveView, only: [live_render: 2, live_render: 3, live_link: 1, live_link: 2]
end

end

def router do
quote do
use Phoenix.Router
import Plug.Conn
import Phoenix.Controller
import Phoenix.LiveView.Router
end
end

5) Exposed the socket in endpoint.ex

socket “/live”, Phoenix.LiveView.Socket,
websocket: true

6) Added the:
* LiveView NPM dependencies to the assets/package.json
* Enable connecting to a LiveView socket in the app.js file
* Import the style for the default CSS classes in your app.css

It looks like you have not used your js dependency, which is sending old params. Run the following and report back:

$ mix deps.update phoenix_live_view
$ rm -rf assets/node_modules/phoenix_live_view
$ npm install --prefix assets
2 Likes

Hi @chrismccord, thank you very much for your help.

It didn’t resolve the issue, but it gave me a clue where to look. I was referencing the phoenix_live_view dependency in the packages.json file with some older code:

"phoenix_live_view": "^0.1.0-dev"

 instead of:

"phoenix_live_view": "file:../deps/phoenix_live_view"

Sorry to waste yours and @benwilson512 time! (The problem was between the chair and the keyboard!)

David.

Hi, I’m also encountering a similar error on production (on gigalixir) when I update phoenix_live_view from commit 108c96aca0245fa673307f0e1a617f4b0704e981 (31 May) to the most recent. In my case, there is also a "static => "nil" key-value pair in the match error message.

I have followed what you suggested:

$ mix deps.update phoenix_live_view
$ rm -rf assets/node_modules/phoenix_live_view
$ npm install --prefix assets

and everything works fine in my localhost, however, on gigalixir (using distillery 2.0 for release), I get the error message.

I am trying to narrow down the issue, whether it’s a gigalixir setting (like it is caching the old js), or has there been a change in the api and how mount is called (hence the "static" => nil in the right-hand side) since that commit?

My mount looks like:

def mount(%{resource_id: resource_id, current_user: current_user} = _session, socket) do
    {:ok, assign(socket, 
                 current_user: Accounts.get_user!(current_user.id),
                 resource_id: resource_id)}
  end

and render function:

  def render(assigns) do
    ~L"""
    <div phx-click="toggle_favorite" phx-value="<%= @resource_id %>" >
      <span class="icon"><i class="fas fa-heart"></i></span>
    </div>
    """
  end

And I’m rendering the live_view in my html template:
<%= live_render(@conn, UserLikeLive, session: %{resource_id: @resource.id, current_user: @conn.assigns.current_user}) %>

There is no obvious change to me in how the render or mount has changed since.
Thanks.