Capturing and alerting JS JavaScript errors in a page Subscribe Pub Share

While developing more interactivity for online Javascripting, as your script creates errors in a web-page, it is nice to see these - often, the result is something missing from the page, without any visible indication that it is due to a simple scripting error.

This is especially an issue for SPA apps, or anytime you have embedded interaction: user clicks on that button to show a cat but the cat never comes... you'd have to open the console and see there that there are errors etc.

Instead, it turns out that there is a simple way to capture all JS exceptions in a page and you could paint a warning indicator, like the one you see above - yes, this page contains a Javascript with an error, which causes the blinker to go off.

First you have to put the blinker up in the navbar (or elsewhere in the page). In this case I use a simple warning glyphicon from bootstrap, colored red:

    <style type="text/css">
.blink {
  animation: blinker 1s linear infinite;
}

@keyframes blinker {
  85% { opacity: 0.0; }
}
</style>

The actual blinker is hidden in the page:

        <a href="#">
        <span style="display:none; color:red; font-weight:bold" id="navJsError" class="glyphicon glyphicon-warning-sign blink">
        </span>
        </a>

After that, include this bit - it comes in handy when the errors occur before your page painted the warning sign:

  <!-- show blinker for JS errors in page, if it occurred before painting this -->
<script async>
    require(['jquery'], function($){
      if(typeof lastJSErrorMsg != "undefined") {
        $("#navJsError").show();
        $("#navJsError").attr("title", lastJSErrorMsg);
      }

      navBarInitialized = true;
    });
</script>

And finally, insert this code high up on the page, which will catch further JS errors and will show the blinker with details on hover:

<script>
// intercept JS errors
    window.onerror = function(msg, url, line, col, error) {
      // Note that col & error are new to the HTML 5 spec and may not be
      // supported in every browser.  It worked for me in Chrome.
      var extra = !col ? '' : '\ncolumn: ' + col;
      extra += !error ? '' : '\nerror: ' + error;

      // You can view the information in an alert to see things working like this:
      var msg = "JS-Error in page - check your scripts:\n" + msg + "\nurl: " + url + "\nline: " + line + extra;
      console.log ("JS ERR: " + msg);

      // navBarInitialized - maybe this error occurs before the navbar was displayed...?
      if(typeof navBarInitialized === 'undefined') {
        lastJSErrorMsg = msg;
      } else {
        $("#navJsError").show();
        $("#navJsError").attr("title", msg);
      }

      // TODO: Report this error via ajax so you can keep track
      //       of what pages have JS issues

      var suppressErrorAlert = false;
      // If you return true, then error alerts (like in older versions of
      // Internet Explorer) will be suppressed.
      return suppressErrorAlert;
    };
</script>

Server logging

One improvement is to send the error to the server as well, where you could log them and track them! Just add an Ajax call in the code above, where indicated! This is a great idea.

Thanks to <link> for the inspiration!

---

See more in: Cool Scala Subscribe You need to log in to post a comment!

---