Was zum Teufel bedeutet 'Skriptfehler'?-js-Tutorial-php.cn

What the Heck Does

Kernpunkte

Der Browser sendet eine "Skriptfehler" -Meldung an die Rückruffunktion onerror, wenn die JavaScript -Datei aus einer anderen Quelle stammt. Dies gilt aus Sicherheitsgründen, um ein versehentliches Auslaufen potenziell sensibler Informationen zu verhindern.
Um Einblicke in JavaScript-Fehler zu erhalten, die von Dateien aus verschiedenen Quellen bereitgestellt werden, müssen zwei Schritte unternommen werden: Hinzufügen von crossorigin="anonymous" -Skripteigenschaften und Hinzufügen von Cross-Domain-HTTP-Headern. Auf diese Weise kann jede Quelle die Datei abrufen und alle vom Skript ausgelösten Fehler werden an window.onerror gemeldet.
Wenn der HTTP -Header des Skripts nicht eingestellt werden kann, können Sie try/catch als Alternative verwenden. Wenn Sie einen Code von Drittanbietern in einen try/catch -Block einwickeln, können Sie Einblicke in die Fehler erhalten, die von Cross-Domain-Skripten geworfen werden. Wenn möglich, wird jedoch noch empfohlen, CORS -Eigenschaften und -Header einzustellen.

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

Wenn Sie das onerror -Ef Ereignis von JavaScript zuvor verwendet haben, haben Sie möglicherweise die folgende Situation begegnet:

Skriptfehler.

Wenn ein Fehler aus einer JavaScript -Datei aus einer anderen Quelle (unterschiedlicher Domänenname, Port oder Protokoll) stammt, sendet der Browser einen "Skriptfehler" an die Rückruffunktion onerror. Dies ist schmerzhaft, denn selbst wenn ein Fehler auftritt, wissen Sie nicht, woraus der Fehler ist und aus welchem Code der Fehler stammt. Und der gesamte Zweck von window.onerror besteht darin, Einblicke in unbekundige Fehler in der Anwendung zu erhalten.

Grund: Cross-Domain-Skripte

Um besser zu verstehen, was vor sich geht, betrachten Sie das folgende Beispiel -HTML -Dokument, vorausgesetzt, es stammt aus http://example.com/test:

<!DOCTYPE html>
<html>
<head>
  <title>example.com/test</title>
</head>
<body>
  <🎜>
  <🎜>
</body>
</html>

Nach dem Login kopieren

Dies ist der Inhalt von http://another-domain.com/app.js. Es deklariert eine einzelne Funktion namens foo, deren Anruf immer ReferenceError werfen wird.

// another-domain.com/app.js
function foo() {
  bar(); // ReferenceError: bar 不是函数
}

Nach dem Login kopieren

Wenn dieses Dokument geladen wird und JavaScript im Browser ausgeführt wird, wird Folgendes an die Konsole ausgegeben (über die window.onerror -Rallback -Funktion aufgezeichnet):

"Skriptfehler", ",", "", 0, 0, undefined

Dies ist kein JavaScript -Fehler - der Browser verbirgt die Skriptdateien aus Sicherheitsgründen absichtlich aus verschiedenen Quellen. Dies soll verhindern, dass das Skript versehentlich potenziell sensible Informationen in die onerror -Rallback -Funktion einbricht, die es nicht kontrollieren kann. Daher ermöglicht der Browser nur window.onerror, Einblick in Fehler zu erhalten, die aus derselben Domäne stammen. Wir wissen nur, dass ein Fehler aufgetreten ist - nichts anderes zu wissen!

Ich bin wirklich keine schlechte Person!

Obwohl der Browser in guten Absichten ist, möchten Sie tief in die Fehler eintauchen, die von Skripten aus verschiedenen Quellen geworfen werden, und es gibt einige sehr gute Gründe:

Ihre Anwendung JavaScript -Dateien stammen aus verschiedenen Hostnamen (z. B. static.sentry.io/app.js).
Sie verwenden Bibliotheken, die von einer Community -CDN wie CDNJS oder Google Hosting Library bereitgestellt werden.
Sie verwenden eine kommerzielle JavaScript-Bibliothek von Drittanbietern, die nur auf einem externen Server verfügbar ist.

Aber mach dir keine Sorgen! Ein tieferes Verständnis der von diesen Dateien bereitgestellten JavaScript -Fehler erfordert nur wenige einfache Änderungen.

Lösung: CORS -Eigenschaften und -Header

Um die von Skripten aus verschiedenen Quellen ausgelöste JavaScript -Ausnahme zu verstehen, müssen Sie zwei Dinge tun.

1. `crossorigin="anonymous"`

Dies teilt dem Browser mit, dass die Zieldatei "anonym" abgerufen werden sollte. Dies bedeutet, dass der Browser bei der Anforderung dieser Datei keine potenziellen benutzerdefinierenden Informationen an den Server wie Cookies oder HTTP-Anmeldeinformationen übermittelt.

<!DOCTYPE html>
<html>
<head>
  <title>example.com/test</title>
</head>
<body>
  <🎜>
  <🎜>
</body>
</html>

Nach dem Login kopieren

cors ist die Abkürzung für die Freigabe von Cross-Domänen-Ressourcen, und es handelt sich um eine Reihe von APIs (hauptsächlich HTTP-Headers), die angeben, wie Dateien heruntergeladen und über Domänen hinweg bedient werden.

// another-domain.com/app.js
function foo() {
  bar(); // ReferenceError: bar 不是函数
}

Nach dem Login kopieren

Durch Einstellen

gibt der Server dem Browser an, dass jede Quelle diese Datei erhalten kann. Alternativ können Sie es auf bekannte Quellen beschränken, die Sie kontrollieren:

<code>Access-Control-Allow-Origin: *</code> Sobald diese beiden Schritte abgeschlossen sind, werden alle durch dieses Skript ausgelösten Fehler in

gemeldet, genau wie jedes reguläre Skript mit gleichem Domänen. Daher ist das Beispiel

<🎜>

Nach dem Login kopieren

kein "Skriptfehler", sondern:

window.onerror onerror Das ist es! "Skript -Fehler" stört Sie und Ihr Team nicht mehr.

<code>Access-Control-Allow-Origin: *</code>

Nach dem Login kopieren

Alternative: Versuchen/fangen

Manchmal können wir den HTTP -Header der Skripte, die unsere Webanwendung verwendet, nicht anpassen. In diesem Fall gibt es eine Alternative: Verwenden Sie .

Betrachten Sie das ursprüngliche Beispiel erneut, diesmal mit try/catch:

try/catch für zukünftige Generationen,

erneut wie folgt:

$ curl --head https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.js | \
    grep -i "access-control-allow-origin"

Access-Control-Allow-Origin: *

Nach dem Login kopieren

some-domain.com/app.js Führen Sie das Beispiel aus, das HTML die folgenden zwei Einträge in die Konsole ausgibt:

<code>"ReferenceError: bar 未定义", "http://another-domain.com/app.js", 2, 1, [Object Error]</code>

Nach dem Login kopieren

Die erste Konsolenanweisung - aus

- wurde ein Fehlerobjekt mit dem Typ, der Nachricht und der Stapelverfolgung einschließlich des Dateinamens und der Zeilennummer geschafft. Die zweite Konsolenanweisung von

window.onerror = function (message, url, line, column, error) {
  console.log(message, url, line, column, error);
}

try {
  foo(); // 调用 app.js 中声明的函数
} catch (e) {
  console.log(e);
  throw e; // 故意重新抛出（由 window.onerror 捕获）
}

Nach dem Login kopieren

kann erneut "Skriptfehler" ausgeben.

try/catch Bedeutet dies jetzt, dass Sie versuchen müssen, den gesamten Code zu erfassen? Wahrscheinlich nicht. Wenn Sie HTML problemlos ändern und CORS -Header auf der CDN angeben können, ist es besser, dies zu tun und bei window.onerror zu bleiben.

, aber wenn Sie diese Ressourcen nicht kontrollieren, ist es eine zuverlässige (zwar mühsame) Art, den Code von Drittanbietern mithilfe von window.onerror zu wickeln, um ein tieferes Verständnis der Fehler zu erhalten, die von Cross-Domain-Skripten geworfen werden.

HINWEIS: Standardmäßig erkennt der JavaScript SDK Raven.js von Sentry integrierte Methoden sorgfältig, um zu versuchen, Ihren Code automatisch in einen try/catch -Block zu wickeln. Dies geschieht, um zu versuchen, Fehlermeldungen und Stapelspuren für alle Skripte zu erfassen, unabhängig davon, woher sie kommen. Wenn möglich, wird weiterhin empfohlen, CORS -Eigenschaften und -Header einzustellen.

Natürlich gibt es viele kommerzielle und Open -Source -Tools, die das ganze schwere Heben für Sie ausführen können. (SHH: Vielleicht möchten Sie versuchen, JavaScript mit Sentry zu debuggen.)

Das ist es! Glückliche Fehlerüberwachung.

Skriptfehler FAQ

(Der FAQ -Teil wird hier weggelassen, da der Artikel zu lang ist und eine schwache Korrelation mit dem Thema des Artikels aufweist, können Sie die FAQ selbst hinzufügen oder ändern)

Das obige ist der detaillierte Inhalt vonWas zum Teufel bedeutet 'Skriptfehler'?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!