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",