Redux -Protokollierung in der Produktion mit Leiter

Logrocket: Ihre Webanwendung DVR, die Redux -Anwendungsdebugging

hilft,

logrocket ist ein revolutionäres Entwickler -Tool wie die DVR einer Webanwendung, die jedes Ereignis aufzeichnet, das auf einer Website stattfindet. Es zeichnet Redux-Aktionen und Status, Konsolenprotokolle, JavaScript-Fehler, Stapelspuren, Netzwerkanforderungen/Antworten, Browser-Metadaten und benutzerdefinierte Protokolle und reproduziert präzise Videos auf Pixelebene selbst der komplexesten einseitigen Anwendungen auf.

Es ist schwierig, Probleme in Webanwendungen zu verstehen. Von mysteriösen JavaScript -Fehlern, von den von den Benutzern gemeldeten Fehler bis hin zu Problemen in der QA haben Entwickler hart daran gearbeitet, Probleme zu lösen, die die Benutzer betreffen. Und das sind nur offensichtliche Probleme - die meisten Fehler werden nie tatsächlich gemeldet, weil Benutzer, die auf schlechte Erfahrungen stoßen, einfach abreisen oder stillschweigend ertragen.

Um dieses Problem zu lösen, übernehmen Entwickler zunehmend Front-End-Protokollierungstools, da moderne staatliche Managementbibliotheken wie Redux einen reichhaltigen Prüfungsweg verlassen. Das Aufzeichnen von Aktionen und den Status in Produktionsumgebungen erleichtert das Verständnis von Fehler und vom Benutzer gemeldeten Problemen.

In diesem Artikel wird angezeigt, wie Sie die Redux -Protokollierung mithilfe von Logrocket einrichten und dann Techniken diskutieren, um Redux -Anwendungen zu erleichtern.

Dieser Artikel wurde ursprünglich auf lorrocket.com veröffentlicht und hier mit Erlaubnis des Autors reproduziert.

Leiter: DVR für Webanwendungen

Logrocket ist eine neue Art von Entwickler -Tool. Es ist wie ein DVR für eine Webanwendung, die alles aufzeichnet, was tatsächlich auf einer Website passiert. Es funktioniert perfekt bei jeder Anwendung, unabhängig davon, welches Framework es verwendet wird, und bietet Plugins, die einen zusätzlichen Kontext von React, Redux, Vue.js und Angular aufzeichnen können. Mit Logrocket können Sie Sitzungen mit Fehler oder Benutzerproblemen wiederholen, um die Grundursache schnell zu verstehen, ohne zu erraten, warum das Problem auftritt.

Zusätzlich zur Protokollierung von Redux -Aktionen und zum Status zeichnet Logrocket auch Konsolenprotokolle, JavaScript -Fehler, Stapelspuren, Netzwerkanforderungen/Antworten mit Header und Körper, Browser -Metadaten und benutzerdefinierten Protokollen auf. Es erkennt auch das DOM, um HTML und CSS auf der Seite aufzuzeichnen und präzise Videos auf Pixelebene selbst der komplexesten einseitigen Anwendungen zu reproduzieren.

Logrocket

setzen

Logrocket einrichten ist einfach. Sie müssen Ihrer App nur ein paar Codezeilen hinzufügen:

mit NPM installieren:
1. . npm i --save logrocket
Erstellen Sie ein kostenloses Konto unter https://app.logrocket.com und beachten Sie Ihre Anwendungs ​​-ID.
Logrocket in Ihrer App initialisieren:

import LogRocket from 'logrocket';
// 使用您的应用ID初始化LogRocket
LogRocket.init('<your_application_id>');

Redux Middleware hinzufügen:

import { applyMiddleware, createStore } from 'redux';
const store = createStore(
  reducer, // 您的应用reducer
  applyMiddleware(middlewares, LogRocket.reduxMiddleware()),
);

Dies ist das grundlegende Setup - hier ist alles, was Sie benötigen, um Logrocket zu verwenden!

Logrocket bietet auch Plugins für andere Flussimplementierungen wie NGRX und VUEX, über die Sie hier lesen können.

Benutzersitzung

replay

Eine Sitzung in Logrocket wiederholen, ist, als würde sie in Ihrem eigenen Browser geschehen. Sie können Redux -Aktionen überprüfen, einschließlich der vollständigen Aktionsnutzlast sowie der vorherigen und nächsten Status.

Logrocket erfasst Netzwerkanfragen und Antworten und ermöglicht es Ihnen, sich in bestimmte Anfragen zu befassen und Header und Körper anzuzeigen. In der Wasserfallkarte werden das Timing angezeigt, sodass Sie leicht feststellen können, welche Anfragen langsam sind oder ob potenzielle Rennbedingungen aufgetreten sind.

Manchmal reichen Redux-Protokolle allein nicht aus, um Fehler zu verstehen, insbesondere wenn sie mit vom Benutzer gemeldeten Problemen zu tun haben. Die Video -Wiedergabe von Logrocket hilft, indem Sie genau sehen, was Benutzer in Ihrer App sehen.

Da dieses Video tatsächlich ein Umbau des DOM ist (und nicht ein echtes Video), können Sie HTML/CSS auf visuelle Fehler überprüfen oder mit 2x -Geschwindigkeit abspielen, um schnell zu verstehen, wie Benutzer dies in der App tun Probleme, was passiert ist.

Integrieren Sie Redux -Anmeldung in Ihren Workflow

Die Fähigkeit, Benutzersitzungen wiederzugeben und Redux -Protokolle anzusehen, ist im gesamten Entwicklungsworkflow sehr nützlich.

Fehler fix

logrocket integriert sich in Fehlerberichterstattungstools wie Sentry und Bugsnag, sodass Sie Redux -Protokolle und -Videos für jeden Fehler anzeigen können. Dies hilft nicht nur, Fehler zu beheben, sondern auch die Auswirkungen des Fehlers zu verstehen, da einige JavaScript -Fehler völlig irrelevant sind. Wenn Sie sich das Video ansehen, wenn der Fehler auftritt, können Sie leicht feststellen, ob es tatsächlich den Benutzer beeinflusst oder ignoriert werden kann.

Support

Benutzer melden häufig Probleme, bieten jedoch nicht genügend Kontext, um genau zu verstehen, was vor sich geht.

Wenn Sie ein Chat -Support -Tool wie Intercom verwenden, können Sie Logrocket direkt integrieren, um Kommentare mit aufgezeichneten URLs hinzuzufügen, wenn Benutzer beginnen.

Wenn Sie in ein allgemeineres Analysetool integrieren, können Sie eine Aufzeichnungs -URL mit der folgenden Tracking -API hinzufügen:

import LogRocket from 'logrocket';
// 使用您的应用ID初始化LogRocket
LogRocket.init('<your_application_id>');

Nutzen Sie die Redux -Protokollierung in Produktionsumgebungen

voll aus.

Die Protokollierung der Produktionsumgebung ist in allen Redux -Anwendungen sofort nützlich. Wenn Sie jedoch Ihre Anwendung unter Berücksichtigung der Protokollierung erstellen, können Sie sicherstellen, dass die Protokollierung bei Debugging -Problemen am nützlichsten ist.

Versuchen Sie, den größten Teil des Staates in Redux zu retten

Ich möchte hier nicht das Argument zwischen dem örtlichen Staat und dem Redux -Staat diskutieren, aber wenn Sie entscheiden, ob ein bestimmter staatlicher Teil in Redux sein sollte, fragen Sie sich, ob es hilft, diesen Staat beim Debuggen der Frage zu sehen. Wenn die Antwort ja lautet, sollten Sie diesen Status in Redux einbringen, damit er zusammen mit Crash -Berichten und Benutzerproblemen protokolliert wird.

Verwenden Sie die Datenerfassungsbibliothek mit Redux

Bibliotheken wie Apollo-Client (für GraphQL) und Redux-Query (für Ruhe) erleichtern alle Daten, die das Netzwerk durch Redux abrufen. Sie verwenden Redux als Persistenzschicht, was bedeutet, dass Sie beim Debuggen des Problems die Redux -Protokolle überprüfen können, um zu sehen, welche Daten diese Clients abgerufen haben.

Wenn Sie einen einfacheren Ansatz bevorzugen, können Sie Ihre eigenen Daten schreiben, um das "Framework" zu erhalten, indem Sie einfach explizite Aktionen beim Abfragen und Empfangen von Daten aus dem Netzwerk planen.

Verwenden von Redux, um Unsicherheitsquellen zu bewältigen

Wenn Sie auf Daten von APIs wie WebSockets, lokalem Speicher, indexedDB und sogar Datum () zugreifen, sollten Sie Redux -Aktionen in Betracht ziehen, die Ergebnisse enthalten, damit Sie diese Daten in Zukunft problemlos debuggen können. Planen Sie beispielsweise beim Anhören eines Websocket eine Redux -Aktion für jede Nachricht, damit Sie die Daten im Redux -Protokoll sehen können.

Verwenden Sie andere Konsolen -APIs

Konsolenmethoden wie console.time (), console.count () und console.group () ermöglichen es Ihnen, den Protokollen umfangreiche Daten hinzuzufügen, z.

Quellkarte erstellen und laden Sie in Logrocket

hoch.

logrocket unterstützt die Quellzuordnung, die Sie über CLI hochladen können. Auf diese Weise können Sie JavaScript -Fehler, Redux -Aktionen, Konsolenprotokolle und symbolisierte Stapelspuren für Netzwerkanforderungen sehen, mit denen Sie feststellen können, wo bestimmte Aktionen in Ihrem Code ausgelöst werden.

Schlussfolgerung

React und Redux werden häufig als Werkzeuge zum Erstellen von -Auswart Anwendungen gefeiert - eine der wichtigen Komponenten ist Debugierbarkeit

. Das Aufzeichnen von Redux-Daten in einer Produktionsumgebung kann solche Erkenntnisse liefern, da Fehler und andere vom Benutzer gemeldete Probleme durch Überprüfung des Redux-Status, Netzwerkanforderungen und DOM einfach debuggen werden können.

Redux -Protokollierung mit Logrocket kann die Arbeit des Behebungsfehlers und der Unterstützung von Benutzern erheblich vereinfachen. Hier können Sie Logrocket verwenden.

FAQs (FAQs) auf Redux -Protokollierung in Produktionsumgebungen mit Logrocket

Was sind die Hauptfunktionen von Logrocket in der Redux -Protokollierung?

logrocket ist ein leistungsstarkes Tool, mit dem Entwickler Benutzerinteraktionen in ihren Webanwendungen verfolgen, aufzeichnen und verstehen können. Es bietet eine umfassende Übersicht darüber, was in der Anwendung passiert, einschließlich Netzwerkanforderungen, Konsolenprotokolle und sogar Benutzeraktionen. Dies erleichtert es, Probleme zu identifizieren und zu beheben, da Entwickler genau sehen können, was das Problem verursacht. Logrocket ist besonders in Redux -Anwendungen nützlich, da sie Redux -Aktionen und -zustände protokollieren und so Ereignissequenzen deutlich angezeigt werden.

Wie unterscheidet sich die Logrocket von anderen Protokollierungswerkzeugen?

Logrocket sticht für seine Sitzungs -Wiederholungsfunktion auf. Mit dieser Funktion können Entwickler problematische Sitzungen wiederholen und genau sehen, was Benutzer sehen. Dies kann von unschätzbarem Wert sein, um Fehler zu identifizieren und zu beheben. Darüber hinaus integriert Logrocket nahtlos in Redux, so dass es einfach ist, Redux -Aktionen und Status zu protokollieren.

Wie integriere ich Logrocket in meine Redux -Anwendung?

Logrocket in Redux -Anwendungen integrieren ist sehr einfach. Nach dem Installieren von Lehnstöbern über NPM können Sie diese in der Eintragsdatei der Anwendung initialisieren. Sie können dann die Redux Middleware von Logrocket verwenden, um Redux -Aktionen und Status zu protokollieren. Diese Middleware kann beim Erstellen von Redux -Speicher hinzugefügt werden.

Kann ich Logrocket in einer Produktionsumgebung verwenden?

Ja, Logrocket ist für die Verwendung in Produktionsumgebungen ausgelegt. Es verfügt über eine Vielzahl von Funktionen, die es für den Produktionsgebrauch geeignet machen, z. B. Datenschutzsteuerungen, die sensible Benutzerdaten und Leistungsoptimierungen schützen, die sicherstellen, dass Anwendungen nicht verlangsamen.

Welche Datenarten können Logrocket -Aufzeichnung?

logrocket kann eine Vielzahl von Daten aufzeichnen, einschließlich Netzwerkanforderungen, Konsolenprotokolle, Redux -Aktionen und Status und Benutzerinteraktion. Dies bietet einen umfassenden Überblick darüber, was in der Anwendung passiert, und erleichtert die Identifizierung und Behebung von Problemen.

Wie handelt es sich um sensible Benutzerdaten?

logrocket verfügt über leistungsstarke Datenschutzkontrollen, die sensible Benutzerdaten schützen können. Sie können diese Steuerelemente konfigurieren, um zu verhindern, dass bestimmte Daten aufgezeichnet werden. Sie können beispielsweise die Protokollierungsformulareingabe zum Schutz der Benutzerkennwörter verhindern.

Kann ich Logrocket mit anderen staatlichen Verwaltungsbibliotheken verwenden?

Ja, während Logrocket nahtlos in Redux integriert wird, kann es auch mit anderen staatlichen Verwaltungsbibliotheken verwendet werden. Es bietet Middleware für mehrere beliebte Bibliotheken, darunter MOBX und VUEX.

Wie hilft Logrocket Debugg?

Die Sitzungs -Replay -Funktion von

Logrocket kann beim Debuggen sehr wertvoll sein. Durch die Wiederholung der problematischen Sitzung können Entwickler genau anzeigen, was Benutzer sehen und die Identifizierung und Behebung von Fehler erleichtern. Darüber hinaus können die umfassende Protokollierung von Netzwerkanforderungen, Konsolenprotokollen und Benutzerinteraktionen beim Debuggen einen wertvollen Kontext liefern.

Kann ich die von Logrocket aufgezeichneten Daten anpassen?

Ja, Leiter ist sehr anpassbar. Sie können die zu protokollierten Daten konfigurieren und benutzerdefinierte Protokolle hinzufügen, um bestimmte Ereignisse oder Zustände in Ihrer Anwendung zu verfolgen.

Ist Leiter für große Anwendungen geeignet?

Ja, Logrocket ist für große Anwendungen ausgelegt. Es verfügt über die Leistungsoptimierung, um sicherzustellen, dass die Anwendung nicht verlangsamt wird und viele Protokolle verarbeiten kann. Darüber hinaus erleichtern die leistungsstarken Such- und Filterfunktionen von Logrocket das Finden relevanter Protokolle in großen Datensätzen.

Das obige ist der detaillierte Inhalt vonRedux -Protokollierung in der Produktion mit Leiter. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!