Handle exceptions when subscribing from the event dev tool (#22191)

* Handle exceptions when subscribing from the event dev tool

* use ha-alert for the error msg

* import ha-alert element

* use undefined instead of null to align with the rest of the code base

src/panels/developer-tools/event/event-subscribe-card.ts

@@ -7,6 +7,7 @@ import "../../../components/ha-card";
 import "../../../components/ha-textfield";
 import "../../../components/ha-yaml-editor";
 import "../../../components/ha-button";
+import "../../../components/ha-alert";
 import { HomeAssistant } from "../../../types";
 
 @customElement("event-subscribe-card")
@@ -22,6 +23,8 @@ class EventSubscribeCard extends LitElement {
     event: HassEvent;
   }> = [];
 
+  @state() private _error?: string;
+
   private _eventCount = 0;
 
   public disconnectedCallback() {
@@ -52,6 +55,9 @@ class EventSubscribeCard extends LitElement {
             .value=${this._eventType}
             @input=${this._valueChanged}
           ></ha-textfield>
+          ${this._error
+            ? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
+            : ""}
         </div>
         <div class="card-actions">
           <ha-button
@@ -110,33 +116,43 @@ class EventSubscribeCard extends LitElement {
 
   private _valueChanged(ev): void {
     this._eventType = ev.target.value;
+    this._error = undefined;
   }
 
   private async _startOrStopListening(): Promise<void> {
     if (this._subscribed) {
       this._subscribed();
       this._subscribed = undefined;
+      this._error = undefined;
     } else {
-      this._subscribed = await this.hass!.connection.subscribeEvents<HassEvent>(
-        (event) => {
-          const tail =
-            this._events.length > 30 ? this._events.slice(0, 29) : this._events;
-          this._events = [
-            {
-              event,
-              id: this._eventCount++,
-            },
-            ...tail,
-          ];
-        },
-        this._eventType
-      );
+      try {
+        this._subscribed =
+          await this.hass!.connection.subscribeEvents<HassEvent>((event) => {
+            const tail =
+              this._events.length > 30
+                ? this._events.slice(0, 29)
+                : this._events;
+            this._events = [
+              {
+                event,
+                id: this._eventCount++,
+              },
+              ...tail,
+            ];
+          }, this._eventType);
+      } catch (error: any) {
+        this._error = this.hass!.localize(
+          "ui.panel.developer-tools.tabs.events.subscribe_failed",
+          { error: error.message || "Unknown error" }
+        );
+      }
     }
   }
 
   private _clearEvents(): void {
     this._events = [];
     this._eventCount = 0;
+    this._error = undefined;
   }
 
   static get styles(): CSSResultGroup {
@@ -145,6 +161,9 @@ class EventSubscribeCard extends LitElement {
         display: block;
         margin-bottom: 16px;
       }
+      .error-message {
+        margin-top: 8px;
+      }
       .event {
         border-top: 1px solid var(--divider-color);
         padding-top: 8px;

src/translations/en.json

@@ -6899,7 +6899,8 @@
             "stop_listening": "Stop listening",
             "clear_events": "Clear events",
             "alert_event_type": "Event type is a mandatory field",
-            "notification_event_fired": "Event {type} successfully fired!"
+            "notification_event_fired": "Event {type} successfully fired!",
+            "subscribe_failed": "Failed to subscribe to event: {error}"
           },
           "actions": {
             "title": "Actions",