From 0ffd4d60d90210238affd5bfbf08ca3e50b3fbd5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=A9r=C3=A9mie=20Astori?= Date: Sat, 16 Dec 2017 16:19:51 -0500 Subject: [PATCH 1/3] Improve error page at loading - Display the "Reload page" instantly and not after 5 seconds - Remove stack trace, buggy anyway - Wrap the error details so it does not expand beyond boundaries (scrollbar would not show up either) - Do not show the slow-loading warning on error - Make zeeoe details selectable instead of editable - Label improvements --- client/css/style.css | 17 ++++++++++++- client/index.html | 9 ++++--- client/js/loading-slow-alert.js | 44 ++++++++++++++++++++++----------- 3 files changed, 50 insertions(+), 20 deletions(-) diff --git a/client/css/style.css b/client/css/style.css index a4a4a397..215d1b24 100644 --- a/client/css/style.css +++ b/client/css/style.css @@ -160,6 +160,7 @@ kbd { } #js-copy-hack, +#loading pre, #help, #windows .header .title, #windows .header .topic, @@ -1354,10 +1355,24 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */ margin-top: 10px; } -#loading-slow { +#loading-slow, +#loading-reload { display: none; } +#loading-reload { + margin-top: 15px; +} + +#loading summary { + outline: none; + cursor: pointer; +} + +#loading pre { + white-space: normal; +} + #sign-in label { display: block; margin-top: 10px; diff --git a/client/index.html b/client/index.html index dd0bd3f9..bfc61872 100644 --- a/client/index.html +++ b/client/index.html @@ -53,10 +53,11 @@

Loading the app… Make sure to have JavaScript enabled.

-
-

This is taking longer than it should, there might be connectivity issues.

- -
+

+ This is taking longer than it should, there might be + connectivity issues. +

+
diff --git a/client/js/loading-slow-alert.js b/client/js/loading-slow-alert.js index 2eb990dd..8ece9ead 100644 --- a/client/js/loading-slow-alert.js +++ b/client/js/loading-slow-alert.js @@ -8,40 +8,54 @@ * so that the timeout can be triggered while slow JS is loading */ -setTimeout(function() { - var element = document.getElementById("loading-slow"); +function displayReload() { + var loadingReload = document.getElementById("loading-reload"); + if (loadingReload) { + loadingReload.style.display = "block"; + } +} - if (element) { - element.style.display = "block"; +var loadingSlowTimeout = setTimeout(function() { + var loadingSlow = document.getElementById("loading-slow"); + + // The parent element, #loading, is being removed when the app is loaded. + // Since the timer is not cancelled, `loadingSlow` can be not found after + // 5s. Wrap everything in this block to make sure nothing happens if the + // element does not exist (i.e. page has loaded). + if (loadingSlow) { + loadingSlow.style.display = "block"; + displayReload(); } }, 5000); -document.getElementById("loading-slow-reload").addEventListener("click", function() { +document.getElementById("loading-reload").addEventListener("click", function() { location.reload(); }); -window.g_LoungeErrorHandler = function LoungeErrorHandler(error) { +window.g_LoungeErrorHandler = function LoungeErrorHandler(e) { 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 message = document.getElementById("loading-page-message"); + message.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; + data.textContent = e.message; // e is an ErrorEvent + + var info = document.createElement("p"); + info.textContent = "Open the developer tools of your browser for more information."; var details = document.createElement("details"); details.appendChild(summary); details.appendChild(data); - title.parentNode.insertBefore(details, title.nextSibling); + details.appendChild(info); + message.parentNode.insertBefore(details, message.nextSibling); + + window.clearTimeout(loadingSlowTimeout); + displayReload(); }; window.addEventListener("error", window.g_LoungeErrorHandler); From 84db8d88669f5d7eaa357c4afeaeb178ff608815 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=A9r=C3=A9mie=20Astori?= Date: Sat, 16 Dec 2017 18:14:58 -0500 Subject: [PATCH 2/3] Wrap entire error loading script in anonymous function to avoid leaks --- client/js/loading-slow-alert.js | 96 +++++++++++++++++---------------- 1 file changed, 49 insertions(+), 47 deletions(-) diff --git a/client/js/loading-slow-alert.js b/client/js/loading-slow-alert.js index 8ece9ead..fe774b01 100644 --- a/client/js/loading-slow-alert.js +++ b/client/js/loading-slow-alert.js @@ -8,54 +8,56 @@ * so that the timeout can be triggered while slow JS is loading */ -function displayReload() { - var loadingReload = document.getElementById("loading-reload"); - if (loadingReload) { - loadingReload.style.display = "block"; - } -} +(function() { + var displayReload = function displayReload() { + var loadingReload = document.getElementById("loading-reload"); + if (loadingReload) { + loadingReload.style.display = "block"; + } + }; -var loadingSlowTimeout = setTimeout(function() { - var loadingSlow = document.getElementById("loading-slow"); + var loadingSlowTimeout = setTimeout(function() { + var loadingSlow = document.getElementById("loading-slow"); - // The parent element, #loading, is being removed when the app is loaded. - // Since the timer is not cancelled, `loadingSlow` can be not found after - // 5s. Wrap everything in this block to make sure nothing happens if the - // element does not exist (i.e. page has loaded). - if (loadingSlow) { - loadingSlow.style.display = "block"; + // The parent element, #loading, is being removed when the app is loaded. + // Since the timer is not cancelled, `loadingSlow` can be not found after + // 5s. Wrap everything in this block to make sure nothing happens if the + // element does not exist (i.e. page has loaded). + if (loadingSlow) { + loadingSlow.style.display = "block"; + displayReload(); + } + }, 5000); + + document.getElementById("loading-reload").addEventListener("click", function() { + location.reload(); + }); + + window.g_LoungeErrorHandler = function LoungeErrorHandler(e) { + var title = document.getElementById("loading-title"); + title.textContent = "An error has occured"; + + var message = document.getElementById("loading-page-message"); + message.textContent = "An error has occured that prevented the client from loading correctly."; + + var summary = document.createElement("summary"); + summary.textContent = "More details"; + + var data = document.createElement("pre"); + data.textContent = e.message; // e is an ErrorEvent + + var info = document.createElement("p"); + info.textContent = "Open the developer tools of your browser for more information."; + + var details = document.createElement("details"); + details.appendChild(summary); + details.appendChild(data); + details.appendChild(info); + message.parentNode.insertBefore(details, message.nextSibling); + + window.clearTimeout(loadingSlowTimeout); displayReload(); - } -}, 5000); + }; -document.getElementById("loading-reload").addEventListener("click", function() { - location.reload(); -}); - -window.g_LoungeErrorHandler = function LoungeErrorHandler(e) { - var title = document.getElementById("loading-title"); - title.textContent = "An error has occured"; - - var message = document.getElementById("loading-page-message"); - message.textContent = "An error has occured that prevented the client from loading correctly."; - - var summary = document.createElement("summary"); - summary.textContent = "More details"; - - var data = document.createElement("pre"); - data.textContent = e.message; // e is an ErrorEvent - - var info = document.createElement("p"); - info.textContent = "Open the developer tools of your browser for more information."; - - var details = document.createElement("details"); - details.appendChild(summary); - details.appendChild(data); - details.appendChild(info); - message.parentNode.insertBefore(details, message.nextSibling); - - window.clearTimeout(loadingSlowTimeout); - displayReload(); -}; - -window.addEventListener("error", window.g_LoungeErrorHandler); + window.addEventListener("error", window.g_LoungeErrorHandler); +})(); From f975426c61dd023f5682e8fecff47dc52c139806 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=A9r=C3=A9mie=20Astori?= Date: Sat, 16 Dec 2017 18:18:43 -0500 Subject: [PATCH 3/3] Rename the error handlers file at loading time --- client/index.html | 2 +- .../js/{loading-slow-alert.js => loading-error-handlers.js} | 0 test/tests/build.js | 4 ++-- webpack.config.js | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) rename client/js/{loading-slow-alert.js => loading-error-handlers.js} (100%) diff --git a/client/index.html b/client/index.html index bfc61872..7a9789a3 100644 --- a/client/index.html +++ b/client/index.html @@ -58,7 +58,7 @@ connectivity issues.

- + diff --git a/client/js/loading-slow-alert.js b/client/js/loading-error-handlers.js similarity index 100% rename from client/js/loading-slow-alert.js rename to client/js/loading-error-handlers.js diff --git a/test/tests/build.js b/test/tests/build.js index dc446ef6..e5b2b1da 100644 --- a/test/tests/build.js +++ b/test/tests/build.js @@ -25,7 +25,7 @@ describe("public folder", function() { expect(fs.existsSync(path.join(publicFolder, "js", "bundle.js.map"))).to.be.true; }); - it("loading-slow-alert.js is copied", function() { - expect(fs.existsSync(path.join(publicFolder, "js", "loading-slow-alert.js"))).to.be.true; + it("loading-error-handlers.js is copied", function() { + expect(fs.existsSync(path.join(publicFolder, "js", "loading-error-handlers.js"))).to.be.true; }); }); diff --git a/webpack.config.js b/webpack.config.js index 45ea8e9b..e30258c9 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -67,7 +67,7 @@ const config = { to: "fonts/[name].[ext]", }, { - from: "./client/js/loading-slow-alert.js", + from: "./client/js/loading-error-handlers.js", to: "js/[name].[ext]", }, { // TODO: Build index.html with handlebars