Add guard for when default url is not available (#8593)

src/layouts/hass-error-screen.ts

@@ -9,7 +9,8 @@ import {
   TemplateResult,
 } from "lit-element";
 import { HomeAssistant } from "../types";
-import "./hass-subpage";
+import "../components/ha-menu-button";
+import "../components/ha-icon-button-arrow-prev";
 
 @customElement("hass-error-screen")
 class HassErrorScreen extends LitElement {
@@ -17,16 +18,29 @@ class HassErrorScreen extends LitElement {
 
   @property({ type: Boolean }) public toolbar = true;
 
+  @property({ type: Boolean }) public rootnav = false;
+
+  @property() public narrow?: boolean;
+
   @property() public error?: string;
 
   protected render(): TemplateResult {
     return html`
       ${this.toolbar
         ? html`<div class="toolbar">
-            <ha-icon-button-arrow-prev
+            ${this.rootnav
-              .hass=${this.hass}
+              ? html`
-              @click=${this._handleBack}
+                  <ha-menu-button
-            ></ha-icon-button-arrow-prev>
+                    .hass=${this.hass}
+                    .narrow=${this.narrow}
+                  ></ha-menu-button>
+                `
+              : html`
+                  <ha-icon-button-arrow-prev
+                    .hass=${this.hass}
+                    @click=${this._handleBack}
+                  ></ha-icon-button-arrow-prev>
+                `}
           </div>`
         : ""}
       <div class="content">

src/layouts/hass-loading-screen.ts

@@ -16,13 +16,13 @@ import { HomeAssistant } from "../types";
 
 @customElement("hass-loading-screen")
 class HassLoadingScreen extends LitElement {
+  @property({ attribute: false }) public hass?: HomeAssistant;
+
   @property({ type: Boolean, attribute: "no-toolbar" })
   public noToolbar = false;
 
   @property({ type: Boolean }) public rootnav = false;
 
-  @property({ attribute: false }) public hass?: HomeAssistant;
-
   @property() public narrow?: boolean;
 
   protected render(): TemplateResult {

src/layouts/partial-panel-resolver.ts

@@ -7,6 +7,7 @@ import {
 import { customElement, property, PropertyValues } from "lit-element";
 import { deepActiveElement } from "../common/dom/deep-active-element";
 import { deepEqual } from "../common/util/deep-equal";
+import { getDefaultPanel } from "../data/panel";
 import { CustomPanelInfo } from "../data/panel_custom";
 import { HomeAssistant, Panels } from "../types";
 import { removeInitSkeleton } from "../util/init-skeleton";
@@ -37,25 +38,6 @@ const COMPONENTS = {
     import("../panels/media-browser/ha-panel-media-browser"),
 };
 
-const getRoutes = (panels: Panels): RouterOptions => {
-  const routes: RouterOptions["routes"] = {};
-  Object.values(panels).forEach((panel) => {
-    const data: RouteOptions = {
-      tag: `ha-panel-${panel.component_name}`,
-      cache: CACHE_URL_PATHS.includes(panel.url_path),
-    };
-    if (panel.component_name in COMPONENTS) {
-      data.load = COMPONENTS[panel.component_name];
-    }
-    routes[panel.url_path] = data;
-  });
-
-  return {
-    showLoading: true,
-    routes,
-  };
-};
-
 @customElement("partial-panel-resolver")
 class PartialPanelResolver extends HassRouterPage {
   @property({ attribute: false }) public hass!: HomeAssistant;
@@ -144,6 +126,31 @@ class PartialPanelResolver extends HassRouterPage {
     }
   }
 
+  private getRoutes(panels: Panels): RouterOptions {
+    const routes: RouterOptions["routes"] = {};
+    Object.values(panels).forEach((panel) => {
+      const data: RouteOptions = {
+        tag: `ha-panel-${panel.component_name}`,
+        cache: CACHE_URL_PATHS.includes(panel.url_path),
+      };
+      if (panel.component_name in COMPONENTS) {
+        data.load = COMPONENTS[panel.component_name];
+      }
+      routes[panel.url_path] = data;
+    });
+
+    return {
+      beforeRender: (page) => {
+        if (!page || !routes[page]) {
+          return getDefaultPanel(this.hass).url_path;
+        }
+        return undefined;
+      },
+      showLoading: true,
+      routes,
+    };
+  }
+
   private _onHidden() {
     this._hiddenTimeout = window.setTimeout(() => {
       this._hiddenTimeout = undefined;
@@ -191,7 +198,7 @@ class PartialPanelResolver extends HassRouterPage {
   }
 
   private async _updateRoutes(oldPanels?: HomeAssistant["panels"]) {
-    this.routerOptions = getRoutes(this.hass.panels);
+    this.routerOptions = this.getRoutes(this.hass.panels);
 
     if (
       !this._waitForStart &&