Merge pull request #654 from maxwroc/CatchExceptions

Render error card when exception happens
maxwroc · Jan 13, 2024 · 7bc2d9c · 7bc2d9c
2 parents cace8b3 + b7b425f
commit 7bc2d9c
Show file tree

Hide file tree

Showing 3 changed files with 70 additions and 9 deletions.
diff --git a/src/custom-elements/battery-state-card.ts b/src/custom-elements/battery-state-card.ts
@@ -52,7 +52,6 @@ export class BatteryStateCard extends LovelaceCard<IBatteryCardConfig> {
     }
 
     async internalUpdate(configUpdated: boolean, hassUpdated: boolean) {
-
         if (this.batteryProvider == undefined || configUpdated) {
             // checking whether we should apply default config
             if (Object.keys(this.config).length == 1) {
@@ -88,18 +87,22 @@ export class BatteryStateCard extends LovelaceCard<IBatteryCardConfig> {
         }
     }
 
-    render(): TemplateResult<1> {
+    internalRender(): TemplateResult<1> {
         if (this.list.length == 0 && this.groups.length == 0) {
             // if there are no entities to show we don't want to render anything
             this.style.display = "none";
             return html``;
         }
-
+        
         this.style.removeProperty("display");
 
         return cardHtml(this);
     }
 
+    onError(): void {
+        this.style.removeProperty("display");
+    }
+
     /**
      * Gets the height of your card.
      *

diff --git a/src/custom-elements/battery-state-entity.ts b/src/custom-elements/battery-state-entity.ts
@@ -73,7 +73,6 @@ export class BatteryStateEntity extends LovelaceCard<IBatteryEntityConfig> {
     }
 
     async internalUpdate() {
-
         this.entityData = <any>{
             ...this.hass?.states[this.config.entity]
         };
@@ -101,10 +100,13 @@ export class BatteryStateEntity extends LovelaceCard<IBatteryEntityConfig> {
         this.setupAction(false);
     }
 
-    render() {
+    internalRender() {
         return batteryHtml(this);
     }
 
+    onError(): void {
+    }
+
     /**
      * Adding or removing action
      * @param enable Whether to enable/add the tap action

diff --git a/src/custom-elements/lovelace-card.ts b/src/custom-elements/lovelace-card.ts
@@ -1,12 +1,19 @@
-import { LitElement, TemplateResult } from "lit";
+import { LitElement, TemplateResult, html } from "lit";
 import { HomeAssistantExt } from "../type-extensions";
 import { throttledCall } from "../utils";
+import { property } from "lit/decorators.js"
 
 /**
  * Lovelace UI component/card base
  */
 export abstract class LovelaceCard<TConfig> extends LitElement {
 
+    /**
+     * Error
+     */
+    @property({ attribute: false })
+    public error: Error | undefined;
+
     /**
      * HomeAssistant object
      */
@@ -40,7 +47,19 @@ export abstract class LovelaceCard<TConfig> extends LitElement {
      * the last one.
      */
     private triggerUpdate = throttledCall(async () => {
-        await this.internalUpdate(this.configUpdated, this.hassUpdated);
+
+        try {
+            await this.internalUpdate(this.configUpdated, this.hassUpdated);
+            this.error = undefined;
+        }
+        catch (e: unknown) {
+            if (typeof e === "string") {
+                this.error = { message: e, name: "" };
+            }
+            else if (e instanceof Error) {
+                this.error = e;
+            }
+        }
 
         if (this.configUpdated) {
             // always rerender when config has changed
@@ -94,5 +113,42 @@ export abstract class LovelaceCard<TConfig> extends LitElement {
      */
     abstract internalUpdate(config: boolean, hass:boolean): Promise<void>;
 
-    abstract render(): TemplateResult<1>;
-}
+    /**
+     * Handler called when render was triggered and updated HTML template is required
+     */
+    abstract internalRender(): TemplateResult<1>;
+
+    /**
+     * Handler called when exception was caught to let know the card
+     */
+    abstract onError(): void;
+
+    render(): TemplateResult<1> {
+        if (this.error) {
+            this.onError();
+            return errorHtml(this.tagName, "Exception: " + this.error.message, this.error.stack);
+        }
+
+        return this.internalRender();
+    }
+}
+
+const errorHtml = (cardName: string, message: string, content: string | undefined) => html`
+<ha-alert alert-type="error" title="${cardName}">
+    <p>
+        <strong>${message}</strong>
+    <p>
+    <ol>
+        <li>
+            Please check if the problem was reported already<br />
+            Click <a target="_blank" href="https://github.com/maxwroc/battery-state-card/issues?q=is%3Aissue+is%3Aopen+${encodeURIComponent(message)}">here</a> to search
+        </li>
+        <li>
+            If it wasn't please consider creating one<br />
+            Click <a target="_blank" href="https://github.com/maxwroc/battery-state-card/issues/new?assignees=&labels=bug&projects=&template=bug_report.md&title=${encodeURIComponent(message)}">here</a> to create<br />
+            Please copy-paste the below stack trace.
+        </li>
+    </ol>
+    <pre>${content}</pre>
+</ha-alert>
+`;