Was ist Frontend -Protokollierung und Überwachung

Das Front-End benötigt Protokolle und Überwachung, da seine Betriebsumgebung komplex und wechselhaft ist und es schwierig ist, Probleme zu reproduzieren. Die Protokolle können schnell Probleme finden und die Erfahrung optimieren. 1. Die gemeinsamen Protokolltypen umfassen Fehlerprotokolle (JS -Fehlerbericht, Ausfall des Ressourcenladens), Verhaltensprotokolle (Benutzeroperationspfad), Leistungsprotokolle (Ladezeit, FP, FCP) und benutzerdefinierte Protokolle (Geschäftspunkt). 2. Die Schritte zur Implementierung der Front-End-Überwachung umfassen das Fangen von Ausnahmen, das Sammeln von Leistungsdaten, die Berichterstattungsprotokolle, das zentralisierte Management und die Anzeige. 3. In dem tatsächlichen Gebrauch müssen Sie aufmerksam machen, um eine Übersammlung, den Schutz des Datenschutzes, die falsche De-Aggregation und die Kombination von Sourcemap zu vermeiden, um Stapelinformationen zu analysieren, um Probleme genau zu lokalisieren.

Front-End-Protokolle und Überwachung sollen einfach die Verhaltensdaten der Benutzer bei der Verwendung von Webseiten oder Anwendungen aufzeichnen und den Front-End-Status in Echtzeit beobachten, um Entwicklern dabei zu helfen, schnell Probleme zu entdecken und ihre Erfahrungen zu optimieren. Es konzentriert sich nicht auf den Server wie das Backend, sondern sieht sich der sich ständig ändernden Kundenumgebung gegenüber und erfordert sorgfältigere Strategien.

Warum braucht das Front-End-Protokoll und die Überwachung?

Das Front-End läuft im Browser des Benutzers, und die Umgebung ist komplex und veränderlich: verschiedene Geräte, Netzwerkbedingungen, Browserversionen und sogar Benutzerbetriebsgewohnheiten können Probleme verursachen. Viele Fehler treten nur in bestimmten Szenarien auf und sind schwer zu reproduzieren. Zu diesem Zeitpunkt können Sie durch das Log Collection and Überwachungssystem "was schief gelaufen" wissen, wer auf das Problem gestoßen ist "und" Wann ist es so schnell wie möglich passiert? "

Zum Beispiel häufige Probleme wie der weiße Bildschirm auf der Seite, keine Antwort auf Schaltflächenklicks und keine Schnittstellenanforderungen. Wenn Sie es nicht überwachen, können Sie sich nur auf das Feedback der Benutzer verlassen, was ineffizient und leicht zu übersehen ist. Mit der Front-End-Überwachung können diese Probleme im Hintergrund automatisch aufgezeichnet und alarmiert werden, was die Inspektionseffizienz erheblich verbessert.

Was sind die gängigen Protokolltypen?

1. Fehlerprotokolle
   Einbeziehung von JavaScript -Fehlern (z. B. ungewöhnliche Ausnahme), Ausfall des Ressourcenladens (404, Timeout), vielversprechende Ausnahme usw. Diese Informationen können Ihnen sagen, ob der Code normalerweise auf der Benutzerseite ausgeführt wird.

2. Benutzerverhaltensprotokolle
   Notieren Sie den Betriebspfad des Benutzers, z. B. auf welche Schaltfläche geklickt wurde, auf welche Seiten besucht wurden, und der Aufenthaltszeit usw. Dies ist hilfreich für die Produktanalyse und die Benutzererfahrungsoptimierung.

3. Leistungsprotokolle
   Zum Beispiel die erste Bildschirmladezeit, die Ressourcenladezeit, FP (erste Farbe), FCP (erste inhaltliche Farbe) und andere Indikatoren. Hilft, die Gründe für das Stottern der Seite zu entdecken.

4. Benutzerdefinierte Protokolle
   Entwickler begraben aktiv Punkte nach den Geschäftsbedürfnissen, z. B. wie oft eine bestimmte Funktion aufgerufen wurde, unabhängig davon, ob der Benutzer einen bestimmten Prozess abgeschlossen hat usw.

Wie implementieren Sie Front-End-Überwachung?

Die Implementierung der Front-End-Überwachung enthält normalerweise die folgenden Schritte:

• Ausnahme aufnehmen
  Verwenden Sie window.onerror , window.onunhandledrejection , console.error usw., um auf globale Fehler zu hören.

• Erwerb von Leistungsdaten
  Verwenden Sie performance.timing oder PerformanceObserver um die Zeit für jede Phase des Ladens zu erhalten.

• Berichtsprotokoll
  Im Allgemeinen werden Protokolle über fetch oder Beacon API an den Server gesendet und achten Sie darauf, dass die Seitenleistung nicht beeinflusst.

• Zentrales Management und Display
  Sie können auf Drittanbieter-Tools wie Sentry, Datadog, New Relic oder Ihre eigene Protokollierungsplattform (Elch, Prometheus Grafana usw.) zugreifen.

Ein kleines Detail ist, dass es am besten ist, eine eindeutige Kennung (z. B. Sitzungs -ID oder Trace -ID) bei der Meldung des Protokolls mitzunehmen, damit ein Benutzer den vollständigen Vorgang verfolgen kann, wenn sie die Seite auf einen Fehler eingeben.

Was soll ich im tatsächlichen Gebrauch achten?

1. Nicht übersammeln
   Zu detaillierte Protokolle belegen eine Bandbreite und können auch zu Datenschutzproblemen führen. Es wird empfohlen, die Stichprobenrate festzulegen, z. B. nur 10% der Benutzerprotokolle.

2. Betrachten Sie die Privatsphäre Compliance
   Notieren Sie keine sensiblen Informationen wie Kennwörter, Mobiltelefonnummern, Adressen usw. Wenn dies für Benutzer in Übersee der Fall ist, muss es auch den GDPR-, CCPA- und anderen Vorschriften entsprechen.

3. Fehlerdingung und Aggregation
   Der gleiche Fehler kann wiederholt gemeldet werden, und auf der Serverseite sollte eine Aggregation durchgeführt werden, um zu vermeiden, dass der Bildschirm überflutet wird.

4. Kombiniert mit Sourcemap, um den Stack
   zu analysieren Nachdem der Front-End-Code komprimiert wurde, kann die Zeilennummer und der Funktionsname in der Fehlermeldung ungenau sein. Mit der Quell -Karte kann der Fehler für die einfache Positionierung in den ursprünglichen Codespeicherort wiederhergestellt werden.

Grundsätzlich ist das. Die Protokollierung und Überwachung von Front-End scheinen nicht kompliziert zu sein, aber es ist einfach, Details in tatsächlichen Projekten zu ignorieren, was zu unzureichenden Informationen oder übermäßiger Redundanz führt. Nur durch rationales Entwerfen der Sammlungsstrategie kann sie ihren Wert wirklich ausüben.

Das obige ist der detaillierte Inhalt vonWas ist Frontend -Protokollierung und Überwachung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!