Add error handling to notifications

home/ags/files/notifications/Notification.tsx

@@ -39,8 +39,38 @@ export default function Notification({
     onHoverLost: () => void;
 }) {
     const timer = timeout(3000, () => {
-        onHoverLost();
+        try {
+            onHoverLost();
+        } catch (error) {
+            console.error("Failed to handle onHoverLost:", error);
+        }
     });
+
+    const handleDismiss = () => {
+        try {
+            n.dismiss();
+        } catch (error) {
+            console.error("Failed to dismiss notification:", error);
+        }
+    };
+
+    const handleInvoke = (id: string) => {
+        try {
+            n.invoke(id);
+        } catch (error) {
+            console.error(`Failed to invoke action ${id}:`, error);
+        }
+    };
+
+    const handleTime = (timeValue: number) => {
+        try {
+            return time(timeValue);
+        } catch (error) {
+            console.error("Failed to format time:", error);
+            return "Invalid time";
+        }
+    };
+
     return (
         <Adw.Clamp maximumSize={400}>
             <box
@@ -70,9 +100,9 @@ export default function Notification({
                         class="time"
                         hexpand
                         halign={Gtk.Align.END}
-                        label={time(n.time)}
+                        label={handleTime(n.time)}
                     />
-                    <button onClicked={() => n.dismiss()}>
+                    <button onClicked={handleDismiss}>
                         <image iconName="window-close-symbolic" />
                     </button>
                 </box>
@@ -114,7 +144,7 @@ export default function Notification({
                 {n.actions.length > 0 && (
                     <box class="actions">
                         {n.actions.map(({ label, id }) => (
-                            <button hexpand onClicked={() => n.invoke(id)}>
+                            <button hexpand onClicked={() => handleInvoke(id)}>
                                 <label label={label} halign={Gtk.Align.CENTER} hexpand />
                             </button>
                         ))}

home/ags/files/notifications/NotificationPopups.tsx

@@ -14,17 +14,31 @@ export default function NotificationPopups() {
     );
 
     const notifiedHandler = notifd.connect("notified", (_, id, replaced) => {
-        const notification = notifd.get_notification(id);
+        try {
+            const notification = notifd.get_notification(id);
+            if (!notification) {
+                console.error(`Failed to get notification with id: ${id}`);
+                return;
+            }
 
-        if (replaced && notifications.get().some((n) => n.id === id)) {
+            if (replaced && notifications.get().some((n) => n.id === id)) {
-            setNotifications((ns) => ns.map((n) => (n.id === id ? notification : n)));
+                setNotifications((ns) =>
-        } else {
+                    ns.map((n) => (n.id === id ? notification : n)),
-            setNotifications((ns) => [notification, ...ns]);
+                );
+            } else {
+                setNotifications((ns) => [notification, ...ns]);
+            }
+        } catch (error) {
+            console.error("Failed to handle notification:", error);
         }
     });
 
     const resolvedHandler = notifd.connect("resolved", (_, id) => {
-        setNotifications((ns) => ns.filter((n) => n.id !== id));
+        try {
+            setNotifications((ns) => ns.filter((n) => n.id !== id));
+        } catch (error) {
+            console.error("Failed to resolve notification:", error);
+        }
     });
 
     // technically, we don't need to cleanup because in this example this is a root component