Erfassen und melden Sie JavaScript -Fehler mit window.onError

Kernpunkte

• window.onerror ist ein Browser -Ereignis, das ausgelöst wird, wenn ein unbekannter JavaScript -Fehler geworfen wird, der eine einfache Möglichkeit bietet, Clientfehler zu protokollieren und auf dem Server zu melden. Alle modernen Browser unterstützen diese Veranstaltung, die Implementierungsdetails variieren jedoch.
Das an
• übergebene Fehlerobjekt ist für das Debuggen sehr wertvoll, da es eine Fehlerstapelverfolgung enthält, die bei den Programmfehlern den Quellort für jeden Frame bietet. Das Stack-Attribut ist jedoch nicht standardmäßig und seine Implementierung ist in verschiedenen Browsern unterschiedlich. window.onerror
Während
• weit verbreitet ist, passieren nicht alle Browser Fehlerobjekte, was bedeutet, dass sie keine Stapelspureneigenschaften abrufen können. Diese Einschränkung kann gelöst werden, indem der Code in einen Try/Catch -Block umwickelt wird, um den Fehler und seine Stapeleigenschaften zu fangen. window.onerror
Nach dem Fehler des Fehlers besteht der letzte Schritt darin, die Fehlermeldung auf den Server zu übertragen. Dies erfordert ein Einrichten eines Berichtswebdienstes, der Fehlerdaten über HTTP empfängt, diese in einer Datei anmelden und/oder in einer Datenbank speichern. Wenn sich der Dienst in einer anderen Domäne befindet, muss die Cross-Domain-Ressourcenfreigabe (CORS) unterstützt werden.

Dieser Artikel wird in Zusammenarbeit mit Sentry erstellt. Vielen Dank, dass Sie die Partner unterstützt haben, die SitePoint ermöglicht haben.

ist ein spezielles Browser -Ereignis, das ausgelöst wird, wenn ein ungewöhnlicher JavaScript -Fehler geworfen wird. Dies ist eine der einfachsten Möglichkeiten, Clientfehler zu protokollieren und auf dem Server zu melden. Dies ist auch einer der Hauptmechanismen für Sentrys Client JavaScript Integration (Raven-JS) zur Arbeit. window.onerror

Hören Sie sich

Ereignisse an, indem Sie die Funktionen window.onerror zuweisen onerror

Wenn ein Fehler geworfen wird, werden die folgenden Parameter an die Funktion übergeben:

<code class="language-javascript">window.onerror = function (msg, url, lineNo, columnNo, error) {
  // ... 处理错误 ...

  return false;
}</code>

- Nachricht, die einem Fehler zugeordnet ist, z.
• msg - URL des Skripts oder Dokuments, das dem Fehler zugeordnet ist, wie z. B. "/dist/app.js"
• url - Zeilennummer (falls verfügbar)
• lineNo - Spaltennummer (falls verfügbar)
• columnNo - Fehlerobjekt, das diesem Fehler zugeordnet ist (falls verfügbar)
• error Die ersten vier Parameter geben Ihnen an, welches Skript, die Zeile und welche Spalte der Fehler auftritt. Der letzte Parameter, das Fehlerobjekt, ist vielleicht der wertvollste. Lassen Sie uns verstehen, warum.

Fehlerobjekt und Fehler. Stack

Auf den ersten Blick ist das Fehlerobjekt nicht speziell. Es enthält 3 normalisierte Eigenschaften: Nachricht, Dateiname und Leinenumber. Diese redundanten Werte wurden Ihnen über zur Verfügung gestellt.

Der wertvolle Teil ist ein nicht standardmäßiges Attribut

. Diese Stack -Eigenschaft gibt den Quellstandort jedes Programmrahmens mit, wenn ein Fehler auftritt. Fehlerstapelspuren können ein wichtiger Bestandteil des Debuggens sein. Obwohl diese Immobilie nicht standardmäßig ist, ist sie in jedem modernen Browser erhältlich. Folgendes ist ein Beispiel für Stapelattribute für das Fehlerobjekt in Chrome 46: Error.prototype.stack

Es ist schwer zu lesen, oder? Die Stack -Eigenschaft ist wirklich nur eine nicht formatierte Zeichenfolge.

<code class="language-javascript">window.onerror = function (msg, url, lineNo, columnNo, error) {
  // ... 处理错误 ...

  return false;
}</code>

Folgendes ist, wie es nach der Formatierung aussieht:

Nach der Formatierung ist leicht zu erkennen, wie die Stack -Eigenschaft von entscheidender Bedeutung ist, um Debug -Fehler zu unterstützen.

<code>"Error: foobar\n    at new bar (<anonymous>:241:11)\n    at foo (<anonymous>:245:5)\n    at <anonymous>:250:5\n    at <anonymous>:251:3\n    at <anonymous>:267:4\n    at callFunction (<anonymous>:229:33)\n    at <anonymous>:239:23\n    at <anonymous>:240:3\n    at Object.InjectedScript._evaluateOn (<anonymous>:875:140)\n    at Object.InjectedScript._evaluateAndWrap (<anonymous>:808:34)"
</anonymous></anonymous></anonymous></anonymous></anonymous></anonymous></anonymous></anonymous></anonymous></anonymous></code>

Es gibt nur ein Problem: Das Stapelattribut ist nicht standardmäßig, und seine Implementierung in verschiedenen Browsern ist ebenfalls unterschiedlich. Zum Beispiel ist das Folgende dieselbe Stapelverfolgung im Internet Explorer 11:

Das Format jedes Rahmens ist nicht nur unterschiedlich, sondern enthält auch weniger Details. Zum Beispiel erkennt Chrome, dass das neue Keyword verwendet wurde und ein tieferes Verständnis von Eval -Anrufen hat. Dies ist nur ein Vergleich zwischen IE 11 und Chrome - andere Browser haben ebenfalls unterschiedliche Formate und Details.

<code>Error: foobar
    at new bar (<anonymous>:241:11)
    at foo (<anonymous>:245:5)
    at callFunction (<anonymous>:229:33)
    at Object.InjectedScript._evaluateOn (<anonymous>:875:140)
    at Object.InjectedScript._evaluateAndWrap (<anonymous>:808:34)
</anonymous></anonymous></anonymous></anonymous></anonymous></code>

Zum Glück gibt es Werkzeuge, die die Stapelattribute so normalisieren können, dass sie über die Browser hinweg konsistent sind. Zum Beispiel verwendet Raven-Js Tracekit, um Fehlerzeichenfolgen zu normalisieren. Es gibt stacktrace.js und einige andere Projekte.

Browserkompatibilität

gibt es schon eine Weile im Browser - Sie finden es in älteren Browsern wie IE6 und Firefox 2.

Das Problem ist, dass jeder Browser auf unterschiedliche Weise window.onerror implementiert, insbesondere in Bezug auf die Anzahl der an den Onerror -Hörer gesendeten Parameter und die Struktur dieser Parameter.

Folgendes ist eine Parametertabelle, die in den meisten Browsern an OnError übergeben wurde: window.onerror

Die begrenzte Unterstützung für onerror im Internet Explorer 8, 9 und 10 ist möglicherweise nicht überraschend. Sie könnten jedoch überrascht sein, dass Safari erst Safari 10 (veröffentlicht im Jahr 2016) Unterstützung für Fehlerobjekte erhöhte. Darüber hinaus existieren noch Legacy Mobile -Geräte, die noch den Stock Android -Browser verwenden (jetzt ersetzt durch Chrome Mobile), und es wird kein Fehlerobjekt übergeben.

Wenn es kein Fehlerobjekt gibt, gibt es keine Stapel -Trace -Eigenschaft. Dies bedeutet, dass diese Browser wertvolle Stapelinformationen aus Fehlern, die von onerror erfasst wurden, nicht abrufen können.

Verwenden Sie Try/Catch, um Polyfill für das Fenster bereitzustellen. Aber es gibt eine Problemumgehung - Sie können den Code in der Anwendung in einem Versuch/Fangblock einpacken und die Fehler selbst fangen. Dieses Fehlerobjekt enthält das Stapelattribut, von dem wir in jedem modernen Browser träumen.

Betrachten Sie die folgende Helfermethode

, die eine Funktion auf einem Objekt unter Verwendung einer Reihe von Parametern aufruft:

invoke

Folgendes wird erneut aufgerufen

<code class="language-javascript">window.onerror = function (msg, url, lineNo, columnNo, error) {
  // ... 处理错误 ...

  return false;
}</code>

, diesmal in Try/Catch eingewickelt, um geworfene Fehler zu fangen:

invoke

Natürlich ist es sehr umständlich, dies manuell überall zu tun. Sie können es vereinfachen, indem Sie eine gemeinsame Funktion der Wrapper -Dienstprogramme erstellen:

<code>"Error: foobar\n    at new bar (<anonymous>:241:11)\n    at foo (<anonymous>:245:5)\n    at <anonymous>:250:5\n    at <anonymous>:251:3\n    at <anonymous>:267:4\n    at callFunction (<anonymous>:229:33)\n    at <anonymous>:239:23\n    at <anonymous>:240:3\n    at Object.InjectedScript._evaluateOn (<anonymous>:875:140)\n    at Object.InjectedScript._evaluateAndWrap (<anonymous>:808:34)"
</anonymous></anonymous></anonymous></anonymous></anonymous></anonymous></anonymous></anonymous></anonymous></anonymous></code>

Da JavaScript Single -Thread ist, müssen Sie nicht überall Wrapper verwenden - beginnen Sie einfach mit jedem neuen Stapel.

<code>Error: foobar
    at new bar (<anonymous>:241:11)
    at foo (<anonymous>:245:5)
    at callFunction (<anonymous>:229:33)
    at Object.InjectedScript._evaluateOn (<anonymous>:875:140)
    at Object.InjectedScript._evaluateAndWrap (<anonymous>:808:34)
</anonymous></anonymous></anonymous></anonymous></anonymous></code>

Dies bedeutet, dass Sie die Funktionserklärung einwickeln müssen:

zu Beginn der Anwendung (beispielsweise, wenn Sie JQuery in

)
• verwenden $(document).ready im Ereignishandler (z. B.
oder
• ) addEventListener $.fn.click Timer-basierte Rückrufe (z. B.
oder
• ) setTimeout requestAnimationFrame
Beispiel:

Wenn dies nach viel Arbeit aussieht, mach dir keine Sorgen! Die meisten Bibliotheken für Fehlerberichterstattung verfügen über Mechanismen, die integrierte Funktionen wie

<code>Error: foobar
   at bar (Unknown script code:2:5)
   at foo (Unknown script code:6:5)
   at Anonymous function (Unknown script code:11:5)
   at Anonymous function (Unknown script code:10:2)
   at Anonymous function (Unknown script code:1:73)</code>

und

verbessern. Sie müssen also nicht jedes Mal das Wrapper-Dienstprogramm selbst anrufen. Ja, Raven-Js macht dasselbe. addEventListener setTimeout

Übertragungsfehler auf Server

übertragen OK, Sie haben Ihren Job erledigt - Sie haben

eingefügt und die Funktion auch in einen Try/Catch -Block eingepackt, um so viele Fehlerinformationen wie möglich zu erfassen.

window.onerror Nur ein letzter Schritt bleibt übrig: Übertragen Sie die Fehlermeldung auf den Server. Um diese Arbeit zu machen, müssen Sie eine Art Berichtswebservice einrichten, der Ihre Fehlerdaten über HTTP erhalten, in einer Datei anmelden und/oder in einer Datenbank speichern.

Wenn sich dieser Webdienst in derselben Domain wie Ihre Webanwendung befindet, verwenden Sie einfach XMLHTTPREQUEST. Im folgenden Beispiel verwenden wir die AJAX -Funktion von JQuery, um Daten auf unseren Server zu übertragen:

Beachten Sie, dass Ihr Berichtsendpunkt, wenn Sie Fehler über verschiedene Quellen hinweg übertragen müssen, die Cross-Domain-Ressourcenfreigabe (CORS) unterstützen müssen.

<code class="language-javascript">function invoke(obj, method, args) {
    return obj[method].apply(this, args);
}

invoke(Math, 'max', [1, 2]); // 返回 2</code>

Zusammenfassung

Wenn Sie dies getan haben, haben Sie jetzt alle erforderlichen Tools, die Sie durch Ihre eigene grundlegende Fehlerberichterstattungsbibliothek scrollen und in Ihre Anwendung integrieren können:

Wie funktioniert
• window.onerror und seine unterstützten Browser
• So verwenden Sie Try/Catch, um window.onerror fehlende Stapelverfolgung
zu erfassen
• fehlerhafte Daten auf den Server
übertragen

Wenn Sie sich nicht um all das kümmern möchten, gibt es viele kommerzielle und Open -Source -Tools, die das gesamte hohe Heben von Kundenberichten für Sie ausführen können. (SHH: Möglicherweise möchten Sie versuchen, JavaScript zu debuggen.)

Das ist es! Glückliche Fehlerüberwachung.

FAQs (FAQ) zur Verwendung von window.onError, um JavaScript -Fehler zu erfassen und zu melden.

window.onerror

Wie funktionieren Funktionen in JavaScript?

window.onerror Das Ereignis in JavaScript ist ein globaler Ereignishandler, der bei der Ausführung eines JavaScript -Codes ausgelöst wird. Es ist ein leistungsstarkes Debugging- und Fehlerhandlingsinstrument, da es unbekannte Ausnahmen oder Laufzeitfehler auffangen und melden kann. Wenn ein Fehler auftritt, wird die Funktion window.onerror mit fünf Parametern aufgerufen: Fehlermeldung, URL, wobei der Fehler aufgetreten ist, Zeilennummer, Spaltennummer und Fehlerobjekt.

Was ist der Unterschied zwischen window.onerror und Try-Catch in JavaScript?

window.onerror und Try-Catch werden beide zur Fehlerbehandlung in JavaScript verwendet, funktionieren jedoch unterschiedlich. Mit der Anweisung für Try-Catch können Sie den Fehler direkt verarbeiten, indem Sie den Code einwickeln, der einen Fehler in einen Try-Block aufnimmt und dann auf den Fehler im Fangblock reagiert. Auf der anderen Seite ist window.onerror ein globaler Ereignishandler, der ausgelöst wird, wenn ein ungekordener Laufzeitfehler auftritt. Es ist ein allgemeinerer Fehlerbehebungsmechanismus, der Fehler auffängt, die aus dem Try-Catch-Block rutschen.

Wie kann ich window.onerror verwenden, um JavaScript -Fehler zu fangen?

Um window.onerror zu verwenden, müssen Sie eine Funktion definieren, die aufgerufen wird, wenn ein Fehler auftritt. Diese Funktion sollte fünf Parameter erfolgen: Fehlermeldung, URL, wobei der Fehler aufgetreten ist, Zeilennummer, Spaltennummer und Fehlerobjekt. In dieser Funktion können Sie bei Bedarf Fehler verarbeiten. Sie können beispielsweise Fehler bei der Konsole protokollieren, Berichte an den Server senden oder Nachrichten an Benutzer anzeigen.

window.onerror Können alle Arten von JavaScript -Fehlern erfasst werden?

Obwohl window.onerror ein leistungsstarkes Fehler zur Handhabung ist, hat es einige Einschränkungen. Es kann die ungewöhnlichsten Laufzeitfehler aufnehmen, können jedoch keine Ausnahmen erfassen, die in den Try-Catch-Block geworfen und gefangen sind. Darüber hinaus können bestimmte Arten von Fehlern wie Netzwerkfehler oder CORS -Fehler das window.onerror Ereignis nicht auslösen.

Wie verwendet ich ein Fehlerobjekt in window.onerror?

Das Fehlerobjekt

ist der fünfte Parameter, der an die window.onerror -Funktion übergeben wurde. Es enthält Informationen zu einem Fehler, der aufgetreten ist, einschließlich Fehlermeldungen, Fehlernamen und Stapelspuren. Sie können dieses Objekt verwenden, um detailliertere Informationen über den Fehler zu erhalten, der für die Debugging- oder Fehlerberichterstattung sehr nützlich ist.

Was ist die Stapelspur in JavaScript?

Stack Trace ist ein Bericht, der Informationen zum Programmausführungspfad enthält, wenn ein Fehler auftritt. Es zeigt die Abfolge von Funktionsaufrufen an, die den Fehler verursachen, der zum Debuggen sehr nützlich ist. In JavaScript erhalten Sie eine Stapelverfolgung von einem Fehlerobjekt.

Wie kann man Stapelspuren in JavaScript bekommen?

In JavaScript können Sie eine Stapelverfolgung von einem Fehlerobjekt abrufen. Wenn ein Fehler auftritt, wird ein Fehlerobjekt erstellt und an die window.onerror -Funktion übergeben. Dieses Objekt verfügt über eine Eigenschaft namens Stack, die die Stapelspur enthält. Sie können auf diese Immobilie zugreifen, um eine Stapelspur zu erhalten.

Kann ich window.onerror verwenden, um den Fehler dem Server zu melden?

Ja, Sie können window.onerror verwenden, um Fehler auf den Server zu melden. In Ihrer window.onerror -Funktion können Sie eine Anforderung mit einer Fehlermeldung an den Server senden. Dies ist sehr nützlich für die Überwachung und Debuggierung, da Sie Fehlerdaten von Benutzern in Echtzeit sammeln und analysieren können.

Wie verwendet ich window.onerror, um CORS -Fehler zu bewältigen?

CORS-Fehler oder Cross-Domain-Ressourcenfreigabefehler treten auf, wenn eine Webanwendung versucht, über eine andere Domäne auf Ressourcen zuzugreifen. Diese Fehler sind sicherheitsrelevant und aus Sicherheitsgründen werden dem Ereignishandler keine Einzelheiten zur Verfügung gestellt. Sie können diese Fehler jedoch behandeln, indem Sie einer bestimmten Netzwerkanforderung einen Fehlerhandler hinzufügen, der CORS -Fehler verursachen kann. window.onerror

Was sind einige Best Practices für die Verwendung von

? window.onerror

achten Sie bei der Verwendung von

unbedingt Fehler auf eine Weise, die die Benutzererfahrung nicht unterbricht. Sie sollten es vermeiden, technische Fehlermeldungen an Benutzer anzuzeigen. Zeigen Sie stattdessen eine freundliche Fehlermeldung an oder protodieren Sie stillschweigend einen Fehler. Achten Sie auch auf die Leistungseinflüsse des Fehlerbehandlungscode. Wenn Sie beispielsweise einen Fehlerbericht an den Server senden, stellen Sie sicher, dass dies asynchron tun, damit er den Haupt -Thread nicht blockiert. window.onerror

Das obige ist der detaillierte Inhalt vonErfassen und melden Sie JavaScript -Fehler mit window.onError. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!