From 1434ede2dc6314c44f4f05576ed76759f4527449 Mon Sep 17 00:00:00 2001
From: Hornwitser <github@hornwitser.no>
Date: Wed, 29 Nov 2023 18:05:36 +0100
Subject: [PATCH] Improve error reporting when web_ui fails to load

Catch uncaught errors and display the error message on the page itself
if bootstraping fails. This should prevent most cases of the of the web
interface being stuck on "Loading web interface..." after an error was
thrown and the loading failed.
---
 packages/controller/web/index.html | 29 ++++++++++++++++++++---------
 packages/controller/web/index.tsx  |  9 +++++----
 2 files changed, 25 insertions(+), 13 deletions(-)

diff --git a/packages/controller/web/index.html b/packages/controller/web/index.html
index d8f6f318..5a5a8af0 100644
--- a/packages/controller/web/index.html
+++ b/packages/controller/web/index.html
@@ -17,22 +17,33 @@
 				margin: auto;
 				margin-top: 1em;
 				width: fit-content;
+				white-space: pre;
 			}
 		</style>
-		<script>
-			webRoot = new URL("__WEB_ROOT__", document.location).pathname;
-			staticRoot = new URL("__STATIC_ROOT__", document.location).pathname;
-			function scriptError() {
-				let bootstrapMsg = document.getElementById("bootstrap-msg");
-				bootstrapMsg.textContent = "Error loading main bundle, see web console for details.";
-			}
-		</script>
 	</head>
 	<body>
 		<noscript>You need to enable JavaScript to run this app.</noscript>
 		<div id="root">
 			<div id="bootstrap-msg">Loading web interface...</div>
 		</div>
-		<script src="__STATIC_ROOT____MAIN_BUNDLE__" defer onerror="scriptError()"></script>
+		<script id="script-bundle" src="__STATIC_ROOT____MAIN_BUNDLE__" defer></script>
+		<script>
+			webRoot = new URL("__WEB_ROOT__", document.location).pathname;
+			staticRoot = new URL("__STATIC_ROOT__", document.location).pathname;
+			function scriptError(err) {
+				console.error(err);
+				let bootstrapMsg = document.getElementById("bootstrap-msg");
+				if (bootstrapMsg) {
+					let errorMsg = err;
+					if (err?.message) {
+						errorMsg = `${err?.constructor?.name ?? "Error"}: ${err.message}`;
+					}
+					bootstrapMsg.textContent = `${errorMsg}\nSee web console for details.`;
+				}
+			}
+			const bundleScript = document.getElementById("script-bundle");
+			bundleScript.addEventListener("error", () => scriptError("Main bundle failed to load."));
+			window.addEventListener("error", event => scriptError(event.error));
+		</script>
 	</body>
 </html>
diff --git a/packages/controller/web/index.tsx b/packages/controller/web/index.tsx
index da298e39..59e6ae18 100644
--- a/packages/controller/web/index.tsx
+++ b/packages/controller/web/index.tsx
@@ -1,4 +1,5 @@
-/* eslint-disable arrow-body-style, no-console */
-import("@clusterio/web_ui").then(webUi => {
-	return webUi.bootstrap();
-}).catch(console.error);
+declare function scriptError(err: any): void;
+import("@clusterio/web_ui")
+	.then(webUi => webUi.bootstrap())
+	.catch(scriptError)
+;