In diesem Artikel werden einige Ansätze zur Fehlerbehandlung bei der Arbeit mit der Fetch API vorgestellt. Mit der Fetch API können Sie eine Anfrage an eine Remote-Netzwerkressource senden. Wenn Sie einen Remote-Netzwerkaufruf ausführen, kann es auf Ihrer Webseite zu einer Vielzahl von Netzwerkfehlern kommen.
In den folgenden Abschnitten werden mögliche Fehler beschrieben und erläutert, wie Sie Code schreiben, der eine angemessene Funktionalität bietet und robust gegenüber Fehlern und unerwarteten Netzwerkbedingungen ist. Mit robustem Code sorgen Sie dafür, dass Ihre Nutzer zufrieden sind und Ihre Website störungsfrei funktioniert.
Potenzielle Netzwerkfehler antizipieren
In diesem Abschnitt wird ein Szenario beschrieben, in dem der Nutzer ein neues Video mit dem Namen "My Travels.mp4"
erstellt und dann versucht, das Video auf eine Video-Sharing-Website hochzuladen.
Bei der Arbeit mit Fetch ist es einfach, den Happy Path zu berücksichtigen, bei dem der Nutzer das Video erfolgreich hochlädt. Es gibt jedoch auch andere Pfade, die nicht so reibungslos verlaufen, aber für die Webentwickler planen müssen. Solche (unglücklichen) Pfade können aufgrund von Nutzerfehlern, unerwarteten Umgebungsbedingungen oder einem Fehler auf der Video-Sharing-Website auftreten.
Beispiele für Nutzerfehler
- Der Nutzer lädt eine Bilddatei (z. B. JPEG) anstelle einer Videodatei hoch.
- Der Nutzer beginnt mit dem Hochladen der falschen Videodatei. Dann gibt der Nutzer während des Uploads die richtige Videodatei für den Upload an.
- Der Nutzer klickt versehentlich auf „Upload abbrechen“, während das Video hochgeladen wird.
Beispiele für Umweltveränderungen
- Die Internetverbindung wird unterbrochen, während das Video hochgeladen wird.
- Der Browser wird während des Uploads des Videos neu gestartet.
- Die Server der Video-Sharing-Website werden während des Uploads des Videos neu gestartet.
Beispiele für Fehler auf der Website zum Teilen von Videos
- Die Website für die Videofreigabe kann keine Dateinamen mit Leerzeichen verarbeiten. Anstelle von
"My Travels.mp4"
wird ein Name wie"My_Travels.mp4"
oder"MyTravels.mp4"
erwartet. - Auf der Video-Sharing-Website kann kein Video hochgeladen werden, das die maximal zulässige Dateigröße überschreitet.
- Die Video-Sharing-Website unterstützt den Video-Codec im hochgeladenen Video nicht.
Diese Beispiele können und werden in der Praxis vorkommen. Möglicherweise sind Ihnen solche Beispiele schon einmal begegnet. Nehmen wir ein Beispiel aus jeder der vorherigen Kategorien und besprechen die folgenden Punkte:
- Was ist das Standardverhalten, wenn der Dienst zum Teilen von Videos das angegebene Beispiel nicht verarbeiten kann?
- Was erwartet der Nutzer im Beispiel?
- Wie können wir den Prozess verbessern?
Fehler mit der Fetch API behandeln
In den folgenden Codebeispielen wird await
auf oberster Ebene (Browserunterstützung) verwendet, da diese Funktion den Code vereinfachen kann.
Wenn die Fetch API Fehler anzeigt
In diesem Beispiel wird eine try
/catch
-Blockanweisung verwendet, um alle im try
-Block auftretenden Fehler abzufangen. Wenn die Fetch API beispielsweise die angegebene Ressource nicht abrufen kann, wird ein Fehler ausgegeben. Achten Sie bei einem solchen catch
-Block darauf, dass die Nutzerfreundlichkeit sinnvoll ist. Wenn dem Nutzer ein Fortschrittsbalken angezeigt wird, eine gängige Benutzeroberfläche, die eine Art Fortschritt darstellt, können Sie innerhalb eines catch
-Blocks die folgenden Aktionen ausführen:
- Entfernen Sie das Ladesymbol von der Seite.
- Geben Sie hilfreiche Informationen dazu an, was schiefgelaufen ist und welche Optionen der Nutzer hat.
- Je nach verfügbaren Optionen wird dem Nutzer die Schaltfläche „Noch einmal versuchen“ angezeigt.
- Senden Sie die Details des Fehlers im Hintergrund an Ihren Fehler-Tracking-Dienst oder an das Backend. Dadurch wird der Fehler protokolliert, damit er später diagnostiziert werden kann.
try {
const response = await fetch('https://website');
} catch (error) {
// TypeError: Failed to fetch
console.log('There was an error', error);
}
In einer späteren Phase, wenn Sie den aufgezeichneten Fehler diagnostizieren, können Sie einen Testfall schreiben, um einen solchen Fehler zu erkennen, bevor Ihre Nutzer bemerken, dass etwas nicht stimmt. Je nach Fehler kann es sich um einen Unit-, Integrations- oder Akzeptanztest handeln.
Wenn der Netzwerkstatuscode einen Fehler darstellt
In diesem Codebeispiel wird eine Anfrage an einen HTTP-Testdienst gesendet, der immer mit dem HTTP-Statuscode 429 Too Many Requests
antwortet. Interessanterweise erreicht die Antwort nicht den Block catch
. Ein Status 404 gibt unter anderem keinen Netzwerkfehler zurück, sondern wird normal verarbeitet.
Sie haben folgende Möglichkeiten, um zu prüfen, ob der HTTP-Statuscode erfolgreich war:
- Mit der Property
Response.ok
kannst du feststellen, ob der Statuscode im Bereich von200
bis299
lag. - Mit der Property
Response.status
können Sie feststellen, ob die Antwort erfolgreich war. - Verwende andere Metadaten wie
Response.headers
, um zu beurteilen, ob die Antwort erfolgreich war.
let response;
try {
response = await fetch('https://httpbin.org/status/429');
} catch (error) {
console.log('There was an error', error);
}
// Uses the 'optional chaining' operator
if (response?.ok) {
console.log('Use the response here!');
} else {
console.log(`HTTP Response Code: ${response?.status}`)
}
Am besten wenden Sie sich an Personen in Ihrem Unternehmen und Team, um mehr über mögliche HTTP-Antwortstatuscodes zu erfahren. Backend-Entwickler, Entwickler für den Betrieb und Servicetechniker können manchmal einzigartige Einblicke in mögliche Grenzfälle geben, die Sie möglicherweise nicht vorhersehen.
Wenn beim Parsen der Netzwerkantwort ein Fehler auftritt
Dieses Codebeispiel zeigt eine andere Art von Fehler, die beim Parsen eines Antworttexts auftreten kann. Die Response
-Oberfläche bietet praktische Methoden zum Parsen verschiedener Datentypen wie Text oder JSON. Im folgenden Code wird eine Netzwerkanfrage an einen HTTP-Testdienst gesendet, der einen HTML-String als Antworttext zurückgibt. Es wird jedoch versucht, den Antworttext als JSON zu parsen, was zu einem Fehler führt.
let json;
try {
const response = await fetch('https://httpbin.org/html');
json = await response.json();
} catch (error) {
if (error instanceof SyntaxError) {
// Unexpected token < in JSON
console.log('There was a SyntaxError', error);
} else {
console.log('There was an error', error);
}
}
if (json) {
console.log('Use the JSON here!', json);
}
Sie müssen Ihren Code so vorbereiten, dass er verschiedene Antwortformate verarbeiten kann, und prüfen, ob eine unerwartete Antwort die Webseite für den Nutzer nicht beeinträchtigt.
Angenommen, Sie haben eine Remote-Ressource, die eine gültige JSON-Antwort zurückgibt, die mit der Response.json()
-Methode erfolgreich geparst wird. Es kann vorkommen, dass der Dienst ausfällt. Wenn die Verbindung getrennt ist, wird 500 Internal Server Error
zurückgegeben. Wenn beim Parsen von JSON keine geeigneten Techniken zur Fehlerbehandlung verwendet werden, kann dies dazu führen, dass die Seite für den Nutzer nicht funktioniert, weil ein nicht behandelter Fehler auftritt.
Wenn die Netzwerkanfrage vor dem Abschluss abgebrochen werden muss
In diesem Codebeispiel wird ein AbortController
verwendet, um eine in Bearbeitung befindliche Anfrage abzubrechen. Eine laufende Anfrage ist eine Netzwerkanfrage, die gestartet, aber noch nicht abgeschlossen wurde.
Die Szenarien, in denen Sie eine in Bearbeitung befindliche Anfrage stornieren müssen, können variieren. Letztendlich hängt es von Ihrem Anwendungsfall und Ihrer Umgebung ab. Im folgenden Code wird gezeigt, wie eine AbortSignal
an die Fetch API übergeben wird. Die AbortSignal
ist mit einer AbortController
verknüpft und die AbortController
enthält eine abort()
-Methode, die dem Browser signalisiert, dass die Netzwerkanfrage abgebrochen werden soll.
const controller = new AbortController();
const signal = controller.signal;
// Cancel the fetch request in 500ms
setTimeout(() => controller.abort(), 500);
try {
const url = 'https://httpbin.org/delay/1';
const response = await fetch(url, { signal });
console.log(response);
} catch (error) {
// DOMException: The user aborted a request.
console.log('Error: ', error)
}
Fazit
Ein wichtiger Aspekt der Fehlerbehandlung besteht darin, die verschiedenen Teile zu definieren, die schiefgehen können. Achten Sie darauf, für jedes Szenario einen geeigneten Fallback für den Nutzer einzurichten. Stellen Sie sich bei einer Abrufanfrage Fragen wie:
- Was passiert, wenn der Zielserver ausfällt?
- Was passiert, wenn Fetch eine unerwartete Antwort erhält?
- Was passiert, wenn die Internetverbindung des Nutzers unterbrochen wird?
Je nach Komplexität Ihrer Webseite können Sie auch einen Flussdiagramm skizzieren, in dem die Funktionen und die Benutzeroberfläche für verschiedene Szenarien beschrieben werden.