Custom error page when failing to load Supervisor panel (#8465)

src/entrypoints/custom-panel.ts

@@ -9,6 +9,7 @@ import "../resources/safari-14-attachshadow-patch";
 import { createCustomPanelElement } from "../util/custom-panel/create-custom-panel-element";
 import { loadCustomPanel } from "../util/custom-panel/load-custom-panel";
 import { setCustomPanelProperties } from "../util/custom-panel/set-custom-panel-properties";
+import { baseEntrypointStyles } from "../resources/styles";
 
 declare global {
   interface Window {
@@ -41,6 +42,7 @@ function initialize(
   properties: Record<string, unknown>
 ) {
   const style = document.createElement("style");
+
   style.innerHTML = "body{margin:0}";
   document.head.appendChild(style);
 
@@ -86,7 +88,24 @@ function initialize(
       (err) => {
         // eslint-disable-next-line
         console.error(err, panel);
-        alert(`Unable to load the panel source: ${err}.`);
+        let errorScreen;
+        if (panel.url_path === "hassio") {
+          import("../layouts/supervisor-error-screen");
+          errorScreen = document.createElement(
+            "supervisor-error-screen"
+          ) as any;
+        } else {
+          import("../layouts/hass-error-screen");
+          errorScreen = document.createElement("hass-error-screen") as any;
+          errorScreen.error = `Unable to load the panel source: ${err}.`;
+        }
+
+        const errorStyle = document.createElement("style");
+        errorStyle.innerHTML = baseEntrypointStyles.cssText;
+        document.body.appendChild(errorStyle);
+
+        errorScreen.hass = properties.hass;
+        document.body.appendChild(errorScreen);
       }
     );
 }

src/layouts/hass-error-screen.ts

@@ -46,7 +46,9 @@ class HassErrorScreen extends LitElement {
       <div class="content">
         <h3>${this.error}</h3>
         <slot>
-          <mwc-button @click=${this._handleBack}>go back</mwc-button>
+          <mwc-button @click=${this._handleBack}>
+            ${this.hass?.localize("ui.panel.error.go_back") || "go back"}
+          </mwc-button>
         </slot>
       </div>
     `;

src/layouts/supervisor-error-screen.ts

@@ -0,0 +1,188 @@
+import "../components/ha-card";
+import "@material/mwc-button";
+import {
+  css,
+  CSSResultArray,
+  customElement,
+  html,
+  LitElement,
+  property,
+  PropertyValues,
+  TemplateResult,
+} from "lit-element";
+import { HomeAssistant } from "../types";
+import "./hass-subpage";
+import "../resources/ha-style";
+import "../resources/roboto";
+import { haStyle } from "../resources/styles";
+import { applyThemesOnElement } from "../common/dom/apply_themes_on_element";
+import { atLeastVersion } from "../common/config/version";
+
+@customElement("supervisor-error-screen")
+class SupervisorErrorScreen extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  protected firstUpdated(changedProps: PropertyValues) {
+    super.firstUpdated(changedProps);
+
+    this._applyTheme();
+  }
+
+  protected updated(changedProps: PropertyValues) {
+    super.updated(changedProps);
+    const oldHass = changedProps.get("hass") as HomeAssistant | undefined;
+    if (!oldHass) {
+      return;
+    }
+    if (oldHass.themes !== this.hass.themes) {
+      this._applyTheme();
+    }
+  }
+
+  protected render(): TemplateResult {
+    return html`
+      <div class="toolbar">
+        <ha-icon-button-arrow-prev
+          .hass=${this.hass}
+          @click=${this._handleBack}
+        ></ha-icon-button-arrow-prev>
+      </div>
+      <div class="content">
+        <div class="title">
+          ${this.hass.localize("ui.panel.error.supervisor.title")}
+        </div>
+        <ha-card header="Troubleshooting">
+          <div class="card-content">
+            <ol>
+              <li>
+                ${this.hass.localize("ui.panel.error.supervisor.wait")}
+              </li>
+              <li>
+                <a
+                  class="supervisor_error-link"
+                  href="http://homeassistant.local:4357"
+                  target="_blank"
+                  rel="noreferrer"
+                >
+                  ${this.hass.localize("ui.panel.error.supervisor.observer")}
+                </a>
+              </li>
+              <li>
+                ${this.hass.localize("ui.panel.error.supervisor.reboot")}
+              </li>
+              <li>
+                <a href="/config/info" target="_parent">
+                  ${this.hass.localize(
+                    "ui.panel.error.supervisor.system_health"
+                  )}
+                </a>
+              </li>
+              <li>
+                <a
+                  href="https://www.home-assistant.io/help/"
+                  target="_blank"
+                  rel="noreferrer"
+                >
+                  ${this.hass.localize("ui.panel.error.supervisor.ask")}
+                </a>
+              </li>
+            </ol>
+          </div>
+        </ha-card>
+      </div>
+    `;
+  }
+
+  private _applyTheme() {
+    let themeName: string;
+    let options: Partial<HomeAssistant["selectedTheme"]> | undefined;
+
+    if (atLeastVersion(this.hass.config.version, 0, 114)) {
+      themeName =
+        this.hass.selectedTheme?.theme ||
+        (this.hass.themes.darkMode && this.hass.themes.default_dark_theme
+          ? this.hass.themes.default_dark_theme!
+          : this.hass.themes.default_theme);
+
+      options = this.hass.selectedTheme;
+      if (themeName === "default" && options?.dark === undefined) {
+        options = {
+          ...this.hass.selectedTheme,
+          dark: this.hass.themes.darkMode,
+        };
+      }
+    } else {
+      themeName =
+        ((this.hass.selectedTheme as unknown) as string) ||
+        this.hass.themes.default_theme;
+    }
+
+    applyThemesOnElement(
+      this.parentElement,
+      this.hass.themes,
+      themeName,
+      options
+    );
+  }
+
+  private _handleBack(): void {
+    history.back();
+  }
+
+  static get styles(): CSSResultArray {
+    return [
+      haStyle,
+      css`
+        .toolbar {
+          display: flex;
+          align-items: center;
+          font-size: 20px;
+          height: var(--header-height);
+          padding: 0 16px;
+          pointer-events: none;
+          background-color: var(--app-header-background-color);
+          font-weight: 400;
+          box-sizing: border-box;
+        }
+        ha-icon-button-arrow-prev {
+          pointer-events: auto;
+        }
+        .content {
+          color: var(--primary-text-color);
+          display: flex;
+          padding: 16px;
+          align-items: center;
+          justify-content: center;
+          flex-direction: column;
+        }
+        .title {
+          font-size: 24px;
+          font-weight: 400;
+          line-height: 32px;
+          padding-bottom: 16px;
+        }
+
+        a {
+          color: var(--mdc-theme-primary);
+        }
+
+        ha-card {
+          width: 600px;
+          margin: 16px;
+          padding: 8px;
+        }
+        @media all and (max-width: 500px) {
+          ha-card {
+            width: calc(100vw - 32px);
+          }
+        }
+      `,
+    ];
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "supervisor-error-screen": SupervisorErrorScreen;
+  }
+}

src/resources/styles.ts

@@ -355,3 +355,12 @@ export const haStyleScrollbar = css`
     scrollbar-width: thin;
   }
 `;
+
+export const baseEntrypointStyles = css`
+  body {
+    background-color: var(--primary-background-color);
+    color: var(--primary-text-color);
+    height: calc(100vh - 32px);
+    width: 100vw;
+  }
+`;

src/translations/en.json

@@ -3424,6 +3424,17 @@
           "complete_access": "It will have access to all data in Home Assistant.",
           "hide_message": "Check docs for the panel_custom component to hide this message"
         }
+      },
+      "error": {
+        "go_back": "Go back",
+        "supervisor": {
+          "title": "Could not load the Supervisor panel!",
+          "wait": "If you just started, make sure you have given the supervisor enough time to start.",
+          "ask": "Ask for help",
+          "reboot": "Try a reboot of the host",
+          "observer": "Check the Observer",
+          "system_health": "Check System Health"
+        }
       }
     }
   },