Do not crash during page unload.

Browser cancels all ajax requests after the beforepageunload event. This leads to the global renderJS error handling, which is unpleasant from user point of view.

Do not crash during page unload.
Browser cancels all ajax requests after the beforepageunload event. This leads to the global renderJS error handling, which is unpleasant from user point of view.
cdf44572 · Romain Courteaud · 87125ad7 · cdf44572 · cdf44572 · cdf44572
Commit cdf44572 authored Jul 07, 2016 by Romain Courteaud
Showing with 103 additions and 1 deletion

renderjs.js renderjs.js +14 -1

test/renderjs_test.js test/renderjs_test.js +64 -0

test/unload_gadget.html test/unload_gadget.html +15 -0

test/unload_next.html test/unload_next.html +10 -0

No files found.
--- a/renderjs.js
+++ b/renderjs.js
@@ -70,7 +70,14 @@
    renderJS,
    Monitor,
    scope_increment = 0,
-    isAbsoluteOrDataURL = new RegExp('^(?:[a-z]+:)?//|data:', 'i');
+    isAbsoluteOrDataURL = new RegExp('^(?:[a-z]+:)?//|data:', 'i'),
+    is_page_unloaded = false;
+  window.addEventListener('beforeunload', function () {
+    // XXX If another listener cancel the page unload,
+    // it will not restore renderJS crash report
+    is_page_unloaded = true;
+  });
  /////////////////////////////////////////////////////////////////
  // Helper functions
@@ -84,6 +91,12 @@
  }
  function letsCrash(e) {
+    if (is_page_unloaded) {
+      /*global console*/
+      console.info('-- Error dropped, as page is unloaded');
+      console.info(e);
+      return;
+    }
    if (e.constructor === XMLHttpRequest) {
      e = {
        readyState: e.readyState,

--- a/test/renderjs_test.js
+++ b/test/renderjs_test.js
@@ -4165,5 +4165,69 @@
      });
  });
+  test('check page unload', function () {
+    var fixture = document.getElementById("qunit-fixture"),
+      iframe,
+      loop_queue;
+    fixture.innerHTML =
+      "<iframe id=renderjsIframe src='./unload_gadget.html'></iframe>";
+    iframe = document.getElementById('renderjsIframe');
+    stop();
+    function waitForPageChanged() {
+      var iframe_body = iframe.contentWindow.document.body,
+        iframe_text;
+      if (iframe_body === null) {
+        loop_queue
+          .push(function () {
+            return RSVP.delay();
+          })
+          .push(function () {
+            waitForPageChanged();
+          });
+        return;
+      }
+      iframe_text = iframe_body.textContent;
+      /*global console*/
+      // console.log(iframe_text);
+      if (iframe_text.indexOf('Page changed') !== -1) {
+        // Final page
+        ok(true, iframe_text);
+      } else if (iframe_text.indexOf('Next page') === -1) {
+        // Not the original text content. Probably the error message.
+        ok(false, iframe_text);
+      } else {
+        loop_queue
+          .push(function () {
+            return RSVP.delay();
+          })
+          .push(function () {
+            waitForPageChanged();
+          });
+      }
+    }
+    return new RSVP.Promise(function (resolve, reject) {
+      iframe.addEventListener("load", function (evt) {
+        resolve(evt.target.result);
+      });
+      iframe.addEventListener("error", reject);
+    })
+      .then(function () {
+        iframe.contentWindow.document.querySelector('a').click();
+        loop_queue = new RSVP.Queue();
+        waitForPageChanged();
+        return loop_queue;
+      })
+      .fail(function (error) {
+        ok(false, error);
+      })
+      .always(function () {
+        start();
+      });
+  });
 }(document, renderJS, QUnit, sinon, URI, URL));
--- a/test/unload_gadget.html
+++ b/test/unload_gadget.html
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
+      "http://www.w3.org/TR/html4/loose.dtd">
+<html>
+  <head>
+    <title>Unload event for renderJS test</title>
+    <meta name="viewport" content="width=device-width, height=device-height"/>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+    <script src="../node_modules/rsvp/dist/rsvp-2.0.4.js" type="text/javascript"></script>
+    <script src="../dist/renderjs-latest.js" type="text/javascript"></script>
+  </head>
+  <body>
+    <div data-gadget-url="embedded_heavy.html"></div>
+    <a href="unload_next.html">Next page</a>
+  </body>
+</html>
--- a/test/unload_next.html
+++ b/test/unload_next.html
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
+      "http://www.w3.org/TR/html4/loose.dtd">
+<html>
+  <head>
+    <title>Next static page for renderJS test</title>
+    <meta name="viewport" content="width=device-width, height=device-height"/>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+  </head>
+  <body>Page changed</body>
+</html>