Eine definitive Anleitung zum Umgang mit Fehlern in JavaScript

Murphys Gesetz besagt, dass alles, was schief gehen kann, irgendwann auch schief gehen wird. Dies gilt ein bisschen zu gut in der Welt der Programmierung. Wenn Sie eine Anwendung erstellen, werden Sie wahrscheinlich Fehler und andere Probleme verursachen. Fehler in JavaScript sind ein solches häufiges Problem!

Der Erfolg eines Softwareprodukts hängt davon ab, wie gut seine Ersteller diese Probleme lösen können, bevor sie ihren Benutzern schaden. Und JavaScript ist von allen Programmiersprachen für sein durchschnittliches Fehlerbehandlungsdesign berüchtigt.

Wenn Sie eine JavaScript-Anwendung erstellen, besteht eine hohe Wahrscheinlichkeit, dass Sie an der einen oder anderen Stelle mit Datentypen durcheinander kommen. Wenn das nicht der Fall ist, könnten Sie am Ende ein undefined durch einen Null- oder einen dreifachen Gleichheitsoperator ( === ) durch einen doppelten Gleichheitsoperator ( == ) ersetzen.

Es ist nur menschlich, Fehler zu machen. Deshalb zeigen wir Ihnen alles, was Sie über den Umgang mit Fehlern in JavaScript wissen müssen.

Dieser Artikel führt Sie durch die grundlegenden Fehler in JavaScript und erklärt die verschiedenen Fehler, auf die Sie stoßen können. Anschließend erfahren Sie, wie Sie diese Fehler erkennen und beheben können. Es gibt auch ein paar Tipps für den effektiven Umgang mit Fehlern in Produktionsumgebungen.

Fangen wir ohne weiteres an!

Was sind JavaScript-Fehler?

Programmierfehler beziehen sich auf Situationen, die ein Programm nicht normal funktionieren lassen. Dies kann passieren, wenn ein Programm nicht weiß, wie es mit der anstehenden Aufgabe umgehen soll, z. B. wenn versucht wird, eine nicht vorhandene Datei zu öffnen oder einen webbasierten API-Endpunkt zu erreichen, während keine Netzwerkverbindung besteht.

Diese Situationen bringen das Programm dazu, Fehler an den Benutzer zu werfen, der besagt, dass es nicht weiß, wie es weitergehen soll. Das Programm sammelt so viele Informationen wie möglich über den Fehler und meldet dann, dass es nicht weitermachen kann.

Intelligente Programmierer versuchen, diese Szenarien vorherzusagen und abzudecken, damit der Benutzer eine technische Fehlermeldung wie „404“ nicht selbst herausfinden muss. Stattdessen zeigen sie eine viel verständlichere Meldung: „Die Seite konnte nicht gefunden werden.“

Fehler in JavaScript sind Objekte, die immer dann angezeigt werden, wenn ein Programmierfehler auftritt. Diese Objekte enthalten umfangreiche Informationen über die Art des Fehlers, die Anweisung, die den Fehler verursacht hat, und den Stack-Trace, als der Fehler aufgetreten ist. JavaScript ermöglicht es Programmierern auch, benutzerdefinierte Fehler zu erstellen, um zusätzliche Informationen beim Debuggen von Problemen bereitzustellen.

Eigenschaften eines Fehlers

Nachdem die Definition eines JavaScript-Fehlers nun klar ist, ist es an der Zeit, in die Details einzutauchen.

Fehler in JavaScript enthalten bestimmte standardmäßige und benutzerdefinierte Eigenschaften, die helfen, die Ursache und Auswirkungen des Fehlers zu verstehen. Standardmäßig enthalten Fehler in JavaScript drei Eigenschaften:

1. message : Ein Zeichenfolgenwert, der die Fehlermeldung enthält
2. name : Die Art des aufgetretenen Fehlers (Wir werden im nächsten Abschnitt ausführlich darauf eingehen)
3. stack : Der Stack-Trace des Codes, der ausgeführt wurde, als der Fehler auftrat.

Zusätzlich können Fehler auch Eigenschaften wie columnNumber, lineNumber, fileName usw. tragen, um den Fehler besser zu beschreiben. Diese Eigenschaften sind jedoch nicht standardmäßig und können in jedem Fehlerobjekt vorhanden sein, das von Ihrer JavaScript-Anwendung generiert wird.

Stack-Trace verstehen

Ein Stack-Trace ist die Liste der Methodenaufrufe, in denen sich ein Programm befand, als ein Ereignis wie eine Ausnahme oder eine Warnung auftritt. So sieht ein von einer Ausnahme begleiteter Stack-Trace-Beispiel aus:

Wie Sie sehen können, beginnt es mit der Ausgabe des Fehlernamens und der Fehlermeldung, gefolgt von einer Liste der Methoden, die aufgerufen wurden. Jeder Methodenaufruf gibt die Position seines Quellcodes und die Zeile an, in der er aufgerufen wurde. Sie können diese Daten verwenden, um durch Ihre Codebasis zu navigieren und festzustellen, welcher Codeabschnitt den Fehler verursacht.

Diese Methodenliste ist gestapelt angeordnet. Es zeigt, wo Ihre Ausnahme zuerst ausgelöst wurde und wie sie durch die gestapelten Methodenaufrufe weitergegeben wurde. Durch das Implementieren eines Fangs für die Ausnahme wird verhindert, dass sie sich durch den Stapel nach oben ausbreitet und Ihr Programm zum Absturz bringt. Möglicherweise möchten Sie jedoch schwerwiegende Fehler unabgefangen lassen, um das Programm in einigen Szenarien absichtlich zum Absturz zu bringen.

Fehler vs. Ausnahmen

Die meisten Menschen betrachten Fehler und Ausnahmen normalerweise als dasselbe. Es ist jedoch wichtig, einen kleinen, aber grundlegenden Unterschied zwischen ihnen zu beachten.

Um dies besser zu verstehen, nehmen wir ein kurzes Beispiel. So können Sie einen Fehler in JavaScript definieren:

 const wrongTypeError = TypeError("Wrong type found, expected character")

Und so wird das wrongTypeError Objekt zur Ausnahme:

 throw wrongTypeError

Die meisten Leute neigen jedoch dazu, die Kurzform zu verwenden, die Fehlerobjekte definiert, während sie sie werfen:

 throw TypeError("Wrong type found, expected character")

Dies ist gängige Praxis. Dies ist jedoch einer der Gründe, warum Entwickler dazu neigen, Ausnahmen und Fehler zu verwechseln. Daher ist es wichtig, die Grundlagen zu kennen, auch wenn Sie Kurzschriften verwenden, um Ihre Arbeit schnell zu erledigen.

Arten von Fehlern in JavaScript

Es gibt eine Reihe vordefinierter Fehlertypen in JavaScript. Sie werden automatisch von der JavaScript-Laufzeit ausgewählt und definiert, wenn der Programmierer Fehler in der Anwendung nicht explizit behandelt.

Dieser Abschnitt führt Sie durch einige der häufigsten Arten von Fehlern in JavaScript und erklärt, wann und warum sie auftreten.

RangeError

Ein RangeError wird ausgelöst, wenn eine Variable mit einem Wert außerhalb ihres zulässigen Wertebereichs festgelegt wird. Es tritt normalerweise auf, wenn ein Wert als Argument an eine Funktion übergeben wird und der angegebene Wert nicht im Bereich der Parameter der Funktion liegt. Es kann manchmal schwierig werden, es zu beheben, wenn schlecht dokumentierte Bibliotheken von Drittanbietern verwendet werden, da Sie den Bereich möglicher Werte für die Argumente kennen müssen, um den richtigen Wert zu übergeben.

Einige der häufigsten Szenarien, in denen RangeError auftritt, sind:

• Versuch, ein Array mit unzulässigen Längen über den Array-Konstruktor zu erstellen.
• Übergeben schlechter Werte an numerische Methoden wie toExponential() , toPrecision() , toFixed() , etc.
• Übergeben unzulässiger Werte an Zeichenfolgenfunktionen wie normalize() .

Referenzfehler

Ein ReferenceError tritt auf, wenn etwas mit der Referenz einer Variablen in Ihrem Code nicht stimmt. Möglicherweise haben Sie vergessen, einen Wert für die Variable zu definieren, bevor Sie sie verwenden, oder Sie versuchen möglicherweise, eine unzugängliche Variable in Ihrem Code zu verwenden. In jedem Fall liefert das Durchsuchen des Stack-Trace zahlreiche Informationen, um die fehlerhafte Variablenreferenz zu finden und zu beheben.

Einige der häufigsten Gründe für das Auftreten von ReferenceErrors sind:

• Tippfehler in einem Variablennamen gemacht.
• Versuch, auf blockbezogene Variablen außerhalb ihrer Gültigkeitsbereiche zuzugreifen.
• Verweisen auf eine globale Variable aus einer externen Bibliothek (wie $ aus jQuery), bevor sie geladen wird.

Syntax-Fehler

Diese Fehler sind am einfachsten zu beheben, da sie auf einen Fehler in der Syntax des Codes hinweisen. Da JavaScript eine Skriptsprache ist, die interpretiert und nicht kompiliert wird, werden diese ausgelöst, wenn die App das Skript ausführt, das den Fehler enthält. Bei kompilierten Sprachen werden solche Fehler während der Kompilierung identifiziert. Daher werden die App-Binärdateien nicht erstellt, bis diese behoben sind.

Einige der häufigsten Gründe, warum SyntaxErrors auftreten können, sind:

• Anführungszeichen fehlen
• Schließende Klammern fehlen
• Falsche Ausrichtung von geschweiften Klammern oder anderen Zeichen

Es empfiehlt sich, ein Linting-Tool in Ihrer IDE zu verwenden, um solche Fehler für Sie zu identifizieren, bevor sie den Browser treffen.

TypeError

TypeError ist einer der häufigsten Fehler in JavaScript-Apps. Dieser Fehler wird erzeugt, wenn sich herausstellt, dass ein Wert nicht von einem bestimmten erwarteten Typ ist. Einige der häufigsten Fälle, in denen es auftritt, sind:

• Aufrufen von Objekten, die keine Methoden sind.
• Versuch, auf Eigenschaften von Null- oder undefinierten Objekten zuzugreifen
• Behandlung einer Zeichenfolge als Zahl oder umgekehrt

Es gibt viel mehr Möglichkeiten, wo ein TypeError auftreten kann. Wir werden uns später einige berühmte Instanzen ansehen und lernen, wie man sie repariert.

Interner Fehler

Der InternalError-Typ wird verwendet, wenn eine Ausnahme in der JavaScript-Laufzeit-Engine auftritt. Es kann auf ein Problem mit Ihrem Code hinweisen oder auch nicht.

In den meisten Fällen tritt InternalError nur in zwei Szenarien auf:

• Wenn ein Patch oder ein Update der JavaScript-Laufzeit einen Fehler enthält, der Ausnahmen auslöst (dies passiert sehr selten)
• Wenn Ihr Code Entitäten enthält, die für die JavaScript-Engine zu groß sind (z. B. zu viele Schalterfälle, zu große Array-Initialisierer, zu viele Rekursionen)

Der geeignetste Ansatz zur Behebung dieses Fehlers besteht darin, die Ursache anhand der Fehlermeldung zu ermitteln und Ihre App-Logik nach Möglichkeit neu zu strukturieren, um die plötzliche Arbeitsbelastung der JavaScript-Engine zu beseitigen.

URIFehler

URIError tritt auf, wenn eine globale URI-Behandlungsfunktion wie decodeURIComponent illegal verwendet wird. Dies weist normalerweise darauf hin, dass der an den Methodenaufruf übergebene Parameter nicht den URI-Standards entspricht und daher von der Methode nicht ordnungsgemäß analysiert wurde.

Die Diagnose dieser Fehler ist normalerweise einfach, da Sie nur die Argumente für Fehlbildungen untersuchen müssen.

Bewertungsfehler

Ein EvalError tritt auf, wenn bei einem eval() Funktionsaufruf ein Fehler auftritt. Die Funktion eval() wird verwendet, um JavaScript-Code auszuführen, der in Strings gespeichert ist. Da jedoch aufgrund von Sicherheitsproblemen dringend davon abgeraten wird, die Funktion eval() zu verwenden, und die aktuellen ECMAScript-Spezifikationen die EvalError -Klasse nicht mehr auslösen, existiert dieser Fehlertyp lediglich, um die Abwärtskompatibilität mit älterem JavaScript-Code aufrechtzuerhalten.

Wenn Sie mit einer älteren JavaScript-Version arbeiten, kann dieser Fehler auftreten. In jedem Fall ist es am besten, den im Funktionsaufruf eval() ausgeführten Code auf Ausnahmen zu untersuchen.

Erstellen benutzerdefinierter Fehlertypen

Während JavaScript eine angemessene Liste von Fehlertypklassen bietet, um die meisten Szenarien abzudecken, können Sie jederzeit einen neuen Fehlertyp erstellen, wenn die Liste Ihre Anforderungen nicht erfüllt. Die Grundlage dieser Flexibilität liegt in der Tatsache, dass JavaScript Ihnen erlaubt, mit dem throw Befehl buchstäblich alles zu werfen.

Technisch gesehen sind diese Aussagen also völlig legal:

 throw 8 throw "An error occurred"

Das Auslösen eines primitiven Datentyps liefert jedoch keine Details über den Fehler, wie z. B. seinen Typ, Namen oder den begleitenden Stack-Trace. Um dies zu beheben und den Fehlerbehandlungsprozess zu standardisieren, wurde die Error -Klasse bereitgestellt. Es wird auch davon abgeraten, primitive Datentypen beim Auslösen von Ausnahmen zu verwenden.

Sie können die Error erweitern, um Ihre benutzerdefinierte Fehlerklasse zu erstellen. Hier ist ein einfaches Beispiel dafür, wie Sie dies tun können:

 class ValidationError extends Error { constructor(message) { super(message); this.name = "ValidationError"; } }

Und Sie können es auf folgende Weise verwenden:

 throw ValidationError("Property not found: name")

Und Sie können es dann mit dem Schlüsselwort instanceof identifizieren:

 try { validateForm() // code that throws a ValidationError } catch (e) { if (e instanceof ValidationError) // do something else // do something else }

Top 10 der häufigsten Fehler in JavaScript

Nachdem Sie nun die häufigsten Fehlertypen kennen und wissen, wie Sie Ihre benutzerdefinierten Fehlertypen erstellen, ist es an der Zeit, sich einige der häufigsten Fehler anzusehen, denen Sie beim Schreiben von JavaScript-Code begegnen.

1. Nicht erfasster Bereichsfehler

Dieser Fehler tritt in Google Chrome unter einigen verschiedenen Szenarien auf. Erstens kann es vorkommen, dass Sie eine rekursive Funktion aufrufen und diese nicht beendet wird. Sie können dies selbst in der Chrome Developer Console überprüfen:

Um einen solchen Fehler zu beheben, stellen Sie also sicher, dass Sie die Grenzfälle Ihrer rekursiven Funktion korrekt definieren. Ein weiterer Grund, warum dieser Fehler auftritt, ist, wenn Sie einen Wert übergeben haben, der außerhalb des Bereichs eines Funktionsparameters liegt. Hier ist ein Beispiel:

Die Fehlermeldung gibt normalerweise an, was mit Ihrem Code nicht stimmt. Sobald Sie die Änderungen vorgenommen haben, wird es behoben.

2. Nicht erfasster TypeError: Eigenschaft kann nicht festgelegt werden

Dieser Fehler tritt auf, wenn Sie eine Eigenschaft für eine nicht definierte Referenz festlegen. Sie können das Problem mit diesem Code reproduzieren:

 var list list.count = 0

Hier ist die Ausgabe, die Sie erhalten:

Um diesen Fehler zu beheben, initialisieren Sie die Referenz mit einem Wert, bevor Sie auf ihre Eigenschaften zugreifen. So sieht es aus, wenn es repariert ist:

3. Nicht erfasster TypeError: Eigenschaft kann nicht gelesen werden

Dies ist einer der am häufigsten auftretenden Fehler in JavaScript. Dieser Fehler tritt auf, wenn Sie versuchen, eine Eigenschaft zu lesen oder eine Funktion für ein nicht definiertes Objekt aufzurufen. Sie können es sehr einfach reproduzieren, indem Sie den folgenden Code in einer Chrome-Entwicklerkonsole ausführen:

 var func func.call()

Hier ist die Ausgabe:

Ein undefiniertes Objekt ist eine der vielen möglichen Ursachen für diesen Fehler. Eine weitere bekannte Ursache für dieses Problem kann eine unsachgemäße Initialisierung des Status beim Rendern der Benutzeroberfläche sein. Hier ist ein reales Beispiel aus einer React-Anwendung:

 import React, { useState, useEffect } from "react"; const CardsList = () => { const [state, setState] = useState(); useEffect(() => { setTimeout(() => setState({ items: ["Card 1", "Card 2"] }), 2000); }, []); return ( <> {state.items.map((item) => ( <li key={item}>{item}</li> ))} </> ); }; export default CardsList;

Die App startet mit einem leeren Zustandscontainer und wird nach einer Verzögerung von 2 Sekunden mit einigen Items versorgt. Die Verzögerung wird eingerichtet, um einen Netzwerkanruf zu imitieren. Selbst wenn Ihr Netzwerk superschnell ist, kommt es immer noch zu einer kleinen Verzögerung, aufgrund derer die Komponente mindestens einmal gerendert wird. Wenn Sie versuchen, diese App auszuführen, erhalten Sie die folgende Fehlermeldung:

Dies liegt daran, dass der Zustandscontainer zum Zeitpunkt des Renderns undefiniert ist; daher gibt es keine items darauf. Das Beheben dieses Fehlers ist einfach. Sie müssen dem Zustandscontainer lediglich einen anfänglichen Standardwert zuweisen.

 // ... const [state, setState] = useState({items: []}); // ...

Jetzt, nach der eingestellten Verzögerung, zeigt Ihre App eine ähnliche Ausgabe:

Die genaue Lösung in Ihrem Code kann anders sein, aber das Wesentliche hier ist, Ihre Variablen immer richtig zu initialisieren, bevor Sie sie verwenden.

4. TypeError: 'undefined' ist kein Objekt

Dieser Fehler tritt in Safari auf, wenn Sie versuchen, auf die Eigenschaften eines nicht definierten Objekts zuzugreifen oder eine Methode für ein undefiniertes Objekt aufzurufen. Sie können denselben Code von oben ausführen, um den Fehler selbst zu reproduzieren.

Die Lösung für diesen Fehler ist ebenfalls dieselbe – stellen Sie sicher, dass Sie Ihre Variablen korrekt initialisiert haben und sie nicht undefiniert sind, wenn auf eine Eigenschaft oder Methode zugegriffen wird.

5. TypeError: null ist kein Objekt

Auch dies ähnelt dem vorherigen Fehler. Es tritt auf Safari auf, und der einzige Unterschied zwischen den beiden Fehlern besteht darin, dass dieser ausgelöst wird, wenn das Objekt, auf dessen Eigenschaft oder Methode zugegriffen wird, null statt undefined ist. Sie können dies reproduzieren, indem Sie den folgenden Code ausführen:

 var func = null func.call()

Hier ist die Ausgabe, die Sie erhalten:

Da null ein Wert ist, der explizit auf eine Variable gesetzt und nicht automatisch von JavaScript zugewiesen wird. Dieser Fehler kann nur auftreten, wenn Sie versuchen, auf eine Variable zuzugreifen, die Sie selbst auf null gesetzt haben. Sie müssen also Ihren Code erneut überprüfen und prüfen, ob die von Ihnen geschriebene Logik korrekt ist oder nicht.

6. TypeError: Eigenschaft „Länge“ kann nicht gelesen werden

Dieser Fehler tritt in Chrome auf, wenn Sie versuchen, die Länge eines null oder undefined Objekts zu lesen. Die Ursache dieses Problems ist ähnlich wie bei den vorherigen Problemen, aber es tritt ziemlich häufig bei der Verarbeitung von Listen auf; daher verdient es eine besondere Erwähnung. So können Sie das Problem reproduzieren:

In den neueren Versionen von Chrome wird dieser Fehler jedoch als Uncaught TypeError: Cannot read properties of undefined . So sieht es jetzt aus:

Die Lösung besteht wiederum darin, sicherzustellen, dass das Objekt, auf dessen Länge Sie zugreifen möchten, existiert und nicht auf null gesetzt ist.

7. TypeError: 'undefined' ist keine Funktion

Dieser Fehler tritt auf, wenn Sie versuchen, eine Methode aufzurufen, die in Ihrem Skript nicht vorhanden ist, oder die zwar vorhanden ist, aber im aufrufenden Kontext nicht referenziert werden kann. Dieser Fehler tritt normalerweise in Google Chrome auf und Sie können ihn beheben, indem Sie die Codezeile überprüfen, die den Fehler auslöst. Wenn Sie einen Tippfehler finden, korrigieren Sie ihn und prüfen Sie, ob er Ihr Problem löst.

Wenn Sie das selbstreferenzierende Schlüsselwort this in Ihrem Code verwendet haben, kann dieser Fehler auftreten, wenn this nicht angemessen an Ihren Kontext gebunden ist. Betrachten Sie den folgenden Code:

 function showAlert() { alert("message here") } document.addEventListener("click", () => { this.showAlert(); })

Wenn Sie den obigen Code ausführen, wird der besprochene Fehler ausgegeben. Dies geschieht, weil die als Ereignis-Listener übergebene anonyme Funktion im Kontext des document ausgeführt wird.

Im Gegensatz dazu wird die Funktion showAlert im Kontext des window definiert.

Um dies zu lösen, müssen Sie die richtige Referenz an die Funktion übergeben, indem Sie sie mit der Methode bind() :

 document.addEventListener("click", this.showAlert.bind(this))

8. ReferenceError: Ereignis ist nicht definiert

Dieser Fehler tritt auf, wenn Sie versuchen, auf eine Referenz zuzugreifen, die nicht im aufrufenden Bereich definiert ist. Dies geschieht normalerweise bei der Behandlung von Ereignissen, da diese Ihnen in der Callback-Funktion häufig eine Referenz namens event zur Verfügung stellen. Dieser Fehler kann auftreten, wenn Sie vergessen, das Ereignisargument in den Parametern Ihrer Funktion zu definieren, oder es falsch geschrieben haben.

Melden Sie sich für den Newsletter an

Möchten Sie wissen, wie wir unseren Traffic um über 1000 % gesteigert haben?

Schließen Sie sich über 20.000 anderen an, die unseren wöchentlichen Newsletter mit WordPress-Insidertipps erhalten!

Abonniere jetzt

Dieser Fehler tritt möglicherweise nicht in Internet Explorer oder Google Chrome auf (da IE eine globale Ereignisvariable anbietet und Chrome die Ereignisvariable automatisch an den Handler anfügt), er kann jedoch in Firefox auftreten. Es ist also ratsam, auf solche kleinen Fehler zu achten.

9. TypeError: Zuweisung an konstante Variable

Dies ist ein Fehler, der aus Unachtsamkeit entsteht. Wenn Sie versuchen, einer konstanten Variablen einen neuen Wert zuzuweisen, erhalten Sie ein solches Ergebnis:

Während es im Moment einfach zu beheben scheint, stellen Sie sich Hunderte solcher Variablendeklarationen vor und eine davon wird fälschlicherweise als const statt let definiert! Im Gegensatz zu anderen Skriptsprachen wie PHP gibt es in JavaScript nur minimale Unterschiede zwischen der Deklaration von Konstanten und Variablen. Daher ist es ratsam, zuerst Ihre Deklarationen zu überprüfen, wenn Sie auf diesen Fehler stoßen. Sie könnten auch auf diesen Fehler stoßen, wenn Sie vergessen , dass die genannte Referenz eine Konstante ist, und sie als Variable verwenden. Dies weist entweder auf Nachlässigkeit oder einen Fehler in der Logik Ihrer App hin. Stellen Sie sicher, dass Sie dies überprüfen, wenn Sie versuchen, dieses Problem zu beheben.

10. (unbekannt): Skriptfehler

Ein Skriptfehler tritt auf, wenn ein Skript eines Drittanbieters einen Fehler an Ihren Browser sendet. Auf diesen Fehler folgt (unbekannt), da das Skript des Drittanbieters zu einer anderen Domäne gehört als Ihre App. Der Browser verbirgt andere Details, um zu verhindern, dass vertrauliche Informationen aus dem Skript des Drittanbieters preisgegeben werden.

Sie können diesen Fehler nicht beheben, ohne die vollständigen Details zu kennen. So können Sie weitere Informationen zu dem Fehler erhalten:

1. Fügen Sie das crossorigin Attribut im script-Tag hinzu.
2. Legen Sie den richtigen Access-Control-Allow-Origin Header auf dem Server fest, auf dem das Skript gehostet wird.
3. [Optional] Wenn Sie keinen Zugriff auf den Server haben, auf dem das Skript gehostet wird, können Sie einen Proxy verwenden, um Ihre Anfrage mit den richtigen Headern an den Server und zurück an den Client weiterzuleiten.

Sobald Sie auf die Details des Fehlers zugreifen können, können Sie sich daran machen, das Problem zu beheben, das wahrscheinlich entweder bei der Bibliothek des Drittanbieters oder beim Netzwerk liegt.

So identifizieren und verhindern Sie Fehler in JavaScript

Während die oben besprochenen Fehler die häufigsten und häufigsten in JavaScript sind, werden Sie feststellen, dass es nie genug sein kann, sich auf ein paar Beispiele zu verlassen. Es ist wichtig zu verstehen, wie jede Art von Fehler in einer JavaScript-Anwendung während der Entwicklung erkannt und verhindert werden kann. So können Sie mit Fehlern in JavaScript umgehen.

Manuelles Werfen und Fangen von Fehlern

Die grundlegendste Methode zur Behandlung von Fehlern, die entweder manuell oder von der Laufzeit ausgelöst wurden, besteht darin, sie abzufangen. Wie die meisten anderen Sprachen bietet JavaScript eine Reihe von Schlüsselwörtern zur Behandlung von Fehlern. Es ist wichtig, jeden von ihnen im Detail zu kennen, bevor Sie sich daran machen, Fehler in Ihrer JavaScript-App zu behandeln.

Wurf

Das erste und grundlegendste Schlüsselwort des Satzes ist throw . Wie ersichtlich, wird das throw-Schlüsselwort verwendet, um Fehler auszulösen, um manuell Ausnahmen in der JavaScript-Laufzeit zu erstellen. Wir haben dies bereits früher in diesem Artikel besprochen, und hier ist der Kern der Bedeutung dieses Schlüsselworts:

• Sie können alles throw , einschließlich Zahlen, Zeichenfolgen und Error .
• Es ist jedoch nicht ratsam, primitive Datentypen wie Zeichenfolgen und Zahlen zu verwenden, da sie keine Debug-Informationen zu den Fehlern enthalten.
• Beispiel: throw TypeError("Please provide a string")

Versuchen

Das Schlüsselwort try wird verwendet, um anzuzeigen, dass ein Codeblock eine Ausnahme auslösen könnte. Seine Syntax ist:

 try { // error-prone code here }

Es ist wichtig zu beachten, dass ein catch -Block immer auf den try -Block folgen muss, um Fehler effektiv zu behandeln.

fangen

Das catch -Schlüsselwort wird verwendet, um einen catch-Block zu erstellen. Dieser Codeblock ist für die Behandlung der Fehler verantwortlich, die der nachgestellte try -Block abfängt. Hier ist seine Syntax:

 catch (exception) { // code to handle the exception here }

Und so implementieren Sie die try und catch Blöcke zusammen:

 try { // business logic code } catch (exception) { // error handling code }

Im Gegensatz zu C++ oder Java können Sie in JavaScript nicht mehrere catch -Blöcke an einen try -Block anhängen. Dies bedeutet, dass Sie dies nicht tun können:

 try { // business logic code } catch (exception) { if (exception instanceof TypeError) { // do something } } catch (exception) { if (exception instanceof RangeError) { // do something } }

Stattdessen können Sie eine if...else -Anweisung oder eine switch case-Anweisung innerhalb des einzelnen catch-Blocks verwenden, um alle möglichen Fehlerfälle zu behandeln. Es würde so aussehen:

 try { // business logic code } catch (exception) { if (exception instanceof TypeError) { // do something } else if (exception instanceof RangeError) { // do something else } }

schließlich

Das Schlüsselwort finally wird verwendet, um einen Codeblock zu definieren, der ausgeführt wird, nachdem ein Fehler behandelt wurde. Dieser Block wird nach den try- und catch-Blöcken ausgeführt.

Außerdem wird der finally-Block unabhängig vom Ergebnis der anderen beiden Blöcke ausgeführt. Das bedeutet, dass selbst wenn der catch-Block den Fehler nicht vollständig behandeln kann oder ein Fehler im catch-Block geworfen wird, der Interpreter den Code im finally-Block ausführt, bevor das Programm abstürzt.

Um als gültig zu gelten, muss dem try-Block in JavaScript entweder ein catch- oder ein finally-Block folgen. Ohne eines davon löst der Interpreter einen SyntaxError aus. Stellen Sie daher sicher, dass Ihren try-Blöcken mindestens einer von ihnen folgt, wenn Sie mit Fehlern umgehen.

Behandeln Sie Fehler global mit der Methode onerror()

Die onerror() Methode steht allen HTML-Elementen zur Behandlung eventuell auftretender Fehler zur Verfügung. Wenn beispielsweise ein img -Tag das Bild, dessen URL angegeben ist, nicht finden kann, löst es seine onerror-Methode aus, damit der Benutzer den Fehler behandeln kann.

Normalerweise würden Sie im onerror-Aufruf eine andere Bild-URL angeben, auf die das img -Tag zurückgreifen kann. So können Sie das per JavaScript machen:

 const image = document.querySelector("img") image.onerror = (event) => { console.log("Error occurred: " + event) }

Sie können diese Funktion jedoch verwenden, um einen globalen Fehlerbehandlungsmechanismus für Ihre App zu erstellen. So können Sie es tun:

 window.onerror = (event) => { console.log("Error occurred: " + event) }

Mit diesem Event-Handler können Sie die mehreren try...catch -Blöcke loswerden, die in Ihrem Code herumliegen, und die Fehlerbehandlung Ihrer App ähnlich wie die Ereignisbehandlung zentralisieren. Sie können mehrere Fehlerhandler an das Fenster anhängen, um das Single-Responsibility-Prinzip aus den SOLID-Designprinzipien beizubehalten. Der Interpreter durchläuft alle Handler, bis er den richtigen erreicht.

Übergeben Sie Fehler über Rückrufe

Während einfache und lineare Funktionen eine einfache Fehlerbehandlung ermöglichen, können Rückrufe die Angelegenheit erschweren.

Betrachten Sie den folgenden Codeabschnitt:

 const calculateCube = (number, callback) => { setTimeout(() => { const cube = number * number * number callback(cube) }, 1000) } const callback = result => console.log(result) calculateCube(4, callback)

Die obige Funktion demonstriert eine asynchrone Bedingung, bei der eine Funktion einige Zeit benötigt, um Operationen zu verarbeiten, und das Ergebnis später mit Hilfe eines Callbacks zurückgibt.

Wenn Sie versuchen, im Funktionsaufruf eine Zeichenfolge statt 4 einzugeben, erhalten Sie als Ergebnis NaN .

Dies muss richtig gehandhabt werden. Hier ist wie:

 const calculateCube = (number, callback) => { setTimeout(() => { if (typeof number !== "number") throw new Error("Numeric argument is expected") const cube = number * number * number callback(cube) }, 1000) } const callback = result => console.log(result) try { calculateCube(4, callback) } catch (e) { console.log(e) }

Das sollte das Problem idealerweise lösen. Wenn Sie jedoch versuchen, eine Zeichenfolge an den Funktionsaufruf zu übergeben, erhalten Sie Folgendes:

Obwohl Sie beim Aufrufen der Funktion einen Try-Catch-Block implementiert haben, heißt es immer noch, dass der Fehler nicht abgefangen wurde. Der Fehler wird ausgelöst, nachdem der Catch-Block aufgrund der Timeout-Verzögerung ausgeführt wurde.

Dies kann schnell bei Netzwerkanrufen auftreten, bei denen sich unerwartete Verzögerungen einschleichen. Sie müssen solche Fälle bei der Entwicklung Ihrer App abdecken.

So können Sie Fehler in Rückrufen richtig behandeln:

 const calculateCube = (number, callback) => { setTimeout(() => { if (typeof number !== "number") { callback(new TypeError("Numeric argument is expected")) return } const cube = number * number * number callback(null, cube) }, 2000) } const callback = (error, result) => { if (error !== null) { console.log(error) return } console.log(result) } try { calculateCube('hey', callback) } catch (e) { console.log(e) }

Die Ausgabe auf der Konsole lautet nun:

Dies zeigt an, dass der Fehler angemessen behandelt wurde.

Behandeln Sie Fehler in Promises

Die meisten Menschen neigen dazu, Versprechungen für die Handhabung asynchroner Aktivitäten zu bevorzugen. Promises haben noch einen weiteren Vorteil – ein abgelehntes Promise beendet Ihr Skript nicht. Sie müssen jedoch noch einen catch-Block implementieren, um Fehler in Promises zu behandeln. Um dies besser zu verstehen, schreiben wir die Funktion computeCube calculateCube() mit Promises um:

 const delay = ms => new Promise(res => setTimeout(res, ms)); const calculateCube = async (number) => { if (typeof number !== "number") throw Error("Numeric argument is expected") await delay(5000) const cube = number * number * number return cube } try { calculateCube(4).then(r => console.log(r)) } catch (e) { console.log(e) }

Das Timeout aus dem vorherigen Code wurde zum Verständnis in die delay isoliert. Wenn Sie versuchen, eine Zeichenfolge anstelle von 4 einzugeben, sieht die Ausgabe, die Sie erhalten, etwa so aus:

Auch dies liegt daran, Promise den Fehler auslöst, nachdem alles andere die Ausführung abgeschlossen hat. Die Lösung für dieses Problem ist einfach. Fügen Sie der Promise-Kette einfach einen catch() Aufruf wie folgt hinzu:

 calculateCube("hey") .then(r => console.log(r)) .catch(e => console.log(e))

Jetzt wird die Ausgabe sein:

Sie können beobachten, wie einfach es ist, Fehler mit Versprechungen zu behandeln. Außerdem können Sie einen finally() -Block und den Promise-Aufruf verketten, um Code hinzuzufügen, der ausgeführt wird, nachdem die Fehlerbehandlung abgeschlossen wurde.

Alternativ können Sie Fehler in Promises auch mit der traditionellen Try-Catch-Finally-Technik behandeln. So würde Ihr Promise Call in diesem Fall aussehen:

 try { let result = await calculateCube("hey") console.log(result) } catch (e) { console.log(e) } finally { console.log('Finally executed") }

Dies funktioniert jedoch nur innerhalb einer asynchronen Funktion. Daher ist der am meisten bevorzugte Weg, Fehler in Promises zu behandeln, catch zu verketten und finally zum Promise-Call zu führen.

throw/catch vs onerror() vs Callbacks vs Promises: Was ist das Beste?

Mit vier Methoden, die Ihnen zur Verfügung stehen, müssen Sie wissen, wie Sie die für jeden Anwendungsfall am besten geeignete auswählen. So können Sie selbst entscheiden:

werfen/fangen

Sie werden diese Methode die meiste Zeit verwenden. Stellen Sie sicher, dass Sie Bedingungen für alle möglichen Fehler in Ihrem catch-Block implementieren, und denken Sie daran, einen finally-Block einzuschließen, wenn Sie nach dem try-Block einige Speicherbereinigungsroutinen ausführen müssen.

Zu viele Try/Catch-Blöcke können jedoch die Wartung Ihres Codes erschweren. Wenn Sie sich in einer solchen Situation befinden, möchten Sie Fehler möglicherweise über den globalen Handler oder die Promise-Methode behandeln.

Bei der Entscheidung zwischen asynchronen Try/Catch-Blöcken und catch() von Promise ist es ratsam, sich für die asynchronen Try/Catch-Blöcke zu entscheiden, da sie Ihren Code linear und einfach zu debuggen machen.

onerror()

Am besten verwenden Sie die Methode onerror() , wenn Sie wissen, dass Ihre App mit vielen Fehlern umgehen muss und diese gut über die Codebasis verteilt sein können. Mit der onerror Methode können Sie Fehler behandeln, als wären sie nur ein weiteres Ereignis, das von Ihrer Anwendung behandelt wird. Sie können mehrere Fehlerhandler definieren und sie beim anfänglichen Rendern an das Fenster Ihrer App anfügen.

Sie müssen jedoch auch bedenken, dass die Einrichtung der Methode onerror() in kleineren Projekten mit einem geringeren Fehlerumfang unnötig schwierig sein kann. Wenn Sie sicher sind, dass Ihre App nicht zu viele Fehler auslöst, funktioniert die herkömmliche Throw/Catch-Methode am besten für Sie.

Rückrufe und Versprechungen

Die Fehlerbehandlung in Callbacks und Promises unterscheidet sich aufgrund ihres Codedesigns und ihrer Struktur. Wenn Sie sich jedoch zwischen diesen beiden entscheiden, bevor Sie Ihren Code geschrieben haben, ist es am besten, Versprechungen zu machen.

Das liegt daran, dass Promises ein eingebautes Konstrukt zum Verketten eines catch() und eines finally() -Blocks haben, um Fehler einfach zu behandeln. Diese Methode ist einfacher und sauberer, als zusätzliche Argumente zu definieren/vorhandene Argumente wiederzuverwenden, um Fehler zu behandeln.

Keep Track of Changes With Git Repositories

Many errors often arise due to manual mistakes in the codebase. While developing or debugging your code, you might end up making unnecessary changes that may cause new errors to appear in your codebase. Automated testing is a great way to keep your code in check after every change. However, it can only tell you if something's wrong. If you don't take frequent backups of your code, you'll end up wasting time trying to fix a function or a script that was working just fine before.

This is where git plays its role. With a proper commit strategy, you can use your git history as a backup system to view your code as it evolved through the development. You can easily browse through your older commits and find out the version of the function working fine before but throwing errors after an unrelated change.

You can then restore the old code or compare the two versions to determine what went wrong. Modern web development tools like GitHub Desktop or GitKraken help you to visualize these changes side by side and figure out the mistakes quickly.

A habit that can help you make fewer errors is running code reviews whenever you make a significant change to your code. If you're working in a team, you can create a pull request and have a team member review it thoroughly. This will help you use a second pair of eyes to spot out any errors that might have slipped by you.

Best Practices for Handling Errors in JavaScript

The above-mentioned methods are adequate to help you design a robust error handling approach for your next JavaScript application. However, it would be best to keep a few things in mind while implementing them to get the best out of your error-proofing. Here are some tips to help you.

1. Use Custom Errors When Handling Operational Exceptions

We introduced custom errors early in this guide to give you an idea of how to customize the error handling to your application's unique case. It's advisable to use custom errors wherever possible instead of the generic Error class as it provides more contextual information to the calling environment about the error.

On top of that, custom errors allow you to moderate how an error is displayed to the calling environment. This means that you can choose to hide specific details or display additional information about the error as and when you wish.

You can go so far as to format the error contents according to your needs. This gives you better control over how the error is interpreted and handled.

2. Do Not Swallow Any Exceptions

Even the most senior developers often make a rookie mistake — consuming exceptions levels deep down in their code.

You might come across situations where you have a piece of code that is optional to run. If it works, great; if it doesn't, you don't need to do anything about it.

In these cases, it's often tempting to put this code in a try block and attach an empty catch block to it. However, by doing this, you'll leave that piece of code open to causing any kind of error and getting away with it. This can become dangerous if you have a large codebase and many instances of such poor error management constructs.

The best way to handle exceptions is to determine a level on which all of them will be dealt and raise them until there. This level can be a controller (in an MVC architecture app) or a middleware (in a traditional server-oriented app).

This way, you'll get to know where you can find all the errors occurring in your app and choose how to resolve them, even if it means not doing anything about them.

3. Use a Centralized Strategy for Logs and Error Alerts

Logging an error is often an integral part of handling it. Those who fail to develop a centralized strategy for logging errors may miss out on valuable information about their app's usage.

An app's event logs can help you figure out crucial data about errors and help to debug them quickly. If you have proper alerting mechanisms set up in your app, you can know when an error occurs in your app before it reaches a large section of your user base.

It's advisable to use a pre-built logger or create one to suit your needs. You can configure this logger to handle errors based on their levels (warning, debug, info, etc.), and some loggers even go so far as to send logs to remote logging servers immediately. This way, you can watch how your application's logic performs with active users.

4. Notify Users About Errors Appropriately

Another good point to keep in mind while defining your error handling strategy is to keep the user in mind.

All errors that interfere with the normal functioning of your app must present a visible alert to the user to notify them that something went wrong so the user can try to work out a solution. If you know a quick fix for the error, such as retrying an operation or logging out and logging back in, make sure to mention it in the alert to help fix the user experience in real-time.

In the case of errors that don't cause any interference with the everyday user experience, you can consider suppressing the alert and logging the error to a remote server for resolving later.

5. Implement a Middleware (Node.js)

The Node.js environment supports middlewares to add functionalities to server applications. You can use this feature to create an error-handling middleware for your server.

The most significant benefit of using middleware is that all of your errors are handled centrally in one place. You can choose to enable/disable this setup for testing purposes easily.

Here's how you can create a basic middleware:

const logError = err => { console.log("ERROR: " + String(err)) } const errorLoggerMiddleware = (err, req, res, next) => { logError(err) next(err) } const returnErrorMiddleware = (err, req, res, next) => { res.status(err.statusCode || 500) .send(err.message) } module.exports = { logError, errorLoggerMiddleware, returnErrorMiddleware }

Sie können diese Middleware dann wie folgt in Ihrer App verwenden:

 const { errorLoggerMiddleware, returnErrorMiddleware } = require('./errorMiddleware') app.use(errorLoggerMiddleware) app.use(returnErrorMiddleware)

Sie können jetzt benutzerdefinierte Logik in der Middleware definieren, um Fehler angemessen zu behandeln. Sie müssen sich keine Gedanken mehr über die Implementierung einzelner Fehlerbehandlungskonstrukte in Ihrer gesamten Codebasis machen.

6. Starten Sie Ihre App neu, um Programmierfehler zu behandeln (Node.js)

Wenn Node.js-Apps auf Programmierfehler stoßen, lösen sie möglicherweise nicht unbedingt eine Ausnahme aus und versuchen, die App zu schließen. Solche Fehler können Probleme umfassen, die durch Programmierfehler entstehen, wie z. B. hoher CPU-Verbrauch, aufgeblähter Speicher oder Speicherlecks. Der beste Weg, damit umzugehen, besteht darin, die App ordnungsgemäß neu zu starten, indem sie über den Node.js-Clustermodus oder ein einzigartiges Tool wie PM2 zum Absturz gebracht wird. Dadurch kann sichergestellt werden, dass die App bei einer Benutzeraktion nicht abstürzt und eine schreckliche Benutzererfahrung darstellt.

7. Alle nicht erfassten Ausnahmen abfangen (Node.js)

Sie können nie sicher sein, dass Sie alle möglichen Fehler behandelt haben, die in Ihrer App auftreten können. Daher ist es wichtig, eine Fallback-Strategie zu implementieren, um alle nicht erfassten Ausnahmen von Ihrer App abzufangen.

So können Sie das tun:

 process.on('uncaughtException', error => { console.log("ERROR: " + String(error)) // other handling mechanisms })

Sie können auch feststellen, ob der aufgetretene Fehler eine Standardausnahme oder ein benutzerdefinierter Betriebsfehler ist. Basierend auf dem Ergebnis können Sie den Prozess beenden und neu starten, um unerwartetes Verhalten zu vermeiden.

8. Fangen Sie alle unbehandelten Versprechensablehnungen ab (Node.js)

Ähnlich wie Sie niemals alle möglichen Ausnahmen abdecken können, besteht eine hohe Wahrscheinlichkeit, dass Sie es verpassen, alle möglichen Ablehnungen von Zusagen zu behandeln. Im Gegensatz zu Ausnahmen werfen Promise-Ablehnungen jedoch keine Fehler aus.

Ein wichtiges Versprechen, das abgelehnt wurde, könnte also als Warnung durchgehen und Ihre App der Möglichkeit eines unerwarteten Verhaltens aussetzen. Daher ist es wichtig, einen Fallback-Mechanismus für den Umgang mit der Ablehnung von Zusagen zu implementieren.

So können Sie das tun:

 const promiseRejectionCallback = error => { console.log("PROMISE REJECTED: " + String(error)) } process.on('unhandledRejection', callback)

Zusammenfassung

Wie in jeder anderen Programmiersprache sind Fehler in JavaScript recht häufig und natürlich. In einigen Fällen müssen Sie möglicherweise sogar absichtlich Fehler ausgeben, um Ihren Benutzern die richtige Antwort anzuzeigen. Daher ist es sehr wichtig, ihre Anatomie und Typen zu verstehen.

Darüber hinaus müssen Sie mit den richtigen Tools und Techniken ausgestattet sein, um Fehler zu erkennen und zu verhindern, dass Ihre Anwendung heruntergefahren wird.

In den meisten Fällen reicht eine solide Strategie zur Behandlung von Fehlern mit sorgfältiger Ausführung für alle Arten von JavaScript-Anwendungen aus.

Gibt es weitere JavaScript-Fehler, die Sie noch nicht beheben konnten? Irgendwelche Techniken zum konstruktiven Umgang mit JS-Fehlern? Lass es uns in den Kommentaren unten wissen!