Eine Idee zur Behandlung von JavaScript-Ausnahmen

Möglicherweise kann sich die Online-Ausführung von js aufgrund von Netzwerk-, Browser-, Cache- oder anderen Problemen von der Entwicklungsumgebung unterscheiden und es kann eine Ausnahme ausgelöst werden. js-Ausnahmen gehören im Grunde zur täglichen Routine für Front-End-Entwicklungsingenieure. Wie man es aufzeichnet und verwendet, aber nur wenige Leute achten darauf. Ich habe kürzlich über eine Idee nachgedacht, die im Wesentlichen zwei Schritte umfasst: Sammeln und Verwenden.

1. Sammlung

Es ist recht praktisch, Fehler zu sammeln, da es in jedem Browser eine Schnittstelle gibt: window.onerror:

window.onerror = function(errorMessage, scriptURL, lineNumber) {
　alert(errorMessage, scriptURL, lineNumber)
} Sogar Stack Trace wird bereitgestellt, zum Beispiel wird e.stack auch in try/catch bereitgestellt (jeder Browser ist anders, Sie können die eriwen verwenden /javascript-stacktrace-Kompatibilitätsbibliothek), versuchen Sie den folgenden Code:

try {
　fn()
} Catch(e) {
　alert(e.stack )
} Also Es ist bequemer, diese Fehler zu sammeln. Hierbei ist zu beachten, dass der erste Parameter des Rückrufs bei Verwendung von window.addEventListener('error', callback, isBubble) kein Ereignis, sondern ein Fehlerobjekt ist. In diesem Fall ist die Verwendung von window.onerror der Einfachheit halber eine gute Wahl, aber die durch den Punktoperator überwachten Ereignisse können überlastet sein, und dieses Überwachungsskript steht theoretisch an der Spitze aller js, sodass es als Risiko betrachtet werden muss.

2. Verwendung

Bisher wurde bei der Verwendung von Alipay der Online-JS-Fehlerbericht in eine E-Mail umgewandelt und an das Front-End-Entwicklungsteam gesendet, und jeder konnte das Problem selbst lösen . Tatsächlich ist dies eine gute Wahl, und sie löst auch das grundlegendste Problem: sofort reagieren und das Problem beheben. Aber es gibt auch ein Problem: Wie kann man denselben Fehler vermeiden? Meine ursprüngliche Idee ist folgende:

URL als Einheit verwenden, um Fehler auf derselben Seite aufzuzeichnen: um eine einheitliche Lösung zu ermöglichen
Zu den aufgezeichneten Fehlern gehören: Seiten-URL, Benutzeragent, Skript-URL, Fehlermeldung und Zeile Nummer
Nachdem jeder Fehler behoben wurde, können Sie die Lösung an einem Ort schreiben. Personen, die sie sehen, können sie kommentieren und Punkte hinzufügen. Sie werden schließlich als Wissensdatenbank archiviert, und es gibt praktische APIs, um den Inhalt dieser zu verwenden Wissensdatenbanken.
Wenn während der Entwicklung die gleiche Seite window.onerror auftritt, wird das Plug-in verwendet, um die Fehlermeldung zu analysieren, um den Typ zu identifizieren, sowie die Beurteilung der URL, um Entwickler an die von vorherigen gemachten Fehler zu erinnern Entwickler
Entwickler können die Wissensdatenbank abonnieren. Fügen Sie bestimmte Tags hinzu, um automatisch E-Mails zu erhalten (natürlich können Sie auch einen besseren Abgleich basierend auf Dateikommentaren, Zuordnung usw. durchführen)
Warum machen Sie das? Hauptsächlich zur Lösung der folgenden Probleme:

Bilden Sie eine Wissensdatenbank, aus der Entwickler, insbesondere Neulinge, lernen können.
Tools sorgen für eine Verbesserung der Effizienz und vermeiden wiederholte Fehler und wiederholte Lösungen.
Abonnieren, um Benachrichtigungsaktualisierungen sicherzustellen. Gezielt
3. Hinweise

1. Verwenden Sie POST zum Senden beim Sammeln

Manchmal kann die Fehlermeldung länger sein und die URL-Länge des Browsers ist begrenzt Sie können erwägen, GET zum Senden zu verwenden, aber im Allgemeinen kann POST alle Daten im Hintergrund senden.

　2. Wann Daten gesendet werden sollen

　 Es wird empfohlen, Daten zu senden, wenn ein Fehler ausgelöst wird. Als ich zum ersten Mal auf diese Idee kam, habe ich versucht, sie während onbeforeonload zu senden, aber die POST-Anfrage wurde vom Browser unterbrochen, bevor sie geöffnet wurde.

　3. Welcher Index ist besser in der Datenbank zu speichern?

Im Allgemeinen ist die URL für die meisten Websites möglicherweise besser geeignet. Allerdings müssen Websites mit vielen UGC-Inhalten wie Baixing.com und Taobao möglicherweise geändert werden, um die URL aufzuzeichnen. Schließlich haben unterschiedliche Beiträge und unterschiedliche URLs alle die gleichen Codes.

Wie wäre es mit der Verwendung von Error als Index? Egal welche Art, wählen Sie nach Ihren eigenen Bedürfnissen.

　4. Ob alle Fehler aufgezeichnet werden sollen

　Dies ist je nach Bedarf auch angemessener. Auf Baidu.com gibt es alle möglichen unübersichtlichen Fehlerberichte, die möglicherweise von externen Links zu Baidu/Google stammen.

4. Fazit

Derzeit wurden zunächst ein Erfassungstool (sofish/stacktrace.js) und eine Speichermethode (mit URL als Index) implementiert. Ob nun fortgefahren werden soll oder nicht, wird Zeit erfordern und weitere Überlegungen. Versenden Sie es zunächst und nutzen Sie es als Ausgangspunkt.

　5. Anhang
$url = new Url();
$page = $url->post('page');
if(!$page ) return;
class ErrorTrace erweitert MongoData {
// Nicht in MongoData gefunden, Differenz
öffentliche Funktion findOne($obj) {
return $this->connection->findOne($obj ) ;
　}
};
$store = new ErrorTrace();
$fields = array(
　'url' => $url->post('url') ,
'message' => $url->post('message'),
'line' => $url->post('line'),
'ua' = > ; $url->post('ua'),
);
$index = array('page' => $page);
$hash = md5(json_encode($fields) ) ;
//Erfassen Sie einen Fehler nicht wiederholt, alle Fehler werden unter derselben URL aufgezeichnet
if($field = $store->findOne($index)) {
　if(isset($ field[ $hash])) return;
return $store->setAttr(new Query('page', $page), $hash, $fields);
}
$store-> page = $page;
$store->$hash = $fields;
$store->save();
?> Dieser Gist wurde Ihnen von GitHub präsentiert.