Monday, December 19, 2016

Simple library to show JavaScript / jQuery errors as browser alerts

  • forgot to check browser's console log for errors ?
  • got complaints from users 'I click but nothing happens' ?
  • ever taught end-users how to look at browser's console ?
There is small and simple library to avoid or at least reduce possibility of such problems, specially in case if code isn't covered by tests.

It catches normally invisible JavaScript errors and exceptions and provides simple way to show them to developer/tester/user.

Simple errors are caught via window.onerror handler.
Errors inside jQuery callbacks (ajax, onclick etc) are hidden from window.onerror(), so jQuery is patched in way to call error handler.

Installation:

 
bower install js-error-alert --save
npm install js-error-alert

Load base script (it sets window.onerror):

<script src="window_error_handler.js"></script>

Add jQuery hook just after jQuery core code:

<script src="jquery-3.11.1.min.js"></script>
<script src="jquery_error_handler.js"></script>

Use custom handler to show errors:


You can create own JSEH_showUncaughtException(message) function and replace default one, place it at the top of the page (before window_error_handler.js)

var JSEH_showUncaughtException = function(message) {
    "use strict";

    if(typeof message === "undefined") {
        return false;
    }
    alert(message);
};

Enable/disable error handler:

In case you need to dynamically enable/disable handler (by example if merging/minifying tools are used) you can set JSEH_enabled variable to true/false.

var JSEH_enabled = false;  
//in Laravel/layout.blade.php 
var JSEH_enabled =@if(env('JS_ERROR_ALERTER_ENABLED', false)) true @else false @endif ;

Simple test

<script>
test_undefined_variable
</script>

<script>
$(function() {
    test_jquery_undefined_variable
});
</script>


Source : https://github.com/oprudkyi/js-error-alert

jQuery hooks are based on code found at :



2 comments:

  1. Great Article… I love to read your articles because your writing style is too good, its is very very helpful for all of us and I never get bored while reading your article because, they are becomes a more and more interesting from the starting lines until the end.

    rpa training in bangalore
    best rpa training in bangalore
    RPA training in bangalore
    rpa courses in bangalore

    ReplyDelete
  2. Thank you for taking the time to provide us with your valuable information. We strive to provide our candidates with excellent care and we take your comments to heart.As always, we appreciate your confidence and trust in us
    AWS Training in Bangalore

    ReplyDelete