Entwickeln Sie ein Javascript-Fehlerberichtstool

Vorwort

In der Frontend-Entwicklung ist die Fehlerberichterstattung ein häufiges und wichtiges Thema. Wenn ein Benutzer auf einen Fehler stößt, müssen wir die Fehlerinformationen sammeln und sie dem Server oder der Plattform eines Drittanbieters melden. Wenn keine Fehlermeldungen vorliegen, können wir das Problem nicht lokalisieren und keine zeitnahen Reparaturen durchführen.

In diesem Artikel wird erklärt, wie man ein JavaScript-basiertes Fehlerberichtstool entwickelt, damit wir Probleme während des Entwicklungsprozesses schnell erkennen und lösen können.

Schritt eins: Fehlerinformationen sammeln

Normalerweise gibt es zwei Arten von Front-End-Fehlern: JavaScript-Fehler und Ressourcenfehler. JavaScript-Fehler beziehen sich normalerweise auf Syntaxfehler oder Laufzeitfehler. Zu den Ressourcenfehlern gehören Ladefehler, Netzwerkanforderungsfehler usw.

1. JavaScript-Fehlersammlung

Um JavaScript-Fehler zu sammeln, müssen wir das Fehlerereignis an das Fensterobjekt binden und Fehlerinformationen sammeln. Das Fehlerereignis hat normalerweise drei Attribute: Nachricht, Dateiname und Zeilennummer:

window.onerror = function(message, source, lineno, colno, error) {
  console.log('Error:', message, source, lineno, colno, error);
  // 上报错误信息
}

Dieses Ereignis wird ausgelöst, wenn JavaScript auf einer Seite eine nicht abgefangene Ausnahme auslöst. In diesem Event-Handler können wir Informationen über die Fehlermeldung an die Konsole drucken und sie an den Server oder die Plattform eines Drittanbieters melden.

2. Sammlung von Ressourcenfehlern

Um Ressourcenfehler zu sammeln, müssen wir das Fehlerereignis an das Fensterobjekt binden und Ressourceninformationen sammeln. Wenn ein Ressourcenfehler auftritt, erhalten wir normalerweise ein Load Failed-Ereignis. Dieses Ereignis kann erfasst werden, indem das Fehlerereignis an das Fensterobjekt gebunden wird:

window.addEventListener('error', function(event) {
  var target = event.target || event.srcElement;
  console.log('Load error:', target.tagName, target.src, event.message);
  // 上报错误信息
}, true);

Dieser Ereignishandler wird ausgelöst, wenn eine Ressource auf der Seite nicht geladen werden kann. In diesem Event-Handler können wir Fehlerinformationen an die Konsole drucken und sie an den Server oder die Plattform eines Drittanbieters melden.

Schritt 2: Fehlerinformationen melden

Wenn wir Fehlerinformationen sammeln, besteht der nächste Schritt darin, diese an den Server oder die Plattform eines Drittanbieters zu melden. Wir können dies durch Ajax-Anfragen, Bildobjekte oder die Verwendung von Bibliotheken von Drittanbietern erreichen. In diesem Artikel verwenden wir dazu die Methode der Übermittlung von Ajax-Anfragen.

1. Ajax-Anfrageberichterstattung

Angenommen, wir verwenden die jQuery-Bibliothek, können wir den folgenden Code verwenden, um eine Berichtsanforderung an den Server zu senden:

$.ajax({
  url: '/api/report-error',
  method: 'POST',
  data: {
    message: message,
    source: source,
    lineno: lineno,
    colno: colno,
    error: error && error.stack
  }
});

Durch das Senden einer POST-Anfrage können wir Fehlerinformationen in der Form senden Daten an den Server. Im Hintergrund können wir diese Informationen erhalten, indem wir den Anforderungstext analysieren, um Fehler zu lokalisieren und zu beheben.

2. Bericht über Bildobjekte

Wenn wir keine Ajax-Anfragen oder die jQuery-Bibliothek verwenden möchten, können wir das Bildobjekt verwenden, um eine GET-Anfrage an den Server zu senden:

var img = new Image();
img.src = '/api/report-error?message=' + encodeURIComponent(message)
  + '&source=' + encodeURIComponent(source)
  + '&lineno=' + encodeURIComponent(lineno)
  + '&colno=' + encodeURIComponent(colno)
  + '&error=' + encodeURIComponent(error && error.stack);

Der Nachteil dieser Methode besteht darin, dass wir Sie müssen die Fehlermeldung in die Abfragezeichenfolge einfügen, was dazu führen kann, dass die URL zu lang ist.

3. Berichterstattung über Bibliotheken von Drittanbietern

Zusätzlich zur eigenen Entwicklung von Fehlerberichtstools können wir zur Erledigung dieser Aufgabe auch einige Bibliotheken von Drittanbietern nutzen. Zu den beliebtesten Fehlerberichtsbibliotheken gehören unter anderem:

• Sentry: ein Open-Source-Fehlerberichtsdienst, der Fehlergruppierung, Webschnittstelle, API und SDK sowie andere Funktionen bereitstellt;
• Bugsnag: eine Echtzeit-Fehlerüberwachung und Berichtstool, das Fehler automatisch erkennen und verschiedene Funktionen wie Fehlerverfolgung, Fehleranalyse usw. bereitstellen kann.
• Neues Relikt: ein Tool zur Überwachung der Anwendungsleistung, das Funktionen zur Fehlerberichterstattung, -analyse und -lokalisierung in Echtzeit bereitstellt.

Die Verwendungsmethoden dieser Bibliotheken sind ähnlich, wir müssen sie nur gemäß ihren Dokumentationsrichtlinien konfigurieren.

Schritt drei: Leistungsoptimierung

Nachdem wir die Entwicklung des Fehlerberichtstools abgeschlossen haben, müssen wir einige Leistungsoptimierungen durchführen, um sicherzustellen, dass das Tool weniger Auswirkungen auf die Leistung der Website hat.

1. Fehlerinformationen zusammenführen

Wenn auf der Seite mehrere JavaScript-Skripte vorhanden sind und in einem Skript ein Fehler auftritt, müssen wir die Fehlerinformationen an den Server melden. Wenn wir das Fehlerereignis in jedem Skript binden, werden wir mehrere Anfragen senden. Um die Anzahl der Anfragen zu reduzieren, können wir mehrere Fehlermeldungen zu einer Anfrage zusammenfassen und Buffer zum Zwischenspeichern verwenden.

2. Stichprobenberichte

Wenn der Seitenverkehr groß ist, kann die Menge der fälschlicherweise gemeldeten Daten sehr groß sein. Um eine übermäßige Belastung des Servers zu vermeiden, können wir einen Stichprobenberichtsmechanismus einführen und nur einen Teil der Fehlerinformationen melden. Beispielsweise können wir eine Fehlermelderate festlegen und Fehlerinformationen nur im Verhältnis zur Fehlermelderate an den Server senden.

3. Berichte basierend auf der Netzwerkumgebung

In einer Netzwerkumgebung mit niedriger Geschwindigkeit hat die Fehlerberichterstattung große Auswirkungen auf die Leistung und kann sogar zum Absturz der Seite führen. Um diese Situation zu vermeiden, können wir die Fehlermelderate automatisch an die aktuellen Netzwerkumgebungsbedingungen anpassen. Beispielsweise können wir die Fehlermelderate unter 4G auf 100 % (also alle melden) festlegen und unter 2G die Rate auf 20 % reduzieren.

Fazit

Die Entwicklung von JavaScript-Fehlerberichtstools ist für Front-End-Entwickler sehr wichtig. Es kann uns helfen, Probleme schnell zu lokalisieren und zu lösen und die Benutzererfahrung zu verbessern. In diesem Artikel erläutern wir Aspekte wie das Sammeln von Fehlerinformationen, das Melden von Fehlerinformationen und die Leistungsoptimierung. Ich hoffe, dieser Artikel hilft Ihnen!

Das obige ist der detaillierte Inhalt vonEntwickeln Sie ein Javascript-Fehlerberichtstool. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!