Add troubleshooting information to error display.

README.md

@@ -185,3 +185,34 @@ Full viewing of clips:
 This card supports full editing via the Lovelace card editor. Additional arbitrary configuration for WebRTC may be specified in YAML mode.
 
 <img src="https://raw.githubusercontent.com/dermotduffy/frigate-hass-card/main/images/editor.png" alt="Live viewing" width="400px">
+
+## Troubleshooting
+
+### Failed to fetch / Cannot load clips or snapshots
+
+`Failed to fetch` is a generic error indicating your browser (and this card)
+could not communicate with the Frigate server specified in the card
+configuration. This could be for any number of reasons (e.g. incorrect URL,
+incorrect port, broken DNS, etc). 
+
+If the 'globe' icon in the menu bar of the card also doesn't open the Frigate
+UI, the address entered is probably incorrect/inaccessible.
+
+#### Mixed content
+
+If you are accessing your Home Assistant instance over `https`, you will likely
+receive this error unless you have configured the card to also communicate with
+Frigate via `https` (e.g. via a reverse proxy). This is because the browser is
+blocking the attempt to mix access to both `https` and `http` resources.
+
+The javascript console ([how to access](https://javascript.info/devtools)) will
+show an error such as:
+
+```
+Mixed Content: The page at '<URL>' was loaded over HTTPS, but requested an 
+insecure resource '<URL>'. This request has been blocked; the content must be
+served over HTTPS.
+```
+
+Accessing both Home Assistant and Frigate over `https` will likely resolve this
+issue (e.g. through the use of a reverse proxy in front of Frigate).

src/frigate-hass-card.ts

@@ -45,6 +45,8 @@ import dayjs from 'dayjs';
 import dayjs_utc from 'dayjs/plugin/utc';
 import dayjs_timezone from 'dayjs/plugin/timezone';
 
+const URL_TROUBLESHOOTING = "https://github.com/dermotduffy/frigate-hass-card#troubleshooting";
+
 // Load dayjs plugins.
 dayjs.extend(dayjs_timezone);
 dayjs.extend(dayjs_utc);
@@ -425,17 +427,22 @@ export class FrigateCard extends LitElement {
   // Render an attention grabbing icon.
   protected _renderAttentionIcon(
     icon: string,
-    tooltip: string | null = null,
+    message: string | TemplateResult | null = null,
   ): TemplateResult {
     return html` <div class="frigate-card-attention">
-      <ha-icon data-toggle="tooltip" title=${tooltip ? tooltip : ''} icon="${icon}">
-      </ha-icon>
+      <span>
+        <ha-icon icon="${icon}">
+        </ha-icon>
+        ${message ? html`&nbsp;${message}` : ''}
+      </span>
     </div>`;
   }
 
   // Render an embedded error situation.
   protected _renderError(error: string): TemplateResult {
-    return this._renderAttentionIcon('mdi:alert-circle', error);
+    return this._renderAttentionIcon(
+      'mdi:alert-circle',
+      html`${error}. See <a href="${URL_TROUBLESHOOTING}">troubleshooting</a></span>.`);
   }
 
   // Generate a human-readable title from an event.
@@ -465,7 +472,7 @@ export class FrigateCard extends LitElement {
         has_snapshot: !want_clips,
       });
     } catch (e) {
-      return this._renderError(e);
+      return this._renderError(e.message);
     }
 
     if (!events.length) {
@@ -622,7 +629,7 @@ export class FrigateCard extends LitElement {
           limit: 1,
         });
       } catch (e) {
-        return this._renderError(e);
+        return this._renderError(e.message);
       }
       if (!events.length) {
         return this._renderAttentionIcon('mdi:camera-off', 'No recent clip');
@@ -677,7 +684,7 @@ export class FrigateCard extends LitElement {
           limit: 1,
         });
       } catch (e) {
-        return this._renderError(e);
+        return this._renderError(e.message);
       }
       if (!events.length) {
         return this._renderAttentionIcon('mdi:filmstrip-off', 'No recent snapshots');