Merge pull request #1794 from thelounge/xpaw/handle-js-errors

Handle javascript errors while loading

client/index.html

@@ -48,7 +48,7 @@
 					<div class="container">
 						<div class="row">
 							<div class="col-xs-12">
-								<h1 class="title">The Lounge is loading…</h1>
+								<h1 class="title" id="loading-title">The Lounge is loading…</h1>
 							</div>
 							<div class="col-xs-12">
 								<p id="loading-page-message">Loading the app… <a href="http://enable-javascript.com/" target="_blank" rel="noopener">Make sure to have JavaScript enabled.</a></p>

client/js/loading-slow-alert.js

@@ -19,3 +19,29 @@ setTimeout(function() {
 document.getElementById("loading-slow-reload").addEventListener("click", function() {
 	location.reload();
 });
+
+window.g_LoungeErrorHandler = function LoungeErrorHandler(error) {
+	var title = document.getElementById("loading-title");
+	title.textContent = "An error has occured";
+
+	title = document.getElementById("loading-page-message");
+	title.textContent = "An error has occured that prevented the client from loading correctly.";
+
+	var summary = document.createElement("summary");
+	summary.textContent = "More details";
+
+	if (error instanceof ErrorEvent) {
+		error = error.message + "\n\n" + error.stack + "\n\nView developer tools console for more information and a better stacktrace.";
+	}
+
+	var data = document.createElement("pre");
+	data.contentEditable = true;
+	data.textContent = error;
+
+	var details = document.createElement("details");
+	details.appendChild(summary);
+	details.appendChild(data);
+	title.parentNode.insertBefore(details, title.nextSibling);
+};
+
+window.addEventListener("error", window.g_LoungeErrorHandler);

client/js/socket-events/init.js

@@ -44,6 +44,11 @@ socket.on("init", function(data) {
 		$("body").removeClass("signed-out");
 		$("#loading").remove();
 		$("#sign-in").remove();
+
+		if (window.g_LoungeErrorHandler) {
+			window.removeEventListener("error", window.g_LoungeErrorHandler);
+			window.g_LoungeErrorHandler = null;
+		}
 	}
 
 	openCorrectChannel(previousActive, data.active);