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

@@ -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>

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