Added error message for loading errors. Closes #254

src/web/App.js

@@ -82,6 +82,9 @@ App.prototype.loaded = function() {
     // Clear the loading message interval
     clearInterval(window.loadingMsgsInt);
 
+    // Remove the loading error handler
+    window.removeEventListener("error", window.loadingErrorHandler);
+
     document.dispatchEvent(this.manager.apploaded);
 };
 

src/web/html/index.html

@@ -42,7 +42,7 @@
             }
 
             // Define loading messages
-            const loadingMsgs = [
+            var loadingMsgs = [
                 "Proving P = NP...",
                 "Computing 6 x 9...",
                 "Mining bitcoin...",
@@ -66,18 +66,18 @@
 
             // Shuffle array using Durstenfeld algorithm
             for (let i = loadingMsgs.length - 1; i > 0; --i) {
-                const j = Math.floor(Math.random() * (i + 1));
+                var j = Math.floor(Math.random() * (i + 1));
-                const temp = loadingMsgs[i];
+                var temp = loadingMsgs[i];
                 loadingMsgs[i] = loadingMsgs[j];
                 loadingMsgs[j] = temp;
             }
 
             // Show next loading message and move it to the end of the array
             function changeLoadingMsg() {
-                const msg = loadingMsgs.shift();
+                var msg = loadingMsgs.shift();
                 loadingMsgs.push(msg);
                 try {
-                    const el = document.getElementById("preloader-msg");
+                    var el = document.getElementById("preloader-msg");
                     if (!el.classList.contains("loading"))
                         el.classList.add("loading"); // Causes CSS transition on first message
                     el.innerHTML = msg;
@@ -86,6 +86,46 @@
 
             changeLoadingMsg();
             window.loadingMsgsInt = setInterval(changeLoadingMsg, (Math.random() * 2000) + 1500);
+
+            // If any errors are thrown during loading, handle them here
+            function loadingErrorHandler(e) {
+                function escapeHtml(str) {
+                    var HTML_CHARS = {
+                        "&": "&",
+                        "<": "&lt;",
+                        ">": "&gt;",
+                        '"': "&quot;",
+                        "'": "&#x27;", // &apos; not recommended because it's not in the HTML spec
+                        "/": "&#x2F;", // forward slash is included as it helps end an HTML entity
+                        "`": "&#x60;"
+                    };
+
+                    return str.replace(/[&<>"'/`]/g, function (match) {
+                        return HTML_CHARS[match];
+                    });
+                }
+
+                var msg = e.message +
+                    (e.filename ? "\nFilename: " + e.filename : "") +
+                    (e.lineno ? "\nLine: " + e.lineno : "") +
+                    (e.colno ? "\nColumn: " + e.colno : "") +
+                    (e.error ? "\nError: " + e.error : "") +
+                    "\nUser-Agent: " + navigator.userAgent +
+                    "\nCyberChef version: <%= htmlWebpackPlugin.options.version %>";
+
+                clearInterval(window.loadingMsgsInt);
+                document.getElementById("preloader").remove();
+                document.getElementById("preloader-msg").remove();
+                document.getElementById("preloader-error").innerHTML =
+                    "CyberChef encountered an error while loading.<br><br>" +
+                    "The following browser versions are supported:" +
+                    "<ul><li>Google Chrome 40+</li><li>Mozilla Firefox 35+</li><li>Microsoft Edge 14+</li></ul>" +
+                    "Your user agent is:<br>" + escapeHtml(navigator.userAgent) + "<br><br>" +
+                    "If your browser is supported, please <a href='https://github.com/gchq/CyberChef/issues/new'>" +
+                    "raise an issue</a> including the following details:<br><br>" +
+                    "<pre>" + escapeHtml(msg) + "</pre>";
+            };
+            window.addEventListener("error", loadingErrorHandler);
         </script>
         <% if (htmlWebpackPlugin.options.inline) { %>
             <meta name="robots" content="noindex" />
@@ -100,6 +140,7 @@
         <div id="loader-wrapper">
             <div id="preloader" class="loader"></div>
             <div id="preloader-msg" class="loading-msg"></div>
+            <div id="preloader-error" class="loading-error"></div>
         </div>
         <!-- End preloader overlay -->
         <span id="edit-favourites" class="btn btn-default btn-sm"><img aria-hidden="true" src="<%- require('../static/images/favourite-16x16.png') %>" alt="Star Icon"/> Edit</span>

src/web/index.js

@@ -64,3 +64,4 @@ window.compileMessage = COMPILE_MSG;
 window.CanvasComponents = CanvasComponents;
 
 document.addEventListener("DOMContentLoaded", main, false);
+

src/web/stylesheets/preloader.css

@@ -74,6 +74,14 @@
     transition: all 0.1s ease-in;
 }
 
+.loading-error {
+    display: block;
+    position: relative;
+    width: 600px;
+    left: calc(50% - 300px);
+    top: 10%;
+}
+
 
 /* Loaded */
 .loaded .loading-msg {