From 7590c5540475d7bf0455bfb57217c0697741c76a Mon Sep 17 00:00:00 2001
From: RMidhunSuresh <hi@midhun.dev>
Date: Mon, 15 Aug 2022 22:28:40 +0530
Subject: [PATCH] Log error when loading css file fails

---
 src/platform/web/Platform.js            | 38 +++++++++++++++++--------
 src/platform/web/theming/ThemeLoader.ts |  6 ++--
 2 files changed, 29 insertions(+), 15 deletions(-)

diff --git a/src/platform/web/Platform.js b/src/platform/web/Platform.js
index 15923a86..df24418c 100644
--- a/src/platform/web/Platform.js
+++ b/src/platform/web/Platform.js
@@ -192,7 +192,7 @@ export class Platform {
                     await this._themeLoader?.init(manifests, log);
                     const { themeName, themeVariant } = await this._themeLoader.getActiveTheme();
                     log.log({ l: "Active theme", name: themeName, variant: themeVariant });
-                    this._themeLoader.setTheme(themeName, themeVariant, log);
+                    await this._themeLoader.setTheme(themeName, themeVariant, log);
                 }
             });
         } catch (err) {
@@ -332,17 +332,31 @@ export class Platform {
         return this._themeLoader;
     }
 
-    replaceStylesheet(newPath) {
-        const head = document.querySelector("head");
-        // remove default theme 
-        document.querySelectorAll(".theme").forEach(e => e.remove());
-        // add new theme
-        const styleTag = document.createElement("link");
-        styleTag.href = newPath;
-        styleTag.rel = "stylesheet";
-        styleTag.type = "text/css";
-        styleTag.className = "theme";
-        head.appendChild(styleTag);
+    async replaceStylesheet(newPath, log) {
+        await this.logger.wrapOrRun(log, { l: "replaceStylesheet", location: newPath, }, async (l) => {
+            let resolve;
+            const promise = new Promise(r => resolve = r);
+            const head = document.querySelector("head");
+            // remove default theme 
+            document.querySelectorAll(".theme").forEach(e => e.remove());
+            // add new theme
+            const styleTag = document.createElement("link");
+            styleTag.href = newPath;
+            styleTag.rel = "stylesheet";
+            styleTag.type = "text/css";
+            styleTag.className = "theme";
+            styleTag.onerror = () => {
+                const error = new Error(`Failed to load stylesheet at ${newPath}`);
+                l.catch(error);
+                resolve();
+                throw error
+            };
+            styleTag.onload = () => {
+                resolve();
+            };
+            head.appendChild(styleTag);
+            await promise;
+        });
     }
 
     get description() {
diff --git a/src/platform/web/theming/ThemeLoader.ts b/src/platform/web/theming/ThemeLoader.ts
index 96293009..d15108a2 100644
--- a/src/platform/web/theming/ThemeLoader.ts
+++ b/src/platform/web/theming/ThemeLoader.ts
@@ -88,8 +88,8 @@ export class ThemeLoader {
         });
     }
 
-    setTheme(themeName: string, themeVariant?: "light" | "dark" | "default", log?: ILogItem) {
-        this._platform.logger.wrapOrRun(log, { l: "change theme", name: themeName, variant: themeVariant }, () => {
+    async setTheme(themeName: string, themeVariant?: "light" | "dark" | "default", log?: ILogItem) {
+        await this._platform.logger.wrapOrRun(log, { l: "change theme", name: themeName, variant: themeVariant }, async (l) => {
             let cssLocation: string, variables: Record<string, string>;
             let themeDetails = this._themeMapping[themeName];
             if ("id" in themeDetails) {
@@ -103,7 +103,7 @@ export class ThemeLoader {
                 cssLocation = themeDetails[themeVariant].cssLocation;
                 variables = themeDetails[themeVariant].variables;
             }
-            this._platform.replaceStylesheet(cssLocation);
+            await this._platform.replaceStylesheet(cssLocation, l);
             if (variables) {
                 log?.log({l: "Derived Theme", variables});
                 this._injectCSSVariables(variables);