Heim > Web-Frontend > js-Tutorial > Ein verstecktes Juwel im JavaScript-Debugging: error.cause

Ein verstecktes Juwel im JavaScript-Debugging: error.cause

DDD
Freigeben: 2025-01-12 16:45:47
Original
728 Leute haben es durchsucht

A Hidden Gem in JavaScript Debugging: error.cause

Die Herausforderungen des Debuggens

Was ist die größte Herausforderung beim Debuggen? Einer davon ist zweifellos das Aufspüren der Fehlerquelle.

Stellen Sie sich dieses Szenario vor:

const func = () => {
  doSth('A');
  doSth('B');
};
Nach dem Login kopieren
Nach dem Login kopieren

Wenn func einen Fehler auslöst, wie erkennen Sie, bei welchem ​​Schritt der Fehler aufgetreten ist? Wurde es durch doSth('A'), doSth('B') oder func selbst verursacht? Offensichtlich fehlt dem Fehler ausreichend Kontext.

Gemeinsame Lösungen

Ein gängiger Ansatz zur Lösung dieses Problems könnte wie folgt aussehen:

const func = () => {
  try {
    doSth('A');
  } catch (error) {
    throw new Error('An error from A', error);
  }
  try {
    doSth('B');
  } catch (error) {
    throw new Error('An error from B', error);
  }
};
Nach dem Login kopieren
Nach dem Login kopieren

Mit dieser Vorgehensweise können Sie die Fehlerquelle leichter lokalisieren. Diese Lösung weist jedoch mehrere Einschränkungen auf:

  1. Verlust von Fehlerdetails:

    Wenn der Fehler umfangreiche Informationen enthält (z. B. Payloads, HTTP-Statuscodes, Fehlercodes), fügt dieser Ansatz nur die Fehlermeldung von doSth zum neu erstellten Fehler hinzu. Andere wichtige Details, einschließlich des ursprünglichen Stack-Trace, gehen verloren.

  2. Verminderte Protokolllesbarkeit:

    Bei mehr als zwei potenziellen Fehlerpunkten können die Protokolle unübersichtlich und schwer zu interpretieren sein.

  3. Mehrdeutigkeit bei der Absichtserklärung:

    Der Code gibt nicht explizit an, dass der neue Fehler durch das Abfangen der spezifischen doSth-Funktion verursacht wird, was Raum für eine verbesserte Lesbarkeit des Codes lässt.

Wir stellen vor: error.cause

Um diese Probleme zu beheben, hat ECMAScript 2022 „error.cause“ eingeführt.

Mit dieser Funktion können Entwickler beim Erstellen eines neuen Fehlerobjekts die Grundursache eines Fehlers angeben. Durch die Verwendung von error.cause können Sie eine Fehlerkette erstellen und so das Debuggen und Nachverfolgen der Grundursache eines Problems erleichtern.

Hier ist ein einfaches Beispiel:

try {
  // Some operation that may throw an error
} catch (error) {
  throw new Error('Something went wrong', { cause: error });
}
Nach dem Login kopieren

Mit diesem Ansatz können Sie kausale Zusammenhänge zwischen Fehlern herstellen. Zum Beispiel:

const func = () => {
  try {
    doSth('A');
  } catch (error) {
    throw new Error('An error from A', { cause: error });
  }
  try {
    doSth('B');
  } catch (error) {
    throw new Error('An error from B', { cause: error });
  }
};
Nach dem Login kopieren

Dies ermöglicht es uns, Fehler abzufangen, die von Funktionen auf niedrigerer Ebene (z. B. doSth('A')) ausgelöst werden, und einen neuen Fehler auszulösen, der relevanten Kontext hinzufügt (z. B. „Beim Ausführen von doSth('A') ist ein Fehler aufgetreten.“ ) und behalten Sie die ursprünglichen Fehlerdetails bei (z. B. „A ist ein illegales Argument.“).

Aufbau einer Fehlerkette

Ein weiterer Vorteil von error.cause ist die Fähigkeit, eine Kette verknüpfter Fehler zu erstellen, sodass Entwickler Probleme über mehrere Ebenen der Anwendung hinweg zurückverfolgen können:

const func = () => {
  try {
    try {
      try {
        doSth('A');
      } catch (error) {
        throw new Error('Error at depth 3', { cause: error });
      }
    } catch (error) {
      throw new Error('Error at depth 2', { cause: error });
    }
  } catch (error) {
    throw new Error('Error at depth 1', { cause: error });
  }
};

console.log(error.cause.cause); // Error at depth 3
Nach dem Login kopieren

In Node.js werden Fehler mit einer Ursache speziell in der Konsole behandelt. Alle zugehörigen Fehlerstapel werden gedruckt:

const func = () => {
  doSth('A');
  doSth('B');
};
Nach dem Login kopieren
Nach dem Login kopieren

Abschluss

  • Das Debuggen wird erheblich einfacher, wenn Sie sofortigen Zugriff auf den Fehlerkontext und die Fehlerdetails haben.
  • Eine effektive Möglichkeit, dies zu erreichen, ist die Übernahme eines „Catch Rethrow with Context“-Musters mithilfe der Funktion „error.cause“:
const func = () => {
  try {
    doSth('A');
  } catch (error) {
    throw new Error('An error from A', error);
  }
  try {
    doSth('B');
  } catch (error) {
    throw new Error('An error from B', error);
  }
};
Nach dem Login kopieren
Nach dem Login kopieren

Dieser Ansatz verbessert nicht nur die Fehlerverfolgung, sondern verbessert auch die Lesbarkeit und Wartbarkeit Ihres Codes.


Wir sind Leapcell, Ihre erste Wahl für die Bereitstellung von Node.js-Projekten in der Cloud.

A Hidden Gem in JavaScript Debugging: error.cause

Leapcell ist die serverlose Plattform der nächsten Generation für Webhosting, Async-Aufgaben und Redis:

Mehrsprachige Unterstützung

  • Entwickeln Sie mit Node.js, Python, Go oder Rust.

Stellen Sie unbegrenzt viele Projekte kostenlos bereit

  • Zahlen Sie nur für die Nutzung – keine Anfragen, keine Gebühren.

Unschlagbare Kosteneffizienz

  • Pay-as-you-go ohne Leerlaufzeiten.
  • Beispiel: 25 $ unterstützt 6,94 Millionen Anfragen bei einer durchschnittlichen Antwortzeit von 60 ms.

Optimierte Entwicklererfahrung

  • Intuitive Benutzeroberfläche für mühelose Einrichtung.
  • Vollautomatische CI/CD-Pipelines und GitOps-Integration.
  • Echtzeitmetriken und Protokollierung für umsetzbare Erkenntnisse.

Mühelose Skalierbarkeit und hohe Leistung

  • Automatische Skalierung zur problemlosen Bewältigung hoher Parallelität.
  • Kein Betriebsaufwand – konzentrieren Sie sich nur auf das Bauen.

Erfahren Sie mehr in der Dokumentation!

A Hidden Gem in JavaScript Debugging: error.cause

Folgen Sie uns auf X: @LeapcellHQ


Lesen Sie auf unserem Blog

Das obige ist der detaillierte Inhalt vonEin verstecktes Juwel im JavaScript-Debugging: error.cause. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:dev.to
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage