Zdarzenia#
Typ error#
| Typ: | error |
|---|---|
| Interfejs: | UIEvent jeśli generowane z interfejsu użytkownika, w przeciwnym razie Event. |
| Sync / Async: | Async |
| Bąbelkowanie | Nie |
| Zaufane cele | defaultView, Element |
| Anulowanie | Nie |
| Domyślna akcja | Brak |
| Kontekst (zaufane zdarzenia) |
|
Zdarzenie typu error musi zostać wysłane przez aplikację kliencką w chwili, kiedy wczytywanie zasobu się nie powiodło albo powiodło, ale zasób nie może zostać prawidłowo zinterpretowany zgodnie ze swoją semantyką, np. dla błędnych obrazów, skryptów czy plików XML.
W przypadku HTML5 zdarzenie typu error jest automatycznie odpalane przez przeglądarki internetowe w wielu różnych sytuacjach, kiedy trzeba zasygnalizować, że jakaś operacja wygenerowała błąd. Oto najważniejsze z nich:
- Brak możliwości pobrania zewnętrznych zasobów przez niektóre elementy (np.
<link>,<img>czy<script>) ze względu na nieistniejące adresy, błędy DNS, zwracanie nagłówka HTTP 404, nagłe zamknięcie połączenia, brak wsparcia dla danego typu MIME itp. Celem zdarzenia będzie ten element, który powoduje błąd. Co istotne, zdarzenie to przechodzi przez wszystkich przodków celu zdarzenia zgodnie ze ścieżką propagacji, dlatego może wywoływać uchwyty rejestrowane na tych przodkach. Błędy przy wykonywaniu kodu skryptowego wewnątrz elementów
<script>i wątkach roboczych (np. próba uruchomienia nieistniejącej metody), zgodnie z algorytmem raportowania błędu wywoływanym w kroku 7 algorytmu tworzenia. Celem zdarzenia będzie obiekt globalny (zazwyczajWindowlubWorkerGlobalScope). Obiekt zdarzenia będzie implementował interfejs ErrorEvent, który dziedziczy z bazowego interfejsu Event, dlatego mamy dostęp do większej liczby właściwości.Alternatywnie można skorzystać ze standardowego sposobu obsługi błędów JS. Przechwycenie błędu tym sposobem zapobiega wysyłaniu zdarzenia do obiektu globalnego i do konsoli.
Prosty przykład:
<!DOCTYPE html>
<html>
<head>
<style>
@import url("nieistniejacy.css");
</style>
</head>
<body>
<p>
<img src="nieistniejacy.gif" alt="">
</p>
<p>Generujemy zdarzenia błędów dla skryptu (wykonanie), stylu i grafiki (wczytanie).</p>
<p style="color: blue;">Szczegółowe informacje dla przechwyconego zdarzenia:</p>
<p id="info"></p>
<script>
var info = document.getElementById("info");
var img = document.getElementsByTagName("img")[0];
var style = document.getElementsByTagName("style")[0];
var head = document.getElementsByTagName("head")[0];
function readInfo(e){
var data = "Interfejs: " + e
+ "<br>" + "e.type: " + e.type
+ "<br>" + "e.currentTarget: " + e.currentTarget
+ "<br>" + "e.target: " + e.target
+ "<br>" + "e.eventPhase: " + e.eventPhase;
// Tylko dla błędu skryptu
if (e == "[object ErrorEvent]"){
data += "<br>" + "e.message: " + e.message
+ "<br>" + "e.filename: " + e.filename
+ "<br>" + "e.lineno: " + e.lineno
+ "<br>" + "e.colno: " + e.colno
+ "<br>" + "e.error: " + e.error + "<br><br>";
}
else{
data += "<br><br>";
}
info.innerHTML = info.innerHTML + data;
}
// Przechwyt zdarzenia sygnalizującego błędy
img.addEventListener("error", readInfo, false);
style.addEventListener("error", readInfo, false);
window.addEventListener("error", readInfo, false); // przechwyci błąd skryptu
document.addEventListener("error", readInfo, true); // przechwyci błąd grafiki i stylu
document.head.addEventListener("error", readInfo, true); // przechwyci błąd stylu (ale nie grafiki)
document.body.addEventListener("error", readInfo, true); // przechwyci błąd grafiki (ale nie stylu)
makeError(); // generujemy błąd JS (brak takiej metody)
</script>
</body>
</html>Warto zauważyć, że błędy skryptów (szczególnie osadzonych) najczęściej zgłaszane będą jako pierwsze, gdyż przetwarzanie kodu JS odbywa się o wiele szybciej, niż próba wczytania nieistniejącego zasobu.
Trzeba nadmienić, że uchwyty przez właściwość i uchwyty przez atrybut, które zarejestrowano na elemencie <body> lub elementach ramek, są traktowane tak jakby zarejestrowano je na obiekcie Window, który je zawiera. Uwaga nie dotyczy uchwytów przez metodę.
Prosty przykład:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>Generujemy zdarzenia błędów dla skryptu (wykonanie).</p>
<p style="color: blue;">Szczegółowe informacje dla przechwyconego zdarzenia:</p>
<p id="info"></p>
<script>
var info = document.getElementById("info");
function readInfo(e){
var data = "Interfejs: " + e
+ "<br>" + "e.type: " + e.type
+ "<br>" + "e.currentTarget: " + e.currentTarget
+ "<br>" + "e.target: " + e.target
+ "<br>" + "e.eventPhase: " + e.eventPhase;
// Tylko dla błędu skryptu
if (e == "[object ErrorEvent]"){
data += "<br>" + "e.message: " + e.message
+ "<br>" + "e.filename: " + e.filename
+ "<br>" + "e.lineno: " + e.lineno
+ "<br>" + "e.colno: " + e.colno
+ "<br>" + "e.error: " + e.error + "<br><br>";
}
else{
data += "<br><br>";
}
info.innerHTML = info.innerHTML + data;
}
document.body.onerror = readInfo;
document.body.addEventListener("error", readInfo, true); // uchwyt nie zostanie wywołany
document.body.addEventListener("error", readInfo, false); // uchwyt nie zostanie wywołany
makeError(); // generujemy błąd JS (brak takiej metody)
</script>
</body>
</html>