Blog webdeveloperski Patryk yarpo Jar

Obsługa błędów w JavaScript

Autor wiadomości Czerwiec 30, 2011

Błędy w oprogramowaniu - niestety - ale zdarzają się często. Czasem są to błędy składniowe, innym razem logiczne. Tu pokażę co zrobić, aby nasz skrypt nie wykładał się przy pierwszym lepszym błędzie. Wykorzystamy do tego zdarzenie `onerror'.

Kod HTML

<html>
<body>
    <input type="button" value="Kliknij mnie" onclick="display()" />
</body>
</html>

Jak widać, po kliknięciu na przycisk powinna zostać wywołana funkcja `display()'. Nie ma jednak nigdzie jej definicji, co wywoła błąd:

Błąd nieobsłużony

Niezbyt to ładne, aby nasz kod rzucał takie błędy. Błędy tego typu powinny być jak najszybciej poprawione. Nie zawsze jednak osoba odpowiedzialna za JS jest świadoma tego, że coś nie działa poprawnie. Warto zatem byłoby o tym poinformować.

Zdarzenie `onerror'

Javascript posiada obsługę wielu zdarzeń. Jednym z nich jest `onerror'. Pozwala ono wykonać pewien kod, kiedy zostanie wykryty błąd.

<html>
<head>
    <script type="text/javascript">
      window.onerror = function() { alert("Pojawił się błąd"); }
    </script>
</head>
<body>
    <input type="button" value="Kliknij mnie" onclick="display()" />
</body>
</html>

Powyższy kod da nam taki efekt:

Błąd obsłużony

Pełny raport o błędzie

Powyższy przykład co prawda informuje użytkownika o błędzie, ale twórca kodu nadal nie musi o tym wiedzieć (chyba, że akurat on jest tym użytkownikiem). Dodatkowo infomacja o tym, że wystąpił błąd jest niewystarczająca... Gdzie? Kiedy?

I o takich szczegółach można się dowiedzieć.

<html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <script type="text/javascript">
        function errorHandler(msg, url, line)
        {
            var info = 'Wystąpił błąd\n';
            info += "Komunikat błędu: " + msg + "\n"
            info += "URL: " + url + "\n";
            info += "w linii: " + line + "\n\n";

            alert(info);
        }
        window.onerror = errorHandler;
    </script>
    </head>
    <body>
        <input type="button" value="Kliknij mnie" onclick="display()" />
    </body>
</html>

A oto i wynik:

Błąd obsłużony

Taki kod, pokazuje nam już dużo więcej. Oczywiście zamiast alertu można wysłać to za pomocą ajaksa na serwer i zapisać.

Ukrywanie błędu

Celowo w powyższych przykładach pokazywałem co jest widoczne w konsoli błędów. Za każdym razem pokazywał się tam komunikat o błędzie. Można go usunąć. Starczy, aby nasza funkcja obsługująca błędy zwracała wartość `true'.

function errorHandler(msg, url, line)
{
	var info = 'Wystąpił błąd\n';
	info += "Komunikat błędu: " + msg + "\n"
	info += "URL: " + url + "\n";
	info += "w linii: " + line + "\n\n";
	alert(info); // tu wyslij informacje ajaksem na serwer i zapisz

	return true;
}
window.onerror = errorHandler;

I tym sposobem mamy już pełną obsługę błędów JS.

Komentarze (0) Trackbacks (0)

Brak komentarzy.


Leave a comment

 

Brak trackbacków.