Add error handling around initial load of workflow

web/scripts/app.js

 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();