High-traffic, PHP, MySQL: alert

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 :

High-traffic, PHP, MySQL

Monday, December 19, 2016

Simple library to show JavaScript / jQuery errors as browser alerts