Logovanie javascriptových chýb

Moderné webové aplikácie sú plné javascriptov, a tie sú plné chýb. Väčšinu z chýb sa podarí v priebehu vývoja a testovania odhaliť, ale v praxi je takmer nemožné odhaliť ich všetky.

Najlepšími a zároveň najhoršími testermi sú samotní užívatelia aplikácie. Najlepší sú preto, lebo je ich omnoho viac ako našich interných testerov a hlavne používajú aplikáciu v reálných podmienkach. Najhorší sú preto, lebo nikto z nich nám prípadnú chybu neohlási, akurát sa naserie :). Našťastie však existuje jednoduchý spôsob, ako sa na prípadné chyby upozorniť vlastnými silami.

Na riešenie som narazil v článku How to log JavaScript errors. Každý moderný prehliadač* umožňuje zaregistrovať si onerror event handler, ktorý sa zavolá pri každej javascriptovej chybe a v podobe parametrov dostane údaje o danej chybe:

• Chybová hláška
• Cesta k súboru, v ktorom nastala chyba
• Číslo riadku, na ktorom nastala chyba

Jednoduchý monitoring chýb môže potom vyzerať napríklad takto (prevzaté z uvedeného článku):

window.onerror = function(errorMessage, url, line) {
    var loggerUrl = "https://www.xing.com/js/logger";
    var parameters = "?description=" + escape(errorMessage)
        + "&url=" + escape(url)
        + "&line=" + escape(line)
        + "&parent_url=" + escape(document.location.href)
        + "&user_agent=" + escape(navigator.userAgent);

    /** Send error to server */
    new Image().src = loggerUrl + parameters;
};

Uvedený príklad používa na logovanie vytvorenie obrázka smerujúceho na monitorovaciu URL obohatenú o informácie o chybe, či prostredí. Samozrejme je možné namiesto toho použiť AJAX, uvedené obrázkové riešenie však netrpí obmedzením na rovnakú doménu ako AJAX.

* Prehliadače s WebKit jadrom obsahujú chybu, ktorá bohužial znemožňuje takýto monitoring, pretože event handler nedostane informácie o chybe.