How do the client and server error flashes get displayed?

axelclark · September 14, 2024, 1:15am

In the the generated Phoenix CoreComponents module there are flashes for client and server errors:

phoenixframework/phoenix/blob/86cf2ec38790ca2f14733e9136ac71e967b4bc4d/priv/templates/phx.gen.live/core_components.ex#L148-L169


      
          <.flash
            id="client-error"
            kind={:error}
            title="We can't find the internet"
            phx-disconnected={show(".phx-client-error #client-error")}
            phx-connected={hide("#client-error")}
            hidden
          >
            Attempting to reconnect <.icon name="hero-arrow-path" class="ml-1 h-3 w-3 animate-spin" />
          </.flash>
          
          <.flash
            id="server-error"
            kind={:error}
            title="Something went wrong!"
            phx-disconnected={show(".phx-server-error #server-error")}
            phx-connected={hide("#server-error")}
            hidden
          >
            Hang in there while we get back on track

This file has been truncated. show original

It looks like both are displayed based on the phx-disconnected event. What causes one to be displayed vs the other?

rhcarvalho · September 15, 2024, 8:15am

On mobile now, sorry for being brief.

The key to the “trick” is in which CSS class in set on a parent container. Either phx-server-error or phx-client-error class is added, causing the selector to match. When no element is selected the calls to show and hide are no-ops.

Searching for those class names in Phoenix/LiveView will give you the full picture.

Because LiveView builds on top of Phoenix Channels, you will find some code is actually part of Phoenix instead of the LiveView repo as one could expect.

axelclark · September 16, 2024, 4:29pm

Thanks for the suggestion! Here is an example of where those classes get applied:

github.com

phoenixframework/phoenix_live_view/blob/e9732e05a45806077c22091f1b3869b8a50399db/priv/static/phoenix_live_view.js#L3662-L3667


      
            if (this.liveSocket.isConnected()) {
              this.displayError([PHX_LOADING_CLASS, PHX_ERROR_CLASS, PHX_SERVER_ERROR_CLASS]);
            } else {
              this.displayError([PHX_LOADING_CLASS, PHX_ERROR_CLASS, PHX_CLIENT_ERROR_CLASS]);
            }
          }