added more user friendly error message

When JavaScript errors occur outside of the renderer, they'll no longer
display a big and confusingly detailed error stack, now they'll simply
be shown a toast about the fact that an error happened.

The user can then click this to get more details, but still without it
being as invasive and obtuse as before.

2 files changed, 24 insertions, 1 deletions

diff --git a/src/app/main.js b/src/app/main.js
index bd25071..9d59cbc 100644
--- a/src/app/main.js
+++ b/src/app/main.js
@@ -138,6 +138,25 @@ ipcRenderer.on("ns-update-event", (event, key) => {
 	}
 });
 
+ipcRenderer.on("unknown-error", (event, err) => {
+	new Toast({
+		timeout: 10000,
+		scheme: "error",
+		title: lang("gui.toast.title.unknown_error"),
+		description: lang("gui.toast.desc.unknown_error"),
+		callback: () => {
+			new Toast({
+				timeout: 15000,
+				scheme: "error",
+				title: "",
+				description: err.stack.replaceAll("\n", "<br>")
+			})
+		}
+	})
+
+	console.error(err.stack)
+})
+
 let lastselected = "";
 function select(entry) {
 	let entries = document.querySelectorAll("#modsdiv .mod .modtext");
diff --git a/src/app/toast.js b/src/app/toast.js
index 9cb8996..3bc1745 100644
--- a/src/app/toast.js
+++ b/src/app/toast.js
@@ -3,6 +3,7 @@ function Toast(properties) {
 		fg: "#000000",
 		bg: "#FFFFFF",
 		timeout: 3000,
+		callback: () => {},
 		title: "Untitled Toast",
 		description: "No description provided for toast",
 		...properties
@@ -34,7 +35,10 @@ function Toast(properties) {
 	el.style.background = toast.bg;
 
 	el.id = id;
-	el.setAttribute("onclick", `dismissToast(${id})`);
+	el.addEventListener("click", () => {
+		dismissToast(id);
+		toast.callback();
+	})
 
 	el.innerHTML = `
 		<div class="title">${toast.title}</div>