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