diff --git a/src/panels/developer-tools/event/event-subscribe-card.ts b/src/panels/developer-tools/event/event-subscribe-card.ts
index 564af64c4b..5c613a13c7 100644
--- a/src/panels/developer-tools/event/event-subscribe-card.ts
+++ b/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}
>
+ ${this._error
+ ? html`${this._error}`
+ : ""}
{
if (this._subscribed) {
this._subscribed();
this._subscribed = undefined;
+ this._error = undefined;
} else {
- this._subscribed = await this.hass!.connection.subscribeEvents(
- (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((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;
diff --git a/src/translations/en.json b/src/translations/en.json
index 125b34c89b..029a4cffc8 100644
--- a/src/translations/en.json
+++ b/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",