type1fool

type1fool

@ryanwinchester Thanks for this article! I knew this was possible, and the examples made it clear how to implement handler fallbacks. This is super useful in the MyAppWeb.live_view/0 macro, where I don’t want to crash on unhandled events and messages.

Why Do This?

When a form control uses phx-debounce, often, an event will be triggered even after the user has submitted the form. For example, if a form has both phx-change & phx-submit events and an input uses phx-debounce="blur" or some large debounce timeout (200+), a user will often quickly type a value and hit Enter. When this happens, the submit event is triggered, the user may be redirected to another route, and the change event will be routed to a LiveView which wasn’t expecting it.

I applied the approach in the article to the MyAppWeb.live_view/0 macro, and now, those debounced events show up as logger warnings instead of crashing the socket. The user experience is much better this way, and now I can remove several copies of fallback event/message handlers that are no longer necessary.

Nice work!

Default LiveView Behavior?

Now, I wonder if this should be the default behavior in new LiveView applications. I vaguely remember @chrismccord mentioning real-world lessons learned after working at Fly, particularly how “let it crash” isn’t ideal for some (most?) user interfaces. The context was more around async tasks, but I think there’s a case to be made for gracefully handling unexpected events, messages, and providing some fallback implementations for the LiveView behaviour. Logging warnings seems like a good balance that will prevent Sentry and other error alerts when this common user behavior trips up our LiveView apps.

Showing Posts 1 to 3

chrismccord

chrismccord

Creator of Phoenix

Latent debounces shouldn’t be happening if the form has been submitted as we specifically have code to handle this. Can you put together a minimal issues that reproduces the problem? Thanks!

type1fool

type1fool OP

It could be that the primary app I’m maintaining is on an older version of PhoenixLiveView or we’ve somehow subverted that default behavior. I’ll spin up a fresh app with the latest versions and see if I can reproduce. If so, I’ll open an issue. :heart_decoration:

type1fool

type1fool OP

On a fresh app with Phoenix 1.7.14 and PhoenixLiveView 1.0.0-rc.6, I can confirm debounced change event appears to be processed before the form submission event.

https://github.com/type1fool/yolo/tree/main/lib/yolo_web/live

[debug] HANDLE EVENT "validate" in YoloWeb.DebounceLive
  Parameters: %{"_target" => ["yolo", "name"], "yolo" => %{"name" => "as0d9f8as09df80a9sdf09as8df9asd08f"}}
[info] [validate: %{"name" => "as0d9f8as09df80a9sdf09as8df9asd08f"}]
[debug] Replied in 872µs
[debug] HANDLE EVENT "pewpew" in YoloWeb.DebounceLive
  Parameters: %{"yolo" => %{"name" => "as0d9f8as09df80a9sdf09as8df9asd08f"}}
[info] [pewpew: %{"name" => "as0d9f8as09df80a9sdf09as8df9asd08f"}]
[debug] Replied in 454µs
[debug] MOUNT YoloWeb.PewpewLive
  Parameters: %{"name" => "as0d9f8as09df80a9sdf09as8df9asd08f"}
  Session: %{"_csrf_token" => "bEgWWu1cumbHhHVjCdmIbyn0"}
[debug] Replied in 121µs

There still seems to be value in preventing socket crashes when unexpected events and messages are received by a LiveView.

  • During development, warning/error logs could raise awareness for developers about what’s happening in a way that might be clearer than the socket crash error.
  • In production, users would be less alarmed when an omission or mistake has happened in the code, and developers could customize and opt into error logs.

I’m thinking of cases where a complex application uses PubSub, where a new message arrives in a topic and one or more subscribing LVs hasn’t been updated to handle it. Ideally, this would never happen, but mistakes and oversights do creep in sometimes.

The beauty of the fallback implementations is that the framework could still log errors by default without showing the big red flash to users. I understand it’s debatable whether crashes are good or bad UI and whether unexpected events & messages should be conveyed to the user at all. Outside of Phoenix, it seems that kind of thing would be logged to the browser console, and not always presented in the UI.

TLDR: Should it crash?

— All posts loaded —

Where Next? Top

Trending in Discussions Top

juhalehtonen
There has been a thread to discuss the Stack Overflow Developer Survey on this forum every year since 2018, so here’s yet another one for...
New
axelson
Hi there! :wave: @frigidcode and I (but mostly him) have been running an Elixir Book club, we’re almost done with Designing Elixir Syste...
New
budgie
I love Elixir. It’s one of 2 programming languages I’ve ever fallen in love with. But I don’t use it anymore. Serverless was the promis...
New
alexslade
Fly’s CEO posted this recently - Turn And Face The Strange · The Fly Blog It says that Fly is going all-in on sprites, which is a worry ...
New
jam
This was an interesting post by Jose. Curious to hear what others think. Evolving programming languages in the AI era - Dashbit Blog Gen...
New
sntran
In my third year of college, around 2010, I found Erlang. A few years later, I found Elixir. I liked the ideas at once: many small proces...
New
Ganna
Hi everyone, I have 8 years of production experience with Erlang/OTP and I’m just starting to get to know Elixir. What would you learn f...
New

Other Trending Topics Top

mudasobwa
I fully migrated to my own harness from Anthropic/Gemini and I think it’s time to share it. Welcome DSH, the DeepSeek Harness, fully writ...
New
KristerV
Hey. Is there anyone here who creates agents in their apps? Not talking about using agents, but creating them. I’m finding it pretty diff...
New
jimsynz
Beam Bots (or just BB for short) is a framework for building fault-tolerant robotics applications in Elixir using familiar OTP patterns. ...
New
webofbits
With AI doing more of the implementation work, I’ve been wondering how much coding I should deliberately keep doing myself. My main conc...
#ai
New
ausimian
Emily is an Elixir library that runs Nx computations on Apple’s MLX. Install it as the default Nx backend and Nx, defn, Axon, Nx.Serving,...
New
OndrejValenta
(I just needed to vent somewhere and LinkedIn is full of hope, or hype, I’m not sure which exactly) AI dream has many faces, but general...
New

We're in Beta

About us Mission Statement

Options

Thread Display Mode




Thread Preview

Skip Thread Previews