From 79ff7d67a5562891dec5e952b1340dffda17289d Mon Sep 17 00:00:00 2001
From: pythongosssss <125205205+pythongosssss@users.noreply.github.com>
Date: Sat, 8 Apr 2023 16:23:57 +0100
Subject: [PATCH 1/3] Add error handling around initial load of workflow

---
 web/scripts/app.js | 39 +++++++++++++++++++++++++++++++++++++--
 1 file changed, 37 insertions(+), 2 deletions(-)

diff --git a/web/scripts/app.js b/web/scripts/app.js
index a687eb5c..c2ba74b3 100644
--- a/web/scripts/app.js
+++ b/web/scripts/app.js
@@ -1,5 +1,5 @@
 import { ComfyWidgets } from "./widgets.js";
-import { ComfyUI } from "./ui.js";
+import { ComfyUI, $el } from "./ui.js";
 import { api } from "./api.js";
 import { defaultGraph } from "./defaultGraph.js";
 import { getPngMetadata, importA1111 } from "./pnginfo.js";
@@ -869,7 +869,42 @@ class ComfyApp {
 			if (n.type == "T2IAdapterLoader") n.type = "ControlNetLoader";
 		}
 
-		this.graph.configure(graphData);
+		try {
+			this.graph.configure(graphData);
+		} catch (error) {
+			let errorHint = "";
+			// Try extracting filename to see if it was caused by an extension
+			const filename = error.fileName || (error.stack || "").match(/\/([\/\w-_\.]+\.js):(\d*):(\d*)/)?.[1];
+			const pos = (filename || "").indexOf("/extensions/");
+			if (pos > -1) {
+				errorHint = "This may be due to the following extension: " + filename.substring(pos + 12);
+			}
+
+			// Show dialog to let the user know something went wrong loading the data
+			this.ui.dialog.show(
+				$el("div", [
+					$el("p", { textContent: "Loading aborted due to error reloading workflow data" }),
+					$el("pre", {
+						style: { padding: "5px", backgroundColor: "rgba(255,0,0,0.2)" },
+						textContent: error.toString(),
+					}),
+					$el("pre", {
+						style: {
+							padding: "5px",
+							color: "#ccc",
+							fontSize: "10px",
+							maxHeight: "50vh",
+							overflow: "auto",
+							backgroundColor: "rgba(255,0,0,0.2)",
+						},
+						textContent: error.stack || "No stacktrace available",
+					}),
+					$el("span", { textContent: errorHint, style: { fontWeight: "bold" } }),
+				]).outerHTML
+			);
+			
+			return;
+		}
 
 		for (const node of this.graph._nodes) {
 			const size = node.computeSize();

From 12f9bfe8951d001b978dec0bd9a288dd39e80400 Mon Sep 17 00:00:00 2001
From: pythongosssss <125205205+pythongosssss@users.noreply.github.com>
Date: Sat, 8 Apr 2023 16:31:10 +0100
Subject: [PATCH 2/3] Better filename check

---
 web/scripts/app.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/web/scripts/app.js b/web/scripts/app.js
index c2ba74b3..deb31f22 100644
--- a/web/scripts/app.js
+++ b/web/scripts/app.js
@@ -873,11 +873,11 @@ class ComfyApp {
 			this.graph.configure(graphData);
 		} catch (error) {
 			let errorHint = "";
-			// Try extracting filename to see if it was caused by an extension
-			const filename = error.fileName || (error.stack || "").match(/\/([\/\w-_\.]+\.js):(\d*):(\d*)/)?.[1];
+			// Try extracting filename to see if it was caused by an extension script
+			const filename = error.fileName || (error.stack || "").match(/(\/extensions\/.*\.js)/)?.[1];
 			const pos = (filename || "").indexOf("/extensions/");
 			if (pos > -1) {
-				errorHint = "This may be due to the following extension: " + filename.substring(pos + 12);
+				errorHint = "This may be due to the following script: " + filename.substring(pos + 12);
 			}
 
 			// Show dialog to let the user know something went wrong loading the data

From b78ebfcf9ddf757a5e807130c723a72460d6f2dd Mon Sep 17 00:00:00 2001
From: pythongosssss <125205205+pythongosssss@users.noreply.github.com>
Date: Sat, 8 Apr 2023 16:37:09 +0100
Subject: [PATCH 3/3] Improve error UI

---
 web/scripts/app.js | 19 ++++++++++++++-----
 1 file changed, 14 insertions(+), 5 deletions(-)

diff --git a/web/scripts/app.js b/web/scripts/app.js
index deb31f22..a8729fb4 100644
--- a/web/scripts/app.js
+++ b/web/scripts/app.js
@@ -872,12 +872,21 @@ class ComfyApp {
 		try {
 			this.graph.configure(graphData);
 		} catch (error) {
-			let errorHint = "";
+			let errorHint = [];
 			// Try extracting filename to see if it was caused by an extension script
 			const filename = error.fileName || (error.stack || "").match(/(\/extensions\/.*\.js)/)?.[1];
 			const pos = (filename || "").indexOf("/extensions/");
 			if (pos > -1) {
-				errorHint = "This may be due to the following script: " + filename.substring(pos + 12);
+				errorHint.push(
+					$el("span", { textContent: "This may be due to the following script:" }),
+					$el("br"),
+					$el("span", {
+						style: {
+							fontWeight: "bold",
+						},
+						textContent: filename.substring(pos),
+					})
+				);
 			}
 
 			// Show dialog to let the user know something went wrong loading the data
@@ -895,14 +904,14 @@ class ComfyApp {
 							fontSize: "10px",
 							maxHeight: "50vh",
 							overflow: "auto",
-							backgroundColor: "rgba(255,0,0,0.2)",
+							backgroundColor: "rgba(0,0,0,0.2)",
 						},
 						textContent: error.stack || "No stacktrace available",
 					}),
-					$el("span", { textContent: errorHint, style: { fontWeight: "bold" } }),
+					...errorHint,
 				]).outerHTML
 			);
-			
+
 			return;
 		}