anken
Automatically clearing flash messages in Phoenix LiveView
Hey, I created a hook to automatically clear flash messages after 5 seconds, in case it’s of anyone’s interest 
Here’s the code
// app.js
let liveSocket = new LiveSocket("/live", Socket, {
// ...
hooks: {
AutoClearFlash: {
mounted() {
let ignoredIDs = ["client-error", "server-error"];
if (ignoredIDs.includes(this.el.id)) return;
let hideElementAfter = 5000; // ms
let clearFlashAfter = hideElementAfter + 500; // ms
// first hide the element
setTimeout(() => {
this.el.style.opacity = 0;
}, hideElementAfter);
// then clear the flash
setTimeout(() => {
this.pushEvent("lv:clear-flash");
}, clearFlashAfter);
},
},
},
});
I also created a post on dev.to with more details: Automatically clearing flash messages in Phoenix LiveView - DEV Community
Most Liked
xir
It’s a nice solution! However, while testing it by triggering an event that causes a flash notification multiple times within the preconfigured 5 seconds, I consistently encountered the following error:
view.js:1521 Uncaught (in promise) Error: unable to push hook event. LiveView not connected
at _View.pushHookEvent (view.js:1521:9)
at _ViewHook.pushEvent (view_hook.ts:388:35)
at hooks.js:19:12
pushHookEvent @ view.js:1521
pushEvent @ view_hook.ts:388
(anonymous) @ hooks.js:19
setTimeout
mounted @ hooks.js:17
So, I slightly modified it, probably not perfectly, by wrapping this.pushEvent in the following if clause:
setTimeout(() => {
if (this.view && this.view.isConnected()) {
this.pushEvent("lv:clear-flash", { key: this.el.dataset.key })
}
this.el.style.display = "none"
}, 5000)
kblake
Simple and works well. Thanks!
anken
Interesting edge case! It never happened to me, but I never really stress tested my solution. Thanks for sharing the issue and your solution!
Popular in Discussions
Other popular topics
Latest Phoenix Threads
Latest on Elixir Forum
Sponsor Spotlight
Build Elixir applications with speed and confidence.
Categories:
Sub Categories:
Forums
Popular Tags
- #ecto
- #liveview
- #troubleshooting
- #learning-elixir
- #deployment
- #library
- #erlang
- #testing
- #genserver
- #mix
- #absinthe
- #remote-other
- #otp
- #plug
- #how-to-question
- #macros
- #postgres
- #channels
- #elixirconf
- #exunit
- #discussion
- #code-sync
- #javascript
- #podcasts
- #onsite
- #dialyzer
- #docker
- #authentication
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #ecto-query
- #elixir-ls
- #phoenix_html
- #iex
- #blog-post
- #graphql
- #genstage
- #ai
- #websockets
- #supervisor
- #advent-of-code
- #elixirconf-us
- #distillery
- #processes
- #forms
- #api
- #metaprogramming
- #security
- #performance
Our Sponsors
Build Elixir applications with speed and confidence.
Supporting innovation across the BEAM ecosystem.
We build reliable cloud platforms for business-critical systems.
Catch errors, track performance, monitor hosts and more.
Real-time error tracking, performance insights, and observability for devs.
Producing high quality Elixir screencasts since 2017.
Enabling companies to succeed by building software people love.
The deployment platform built for Elixir: PaaS ease, VPS control.
The team behind Membrane, Popcorn, LiveDebugger. Available for hire.
Courses that'll move you from confusion to "Aha, now I get it!"