[Optional] Wenn du keinen Zugriff auf den Server hast, auf dem das Skript gehostet wird, kannst du einen Proxy verwenden, der deine Anfrage an den Server weiterleitet und mit den richtigen Headern an den Client zur\u00fcckschickt.<\/li>\n<\/ol>\nSobald du die Details des Fehlers kennst, kannst du dich daran machen, das Problem zu beheben, das wahrscheinlich entweder mit der Bibliothek des Drittanbieters oder dem Netzwerk zusammenh\u00e4ngt.<\/p>\n
Wie du Fehler in JavaScript erkennst und vermeidest<\/h2>\n Auch wenn die oben genannten Fehler die h\u00e4ufigsten sind, auf die du in JavaScript sto\u00dfen wirst, reicht es nie aus, sich auf ein paar Beispiele zu verlassen. Es ist wichtig zu wissen, wie du bei der Entwicklung einer JavaScript-Anwendung alle Arten von Fehlern erkennen und verhindern kannst. Hier erf\u00e4hrst du, wie du mit Fehlern in JavaScript umgehen kannst.<\/p>\n
Manuelles Ausgeben und L\u00f6sen von Fehlern<\/h3>\n Die grundlegendste Art, mit Fehlern umzugehen, die entweder manuell oder von der Laufzeit ausgel\u00f6st wurden, ist, sie abzufangen. Wie die meisten anderen Sprachen bietet auch JavaScript eine Reihe von Schl\u00fcsselw\u00f6rtern zur Fehlerbehebung. Es ist wichtig, dass du jedes dieser Schl\u00fcsselw\u00f6rter genau kennst, bevor du dich daran machst, Fehler in deiner JavaScript-App zu beheben.<\/p>\n
throw<\/h4>\n Das erste und grundlegendste Schl\u00fcsselwort der Gruppe ist throw<\/code>. Wie du siehst, wird das throw-Schl\u00fcsselwort verwendet, um Fehler auszul\u00f6sen und manuell Ausnahmen in der JavaScript-Laufzeit zu erzeugen. Wir haben dies bereits weiter oben in diesem Artikel besprochen, und hier ist die Bedeutung dieses Schl\u00fcsselworts im Wesentlichen:<\/p>\n\nDu kannst throw<\/code> alles geben, auch Zahlen, Strings und Error<\/code> Objekte.<\/li>\nEs ist jedoch nicht ratsam, primitive Datentypen wie Strings und Zahlen zu nehmen, da sie keine Debug-Informationen \u00fcber die Fehler enthalten.<\/li>\n Beispiel throw TypeError(\"Please provide a string\")<\/code><\/li>\n<\/ul>\ntry<\/h4>\n Das Schl\u00fcsselwort try<\/code> wird verwendet, um anzuzeigen, dass ein Codeblock eine Ausnahme ausl\u00f6sen k\u00f6nnte. Seine Syntax lautet:<\/p>\ntry {\n \/\/ error-prone code here\n}<\/code><\/pre>\nEs ist wichtig zu beachten, dass ein catch<\/code> Block immer auf den try<\/code> Block folgen muss, um Fehler effektiv zu behandeln.<\/p>\ncatch<\/h4>\n Das Schl\u00fcsselwort catch<\/code> wird verwendet, um einen catch-Block zu erstellen. Dieser Codeblock ist f\u00fcr die Behandlung von Fehlern zust\u00e4ndig, die der nachfolgende try<\/code> Block auff\u00e4ngt. Hier ist seine Syntax:<\/p>\ncatch (exception) {\n \/\/ code to handle the exception here\n}<\/code><\/pre>\nUnd so implementierst du die Bl\u00f6cke try<\/code> und catch<\/code> zusammen:<\/p>\ntry {\n \/\/ business logic code\n} catch (exception) {\n \/\/ error handling code\n}<\/code><\/pre>\nAnders als in C++ oder Java kannst du in JavaScript nicht mehrere catch<\/code> Bl\u00f6cke an einen try<\/code> Block anh\u00e4ngen. Das bedeutet, dass du das nicht tun kannst:<\/p>\ntry {\n \/\/ business logic code\n} catch (exception) {\n if (exception instanceof TypeError) {\n \/\/ do something\n }\n} catch (exception) {\n if (exception instanceof RangeError) {\n \/\/ do something\n }\n}<\/code><\/pre>\nStattdessen kannst du eine if...else<\/code> Anweisung oder eine switch case Anweisung innerhalb des einzelnen catch-Blocks verwenden, um alle m\u00f6glichen Fehlerf\u00e4lle zu behandeln. Das w\u00fcrde dann so aussehen:<\/p>\ntry {\n \/\/ business logic code\n} catch (exception) {\n if (exception instanceof TypeError) {\n \/\/ do something\n } else if (exception instanceof RangeError) {\n \/\/ do something else\n }\n}<\/code><\/pre>\nfinally<\/h4>\n Das Schl\u00fcsselwort finally<\/code> wird verwendet, um einen Codeblock zu definieren, der ausgef\u00fchrt wird, nachdem ein Fehler behandelt worden ist. Dieser Block wird nach den try- und catch-Bl\u00f6cken ausgef\u00fchrt.<\/p>\nAu\u00dferdem wird der finally-Block unabh\u00e4ngig vom Ergebnis der anderen beiden Bl\u00f6cke ausgef\u00fchrt. Das bedeutet, dass der Interpreter den Code im finally-Block ausf\u00fchrt, bevor das Programm abst\u00fcrzt, selbst wenn der catch-Block den Fehler nicht vollst\u00e4ndig behandeln kann oder ein Fehler im catch-Block ausgel\u00f6st wird.<\/p>\n
Um als g\u00fcltig zu gelten, muss auf den try-Block in JavaScript entweder ein catch- oder ein finally-Block folgen. Ohne einen dieser Bl\u00f6cke l\u00f6st der Interpreter einen SyntaxError aus. Achte deshalb darauf, dass du deinen try-Bl\u00f6cken mindestens einen dieser beiden Bl\u00f6cke folgen l\u00e4sst, wenn du Fehler behandelst.<\/p>\n
Globale Fehlerbehandlung mit der Methode onerror()<\/h3>\n Die Methode onerror()<\/code> steht f\u00fcr alle HTML-Elemente zur Verf\u00fcgung, um Fehler zu behandeln, die bei ihnen auftreten k\u00f6nnen. Wenn zum Beispiel ein img<\/code> -Tag das Bild, dessen URL angegeben ist, nicht finden kann, wird seine onerror-Methode ausgel\u00f6st, damit der Benutzer den Fehler behandeln kann.<\/p>\nNormalerweise w\u00fcrdest du im onerror-Aufruf eine andere Bild-URL angeben, auf die der img<\/code> -Tag zur\u00fcckgreifen kann. So kannst du das mit JavaScript machen:<\/p>\nconst image = document.querySelector(\"img\")\n\nimage.onerror = (event) => {\n console.log(\"Error occurred: \" + event)\n}<\/code><\/pre>\nDu kannst diese Funktion aber auch nutzen, um einen globalen Fehlerbehandlungsmechanismus f\u00fcr deine App zu erstellen. So kannst du das tun:<\/p>\n
window.onerror = (event) => {\n console.log(\"Error occurred: \" + event)\n}<\/code><\/pre>\nMit diesem Event-Handler kannst du dich von den vielen try...catch<\/code> Bl\u00f6cken in deinem Code befreien und die Fehlerbehandlung in deiner App \u00e4hnlich wie die Ereignisbehandlung zentralisieren. Du kannst mehrere Fehlerhandler an das Fenster anh\u00e4ngen, um das Single-Responsibility-Prinzip aus den SOLID-Designprinzipien zu wahren. Der Interpreter wird alle Handler durchlaufen, bis er den richtigen erreicht.<\/p>\n\u00dcbergabe von Fehlern \u00fcber Callbacks<\/h3>\n W\u00e4hrend einfache und lineare Funktionen eine einfache Fehlerbehebung erm\u00f6glichen, k\u00f6nnen R\u00fcckrufe die Angelegenheit verkomplizieren.<\/p>\n
Betrachte das folgende St\u00fcck Code:<\/p>\n
const calculateCube = (number, callback) => {\n setTimeout(() => {\n const cube = number * number * number\n callback(cube)\n }, 1000)\n}\n\nconst callback = result => console.log(result)\n\ncalculateCube(4, callback)<\/code><\/pre>\nDie obige Funktion demonstriert einen asynchronen Zustand, in dem eine Funktion einige Zeit braucht, um Operationen zu verarbeiten und das Ergebnis sp\u00e4ter mit Hilfe eines R\u00fcckrufs zur\u00fcckgibt.<\/p>\n
Wenn du versuchst, in den Funktionsaufruf eine Zeichenkette anstelle von 4 einzugeben, erh\u00e4ltst du als Ergebnis NaN<\/code>.<\/p>\nDas muss richtig gehandhabt werden. So geht’s:<\/p>\n
const calculateCube = (number, callback) => {\n\n setTimeout(() => {\n if (typeof number !== \"number\")\n throw new Error(\"Numeric argument is expected\")\n\n const cube = number * number * number\n callback(cube)\n }, 1000)\n}\n\nconst callback = result => console.log(result)\n\ntry {\n calculateCube(4, callback)\n} catch (e) { console.log(e) }<\/code><\/pre>\nDamit sollte das Problem im Idealfall gel\u00f6st sein. Wenn du jedoch versuchst, eine Zeichenkette an den Funktionsaufruf zu \u00fcbergeben, bekommst du Folgendes zu sehen:<\/p>\nFehlerbeispiel mit dem falschen Argument.<\/figcaption><\/figure>\nObwohl du beim Aufruf der Funktion einen try-catch-Block implementiert hast, hei\u00dft es immer noch, der Fehler sei nicht gefunden. Der Fehler wird aufgrund der Timeout-Verz\u00f6gerung erst nach der Ausf\u00fchrung des catch-Blocks ausgel\u00f6st.<\/p>\n
Das kann bei Netzwerkaufrufen schnell passieren, wenn sich unerwartete Verz\u00f6gerungen einschleichen. Du musst solche F\u00e4lle bei der Entwicklung deiner App abdecken.<\/p>\n
Hier erf\u00e4hrst du, wie du Fehler in Callbacks richtig beheben kannst:<\/p>\n
const calculateCube = (number, callback) => {\n\n setTimeout(() => {\n if (typeof number !== \"number\") {\n callback(new TypeError(\"Numeric argument is expected\"))\n return\n }\n const cube = number * number * number\n callback(null, cube)\n }, 2000)\n}\n\nconst callback = (error, result) => {\n if (error !== null) {\n console.log(error)\n return\n }\n console.log(result)\n}\n\ntry {\n calculateCube('hey', callback)\n} catch (e) {\n console.log(e)\n}<\/code><\/pre>\nDie Ausgabe auf der Konsole wird nun sein:<\/p>\nTypeError Beispiel mit illegalem Argument.<\/figcaption><\/figure>\nDies zeigt an, dass der Fehler angemessen behandelt wurde.<\/p>\n
Fehler in Promises behandeln<\/h3>\n Die meisten Menschen bevorzugen Promises f\u00fcr die Behandlung asynchroner Aktivit\u00e4ten. Promises haben einen weiteren Vorteil – ein abgelehntes Promise beendet dein Skript nicht. Trotzdem musst du einen catch-Block implementieren, um Fehler in Promises zu behandeln. Um das besser zu verstehen, wollen wir die Funktion calculateCube()<\/code> mit Promises umschreiben:<\/p>\nconst delay = ms => new Promise(res => setTimeout(res, ms));\n\nconst calculateCube = async (number) => {\n if (typeof number !== \"number\")\n throw Error(\"Numeric argument is expected\")\n await delay(5000)\n const cube = number * number * number\n return cube\n}\n\ntry {\n calculateCube(4).then(r => console.log(r))\n} catch (e) { console.log(e) }<\/code><\/pre>\nDie Zeit\u00fcberschreitung aus dem vorherigen Code wurde zum besseren Verst\u00e4ndnis in die Funktion delay<\/code> ausgelagert. Wenn du versuchst, eine Zeichenkette statt 4 einzugeben, bekommst du eine \u00e4hnliche Ausgabe wie diese:<\/p>\nTypeError Beispiel mit einem illegalen Argument in Promise.<\/figcaption><\/figure>\nAuch hier liegt es daran, dass Promise<\/code> den Fehler ausl\u00f6st, nachdem alles andere bereits ausgef\u00fchrt wurde. Die L\u00f6sung f\u00fcr dieses Problem ist einfach. F\u00fcge der Promise-Kette einfach einen catch()<\/code> -Aufruf wie folgt hinzu:<\/p>\ncalculateCube(\"hey\")\n.then(r => console.log(r))\n.catch(e => console.log(e))<\/code><\/pre>\nJetzt lautet die Ausgabe:<\/p>\nHandled TypeError example with illegal argument.<\/figcaption><\/figure>\nDu kannst sehen, wie einfach es ist, Fehler mit Versprechen zu behandeln. Au\u00dferdem kannst du einen finally()<\/code> Block und den Aufruf des Versprechens verketten, um Code hinzuzuf\u00fcgen, der nach Abschluss der Fehlerbehandlung ausgef\u00fchrt wird.<\/p>\nAlternativ kannst du Fehler in Versprechen auch mit der traditionellen try-catch-finally-Technik behandeln. So w\u00fcrde dein Versprechensaufruf in diesem Fall aussehen:<\/p>\n
try {\n let result = await calculateCube(\"hey\")\n console.log(result)\n} catch (e) {\n console.log(e)\n} finally {\n console.log('Finally executed\")\n}<\/code><\/pre>\n
![\"The](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/11\/type-error-output-numeric.png\")