So erfassen und melden Sie JS-Fehler mithilfe von window.onerror_javascript-Kenntnissen-js-Tutorial-php.cn

So erfassen und melden Sie JS-Fehler mithilfe von window.onerror_javascript-Kenntnissen

WBOY

Freigeben： 2016-05-16 15:17:30

Original

2245 Leute haben es durchsucht

Vor zwei Tagen berichtete ein Benutzer von 2048 Game, dass er das Spiel nach dem Öffnen nicht spielen konnte. Es gab nur ein Spielfeld, die Zahlen konnten nicht initialisiert werden und sie konnten nicht verschoben werden und iOS 5.1. Ich habe versucht, Safari über WeChat zu öffnen, aber es hat immer noch nicht funktioniert. Da das Spiel viele HTML5-Funktionen verwendet, wird grob geschätzt, dass es sich um JS-Fehler handelt. Aber wie erfasst man solche Informationen? Natürlich ist es der legendäre window.onerror.

Hier finden Sie die Einführung in den Methodenkörper zu window.onerror von W3C:

Das bedeutet im Grunde, dass wir die window.onerror-Methode wie folgt schreiben können:

/** 
 * @param {String} errorMessage  错误信息 
 * @param {String} scriptURI   出错的文件 
 * @param {Long}  lineNumber   出错代码的行号 
 * @param {Long}  columnNumber  出错代码的列号 
 * @param {Object} errorObj    错误的详细信息，Anything 
 */
window.onerror = function(errorMessage, scriptURI, lineNumber,columnNumber,errorObj) { 
  // TODO 
}

Nach dem Login kopieren

Sie müssen jedoch bei der Verwendung auf Kompatibilitätsprobleme achten. Nicht alle Browser verfügen über alle Parameter in den Browserstandardentwürfen. Verwenden Sie daher einfach diese Parameter.

Sie können also eine kleine Demo schreiben, um es auszuprobieren:

<!DOCTYPE html> 
<html> 
<head> 
  <title>Js错误捕获</title> 
  <script type="text/javascript"> 
  /** 
   * @param {String} errorMessage  错误信息 
   * @param {String} scriptURI   出错的文件 
   * @param {Long}  lineNumber   出错代码的行号 
   * @param {Long}  columnNumber  出错代码的列号 
   * @param {Object} errorObj    错误的详细信息，Anything 
   */ 
  window.onerror = function(errorMessage, scriptURI, lineNumber,columnNumber,errorObj) { 
    console.log("错误信息：" , errorMessage); 
    console.log("出错文件：" , scriptURI); 
    console.log("出错行号：" , lineNumber); 
    console.log("出错列号：" , columnNumber); 
    console.log("错误详情：" , errorObj); 
  } 
  </script> 
</head> 
<body> 
  <script type="text/javascript" src="error.js"></script> 
</body> 
</html>

Nach dem Login kopieren

Für den Inhalt in der Datei error.js schreiben Sie einfach Folgendes:

throw new Error("Ein Fehler ist aufgetreten!");
Nachdem Sie den Browser ausgeführt haben, öffnen Sie die Konsole und sie sieht im Grunde so aus:

Diese Daten können also gemeldet werden.
Natürlich befindet sich die oben genannte error.js unter demselben Domänennamen wie die HTML-Seite. Was passiert, wenn sich error.js nicht unter derselben Domäne befindet? Ändern wir den Verweis auf error.js:

Öffnen Sie die Konsole erneut und wir sehen Folgendes:

Es entspricht der Methode window.onerror, die nur eine Fehlermeldung erfasst, und es handelt sich um eine feste Zeichenfolge, die keinen Referenzwert hat. Nachdem ich einige Informationen überprüft hatte (Webkit-Quellcode), stellte ich fest, dass dort, wo der Browser das Laden von Skriptressourcen implementiert, dieselbe Ursprungsrichtlinie gilt. Wenn es sich um eine nicht ursprüngliche Ressource handelt, wird die Fehlermeldung wie folgt geschrieben: Skriptfehler“:

Glücklicherweise verfügt das Skript-Tag über ein Crossorigin-Attribut, mit dem detailliertere Fehlerinformationen angezeigt werden können:

Aktualisieren Sie die Seite. Zu diesem Zeitpunkt sehen Sie die Ausgabe in der Konsole wie folgt:

Es ist nicht überraschend, dass dieser Fehler auftritt. Da error.js auf „Crossorigin“ eingestellt ist, muss der HTTP-Antwortheader von error.js auch so eingestellt sein, dass er von nicht ursprünglichen Quellen aus zugänglich ist. Um die Einstellung des Headers zu erleichtern, nehmen Sie eine kleine Änderung an error.js vor und benennen Sie es um: error-js.php.

<&#63;php 
  header('Access-Control-Allow-Origin:*'); 
  header('Content-type:text/javascript'); 
&#63;> 
throw new Error('出错了');

Nach dem Login kopieren

Aktualisieren Sie die Seite zu diesem Zeitpunkt und stellen Sie sicher, dass die Ausgabe in der Konsole normal ist und alle Informationen normal erfasst werden können:

Okay, die technische Detailanalyse ist vorbei! Die statischen Ressourcen meines 2048-Spiels werden in einer statischen Domäne (nicht derselben Quelle) platziert. Wenn ich also Fehlerinformationen über window.onerror erfassen möchte, muss ich gemäß der letzten Situation oben vorgehen:

1. Fügen Sie das Crossorigin-Attribut von script hinzu

2. Konfigurieren Sie den Server und setzen Sie die Antwort der statischen Ressource Javascript auf Access-Control-Allow-Origin