Displays red favicon when websocket was closed

front/index.html

@@ -12,6 +12,7 @@
         <link data-trunk rel="copy-file" href="/static/1px.png" />
         <link data-trunk rel="copy-file" href="/static/favicon.ico" />
         <link data-trunk rel="copy-file" href="/static/favicon-unread.ico" />
+        <link data-trunk rel="copy-file" href="/static/favicon-error.ico" />
         <link data-trunk rel="copy-file" href="/static/logo.png" />
         <link data-trunk rel="copy-file" href="/static/lib/bootstrap-icons/bootstrap-icons.svg"/>
         <link data-trunk rel="copy-file" href="/static/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>

front/src/components/app.rs

@@ -68,6 +68,7 @@ enum Message {
     Event(crate::Event),
     #[allow(dead_code)]
     Websocket(wasm_sockets::Message),
+    WebsocketError,
 }
 
 #[derive(PartialEq, yew::Properties)]
@@ -92,10 +93,21 @@ impl ComponentLoc {
 
         match wasm_sockets::EventClient::new(&ws_url) {
             Ok(mut websocket) => {
-                let link = link.clone();
-
+                let l = link.clone();
                 websocket.set_on_message(Some(Box::new(move |_, msg| {
-                    link.send_message(Message::Websocket(msg));
+                    l.send_message(Message::Websocket(msg));
+                })));
+
+                let l = link.clone();
+                websocket.set_on_error(Some(Box::new(move |error| {
+                    log::error!("{error:?}");
+                    l.send_message(Message::WebsocketError);
+                })));
+
+                let l = link.clone();
+                websocket.set_on_close(Some(Box::new(move |event| {
+                    log::error!("{event:?}");
+                    l.send_message(Message::WebsocketError);
                 })));
 
                 Some(websocket)
@@ -149,6 +161,7 @@ impl yew::Component for ComponentLoc {
                 _ => (),
             },
             Message::Websocket(_) => self.event_bus.send(crate::Event::ItemUpdate),
+            Message::WebsocketError => self.event_bus.send(crate::Event::WebsocketError),
         }
 
         should_render

front/src/components/sidebar.rs

@@ -120,6 +120,7 @@ pub struct Component {
     current_route: super::app::Route,
     event_bus: yew_agent::Dispatcher<crate::event::Bus>,
     links: Links,
+    in_error: bool,
     _producer: Box<dyn yew_agent::Bridge<crate::event::Bus>>,
 }
 
@@ -138,6 +139,7 @@ impl yew::Component for Component {
         let component = Self {
             current_route: ctx.props().current_route.clone(),
             event_bus: crate::event::Bus::dispatcher(),
+            in_error: false,
             links: Links::new(),
             _producer: crate::event::Bus::bridge(std::rc::Rc::new(callback)),
         };
@@ -164,6 +166,10 @@ impl yew::Component for Component {
 
                     should_render = true;
                 }
+                crate::Event::WebsocketError => {
+                    self.in_error = true;
+                    should_render = true;
+                }
                 _ => (),
             },
             Message::Error(err) => crate::send_error(ctx, &err),
@@ -197,7 +203,9 @@ impl yew::Component for Component {
     }
 
     fn view(&self, ctx: &yew::Context<Self>) -> yew::Html {
-        let favicon = if self.links.has_unread() {
+        let favicon = if self.in_error {
+            "/favicon-error.ico"
+        } else if self.links.has_unread() {
             "/favicon.ico"
         } else {
             "/favicon-unread.ico"

front/src/event.rs

@@ -9,6 +9,7 @@ pub enum Event {
     SourceUpdate,
     Redirect(String),
     Redirected(String),
+    WebsocketError,
 }
 
 #[derive(Clone, Debug, Eq, PartialEq, serde::Deserialize, serde::Serialize)]