Fehlerbehandlung in JavaScript

• Wo liegen die Unterschiede?
• Wie erlangt man Kontrolle?
• Beispiele
  • Beispiel 1
  • Beispiel 2
  • Beispiel 3
  • Beispiel 4

Wo liegen die Unterschiede?

• Ein syntaktischer Fehler ist ein Fehler in der Schreib- oder in der Ausdrucksweise. Zum Beispiel gibt es in JavaScript das Schlüsselwort function. Wenn stattdessen funktion getippt wurde, ist das syntaktisch falsch.
• Ein Laufzeitfehler ist ein Fehler, der zur Laufzeit auftritt. Da JavaScript eine interpretierte Sprache ist, sind alle Fehler insbesondere Laufzeitfehler. Üblicherweise wird nämlich sowas wir Syntax zur Übersetzungszeit (Compilationszeit) geprüft. Dort sind Laufzeitfehler, wenn der Speicher nicht reicht, man auf nicht bestehende Objekte (null, undefined) zugreift oder durch Null teilt (sehr beliebter Laufzeitfehler).

• Browserfehler sind Fehler, die außerhalb der Verantwortung des Scriptes liegen. Vor allen ist hier die Unerreichbarkeit eines Servers oder Dokumentes zu nennen.

  window.location.href = 'gibtesnicht.html';

  weist an, dass die genannte Datei geladen wird. Ist sie nicht verfügbar, tritt ein Browserfehler auf. Wir selbst würden eine Fehlermeldung wie '404-Not found' oder etwas ähnliches zu sehen bekommen.

  Interessant ist, dass ein error-Event gefeuert wird, wenn ein mit IMG referenziertes Bild nicht verfügbar oder korrupt ist.

Wie erlangt man Kontrolle?

Die Kontrolle übernimmt man durch Setzen von onerror bzw. window.onerror. Insgesamt hat man folgende Möglichkeiten (Beispiele folgen):

• Mit onerror=null verhindert man, dass Besucher JavaScript-Fehlermeldungen sehen, die durch JavaScript verursacht sind.

• Alternativ kann man die Funktion benennen, die die Fehler verarbeiten soll. Die Parameter sind (nachricht, url, zeilennummer). Hier hat man zwei Möglichkeiten:

  1. Wenn diese Funktion false liefert, erscheint auch der Standardfehlerdialog.
  2. Liefert sie true, wird er unterdrückt.
  Der erste Fall ist nützlich, um Fehler zwar festzustellen und zu tracken, aber durch den originalen Dialog melden zu lassen.

Beispiele

Beispiel 1

Hier werden alle Fehlermeldungen unterdrückt, wenn das Bild lädt.

<img name="bild1" src="bad.gif"> onerror="null" />

Beispiel 2

Um Ferhlermeldungen für das gesamte Fenster abzuschalten, schreiben wir:

<script type="text/javascript">
  window.onerror = null;
</script>

Damit ist onerror dann insbesondere für das Bild null und muss nicht separat genannt und gesetzt werden.

<img name="bild1" src="bad.gif" />

Beispiel 3

Dieses Beispiel schaltet alle Fehlermeldungen ab, spezifiziert jedoch für das Bild eine eigene Fehlerbehandlungsroutine, die dann auch gerufen wird.

<script type="text/javascript">
window.onerror = null;

function imgErrorFunc() {
  alert("Bild ist fehlerhaft.");
}
</script>

<img name="bild1" src="bad.gif" onerror="imgErrorFunc();" />
<img name="bild2" src="bad.gif" />

Sie sehen: tritt in dem ersten Bild ein Fehler auf, wird die angegebene Funktion imgErrorFunc() gerufen, die hier eine Meldung "Bild ist fehlerhalft" erzeugt.

Für das fehlerhafte zweite Bild geschieht jedoch nichts. Da hier kein onerror Funktion angeben ist, gilt die bei window.onerror eingestellte. Diese hatten wird aber auf null und damit auf das Unterdrücken der Fehlermeldung gesetzt.

Wieso sind die Bilder fehlerhaft?

Es sei angenommen, dass bad.gif einen Fehler erzeugt.

Da bad.gif beiden Bildern bild1 und bild2 zugewiesen wird, sind beide fehlerhaft.

Bei bild2 wirkt window.onerror=null;.

Bei bild1 wurde explizit eine Fehlerbehandlungsfunktion genannt, weshalb bei letzterem etwas passiert und bei ersterem nichts, obwohl beide diegleiche Dateizuweisung aufweisen.

Beispiel 4

(Dieses Beispiel wurde 1:1 aus der englischen Netscape Dokumentation übernommen und neu beschrieben und formatiert.)

In diesem Beispiel wird gezeigt, wie Fehler getrackt werden. Es wird eine Funktion myError definiert, die JavaScript-Fehler unterbricht. Zum Einsatz kommen drei Felder msgArray, urlArray, lnoArray, die die Nachrichten, URLs und Zeilennummern für alle Fehler festhalten.

Klickt der Benutzer auf Display Error Report, so öffnet displayErrors() ein Fenster und erzeugt darin einen Report aus den erfaßten Daten. Der Standardfehlerdialog von JavaScript wird unterdrückt.

<script type="text/javascript">
window.onerror = myOnError;
msgArray = new Array();
urlArray = new Array();
lnoArray = new Array();

function myOnError(msg, url, lno) {
  msgArray[msgArray.length] = msg;
  urlArray[urlArray.length] = url;
  lnoArray[lnoArray.length] = lno;
  return true;
}

function displayErrors() {
  win2=window.open('', 'window2', 'scrollbars=yes');
  win2.document.writeln('<b>Error Report</b><p>');
  for (var i=0; i < msgArray.length; i++) {
    win2.document.writeln('<b>Error in file:</b> ' + urlArray[i] + '<br>');
    win2.document.writeln('<b>Line number:</b> ' + lnoArray[i] + '<br>');
    win2.document.writeln('<b>Message:</b> ' + msgArray[i] + '<p>');
  }
  win2.document.close();
}
</script>

Beispieldatei:

<body onload="noSuchFunction()">
<form>
<br><input type="button" value="This button has a syntax error"
onClick="alert('unterminated string)">
<p><input type="button" value="Display Error Report"
onClick="displayErrors()">
</form>

Error Report zur Beispieldatei

Error in file: file:///c%7C/temp/onerror.html
Line number: 34
Message: unterminated string literal
Error in file: file:///c%7C/temp/onerror.html
Line number: 34
Message: missing ) after argument list
Error in file: file:///c%7C/temp/onerror.html
Line number: 30
Message: noSuchFunction is not defined

Sie sehen, dass jeweils URL, Zeilennummer und Nachricht aufgezeichnet wurden.