Merge pull request #801 from CendioOssman/errors

Improve fallback error handler

app/error-handler.js

@@ -6,16 +6,6 @@
 (function(){
     "use strict";
 
-    function convertNewlines(msg, parentElem) {
-        const lines = msg.split("\n");
-        lines.forEach(function (line) {
-            parentElem.appendChild(document.createElement("br"));
-            parentElem.appendChild(document.createTextNode(line));
-        });
-        parentElem.removeChild(parentElem.firstChild);
-        return parentElem;
-    }
-
     // Fallback for all uncought errors
     function handleError (event, err) {
         try {
@@ -28,18 +18,24 @@
 
             var div = document.createElement("div");
             div.classList.add('noVNC_message');
-            convertNewlines(event.message, div);
+            div.appendChild(document.createTextNode(event.message));
             msg.appendChild(div);
 
-            if (event.filename !== undefined && event.lineno !== undefined && event.colno !== undefined) {
+            if (event.filename) {
                 div = document.createElement("div");
                 div.className = 'noVNC_location';
-                    const text = event.filename + ":" + event.lineno + ":" + event.colno;
+                var text = event.filename;
-                    div.appendChild(document.createTextNode(text));
+                if (event.lineno !== undefined) {
+                    text += ":" + event.lineno;
+                    if (event.colno !== undefined) {
+                        text += ":" + event.colno;
+                    }
+                }
+                div.appendChild(document.createTextNode(text));
                 msg.appendChild(div);
             }
 
-            if ((err !== undefined) &&
+            if (err &&
                 (err.stack !== undefined)) {
                 div = document.createElement("div");
                 div.className = 'noVNC_stack';

app/styles/base.css

@@ -216,31 +216,32 @@ select:active {
  */
 
 #noVNC_fallback_error {
-  position: fixed;
   z-index: 1000;
-  left: 50%;
+  visibility: hidden;
-  transform: translate(-50%, -50px);
+}
+#noVNC_fallback_error.noVNC_open {
+  visibility: visible;
+}
+
+#noVNC_fallback_error > div {
+  max-width: 90%;
+  padding: 15px;
+
   transition: 0.5s ease-in-out;
 
-  visibility: hidden;
+  transform: translateY(-50px);
   opacity: 0;
 
-  top: 60px;
-  padding: 15px;
-  width: auto;
-
   text-align: center;
   font-weight: bold;
-  word-wrap: break-word;
   color: #fff;
 
   border-radius: 10px;
   box-shadow: 6px 6px 0px rgba(0, 0, 0, 0.5);
   background: rgba(200,55,55,0.8);
 }
-#noVNC_fallback_error.noVNC_open {
+#noVNC_fallback_error.noVNC_open > div {
-  transform: translate(-50%, 0);
+  transform: translateY(0);
-  visibility: visible;
   opacity: 1;
 }
 
@@ -251,6 +252,8 @@ select:active {
 #noVNC_fallback_errormsg .noVNC_message {
   display: inline-block;
   text-align: left;
+  font-family: monospace;
+  white-space: pre-wrap;
 }
 
 #noVNC_fallback_error .noVNC_location {
@@ -264,7 +267,8 @@ select:active {
   margin: 10px;
   font-size: 0.8em;
   text-align: left;
-  white-space: pre;
+  font-family: monospace;
+  white-space: pre-wrap;
   border: 1px solid rgba(0, 0, 0, 0.5);
   background: rgba(0, 0, 0, 0.2);
 }

vendor/browser-es-module-loader/dist/browser-es-module-loader.js

@@ -1169,6 +1169,34 @@ var loader;
 // <script type="module"> support
 var anonSources = {};
 if (typeof document != 'undefined' && document.getElementsByTagName) {
+  function handleError(err) {
+    // dispatch an error event so that we can display in errors in browsers
+    // that don't yet support unhandledrejection
+    if (window.onunhandledrejection === undefined) {
+      try {
+        var evt = new Event('error');
+      } catch (_eventError) {
+        var evt = document.createEvent('Event');
+        evt.initEvent('error', true, true);
+      }
+      evt.message = err.message;
+      if (err.fileName) {
+        evt.filename = err.fileName;
+        evt.lineno = err.lineNumber;
+        evt.colno = err.columnNumber;
+      } else if (err.sourceURL) {
+        evt.filename = err.sourceURL;
+        evt.lineno = err.line;
+        evt.colno = err.column;
+      }
+      evt.error = err;
+      window.dispatchEvent(evt);
+    }
+
+    // throw so it still shows up in the console
+    throw err;
+  }
+
   function ready() {
     document.removeEventListener('DOMContentLoaded', ready, false );
 
@@ -1180,22 +1208,7 @@ if (typeof document != 'undefined' && document.getElementsByTagName) {
       if (script.type == 'module' && !script.loaded) {
         script.loaded = true;
         if (script.src) {
-          loader.import(script.src).catch(function(err) {
+          loader.import(script.src).catch(handleError);
-              // dispatch an error event so that we can display in errors in browsers
-              // that don't yet support unhandledrejection
-              try {
-                  var evt = new Event('error');
-              } catch (_eventError) {
-                  var evt = document.createEvent('Event');
-                  evt.initEvent('error', true, true);
-              }
-              evt.message = err.message;
-              evt.error = err;
-              window.dispatchEvent(evt);
-
-              // throw so it still shows up in the console
-              throw err;
-          });
         }
         // anonymous modules supported via a custom naming scheme and registry
         else {
@@ -1206,22 +1219,7 @@ if (typeof document != 'undefined' && document.getElementsByTagName) {
 
           var anonName = resolveIfNotPlain(uri, baseURI);
           anonSources[anonName] = script.innerHTML;
-          loader.import(anonName).catch(function(err) {
+          loader.import(anonName).catch(handleError);
-              // dispatch an error event so that we can display in errors in browsers
-              // that don't yet support unhandledrejection
-              try {
-                  var evt = new Event('error');
-              } catch (_eventError) {
-                  var evt = document.createEvent('Event');
-                  evt.initEvent('error', true, true);
-              }
-              evt.message = err.message;
-              evt.error = err;
-              window.dispatchEvent(evt);
-
-              // throw so it still shows up in the console
-              throw err;
-          });
         }
       }
     }
@@ -1310,6 +1308,7 @@ var WorkerPool = function (script, size) {
     wrkr._count = 0;
     wrkr._ind = i;
     wrkr.onmessage = this._onmessage.bind(this, wrkr);
+    wrkr.onerror = this._onerror.bind(this);
     this._workers[i] = wrkr;
   }
 
@@ -1335,6 +1334,21 @@ WorkerPool.prototype = {
     this._checkJobs();
   },
 
+  _onerror: function(err) {
+    try {
+        var evt = new Event('error');
+    } catch (_eventError) {
+        var evt = document.createEvent('Event');
+        evt.initEvent('error', true, true);
+    }
+    evt.message = err.message;
+    evt.filename = err.filename;
+    evt.lineno = err.lineno;
+    evt.colno = err.colno;
+    evt.error = err.error;
+    window.dispatchEvent(evt);
+  },
+
   _checkJobs: function () {
     if (this._jobs === 0 && this._stopTimeout === undefined) {
       // wait for 2s of inactivity before stopping (that should be enough for local loading)
@@ -1407,3 +1421,4 @@ if (isBrowser)
 return BrowserESModuleLoader;
 
 })));
+//# sourceMappingURL=browser-es-module-loader.js.map

vendor/browser-es-module-loader/rollup.config.js

@@ -5,6 +5,7 @@ export default {
   dest: 'dist/browser-es-module-loader.js',
   format: 'umd',
   moduleName: 'BrowserESModuleLoader',
+  sourceMap: true,
 
   plugins: [
     nodeResolve(),

vendor/browser-es-module-loader/src/browser-es-module-loader.js

@@ -9,6 +9,34 @@ var loader;
 // <script type="module"> support
 var anonSources = {};
 if (typeof document != 'undefined' && document.getElementsByTagName) {
+  function handleError(err) {
+    // dispatch an error event so that we can display in errors in browsers
+    // that don't yet support unhandledrejection
+    if (window.onunhandledrejection === undefined) {
+      try {
+        var evt = new Event('error');
+      } catch (_eventError) {
+        var evt = document.createEvent('Event');
+        evt.initEvent('error', true, true);
+      }
+      evt.message = err.message;
+      if (err.fileName) {
+        evt.filename = err.fileName;
+        evt.lineno = err.lineNumber;
+        evt.colno = err.columnNumber;
+      } else if (err.sourceURL) {
+        evt.filename = err.sourceURL;
+        evt.lineno = err.line;
+        evt.colno = err.column;
+      }
+      evt.error = err;
+      window.dispatchEvent(evt);
+    }
+
+    // throw so it still shows up in the console
+    throw err;
+  }
+
   function ready() {
     document.removeEventListener('DOMContentLoaded', ready, false );
 
@@ -20,22 +48,7 @@ if (typeof document != 'undefined' && document.getElementsByTagName) {
       if (script.type == 'module' && !script.loaded) {
         script.loaded = true;
         if (script.src) {
-          loader.import(script.src).catch(function(err) {
+          loader.import(script.src).catch(handleError);
-              // dispatch an error event so that we can display in errors in browsers
-              // that don't yet support unhandledrejection
-              try {
-                  var evt = new Event('error');
-              } catch (_eventError) {
-                  var evt = document.createEvent('Event');
-                  evt.initEvent('error', true, true);
-              }
-              evt.message = err.message;
-              evt.error = err;
-              window.dispatchEvent(evt);
-
-              // throw so it still shows up in the console
-              throw err;
-          });
         }
         // anonymous modules supported via a custom naming scheme and registry
         else {
@@ -46,22 +59,7 @@ if (typeof document != 'undefined' && document.getElementsByTagName) {
 
           var anonName = resolveIfNotPlain(uri, baseURI);
           anonSources[anonName] = script.innerHTML;
-          loader.import(anonName).catch(function(err) {
+          loader.import(anonName).catch(handleError);
-              // dispatch an error event so that we can display in errors in browsers
-              // that don't yet support unhandledrejection
-              try {
-                  var evt = new Event('error');
-              } catch (_eventError) {
-                  var evt = document.createEvent('Event');
-                  evt.initEvent('error', true, true);
-              }
-              evt.message = err.message;
-              evt.error = err;
-              window.dispatchEvent(evt);
-
-              // throw so it still shows up in the console
-              throw err;
-          });
         }
       }
     }
@@ -150,6 +148,7 @@ var WorkerPool = function (script, size) {
     wrkr._count = 0;
     wrkr._ind = i;
     wrkr.onmessage = this._onmessage.bind(this, wrkr);
+    wrkr.onerror = this._onerror.bind(this);
     this._workers[i] = wrkr;
   }
 
@@ -175,6 +174,21 @@ WorkerPool.prototype = {
     this._checkJobs();
   },
 
+  _onerror: function(err) {
+    try {
+        var evt = new Event('error');
+    } catch (_eventError) {
+        var evt = document.createEvent('Event');
+        evt.initEvent('error', true, true);
+    }
+    evt.message = err.message;
+    evt.filename = err.filename;
+    evt.lineno = err.lineno;
+    evt.colno = err.colno;
+    evt.error = err.error;
+    window.dispatchEvent(evt);
+  },
+
   _checkJobs: function () {
     if (this._jobs === 0 && this._stopTimeout === undefined) {
       // wait for 2s of inactivity before stopping (that should be enough for local loading)

vnc.html

@@ -72,10 +72,12 @@
 
 <body>
 
-    <div id="noVNC_fallback_error">
+    <div id="noVNC_fallback_error" class="noVNC_center">
-        <div>noVNC encountered an error:</div>
+        <div>
-        <br>
+            <div>noVNC encountered an error:</div>
-        <div id="noVNC_fallback_errormsg"></div>
+            <br>
+            <div id="noVNC_fallback_errormsg"></div>
+        </div>
     </div>
 
     <!-- noVNC Control Bar -->