Einloggen React Native: Alles, was Sie wissen müssen!

Die Protokollierung ist ein entscheidender Aspekt in React Native-App-Entwicklungsprojekten, da es eine der einfachsten und schnellsten Methoden zum Debuggen der App in der Entwicklungsphase selbst ist. Die Protokollierung bietet detaillierte Informationen und Feedback zum Problem, während der Code ausgeführt wird. Es hilft Entwicklern auch, das Verhalten einer App zu verstehen.

Die Protokollierung sollte jedoch während des App-Entwicklungsprozesses durchgeführt werden; Es ist nicht mehr von Vorteil, sobald die App bereitgestellt wird. Dies liegt daran, dass diese Protokolle auf der Clientseite generiert werden. Daher sind die über Protokolle erkannten Fehler während der Post-Deployment-Phase nur für die Benutzer zugänglich und gehen in ihren Browsern verloren. Das Entwicklungsteam kann diese Fehler nur identifizieren, wenn ein Benutzer einen Fehlerbericht ausfüllt, was am unwahrscheinlichsten ist. Benutzer werden die App meistens verlassen, anstatt das Problem zu melden.

Dieser Beitrag bietet umfassende Einblicke in die Anmeldung in React Native-Projekten und Methoden zur Behebung von Einschränkungen. Aber bevor wir tiefer eintauchen, werfen wir einen kurzen Blick auf die Architektur einer React Native App.

Reagieren Sie auf native Architektur/Ausführungsumgebung

Die React Native-Ausführungsumgebung besteht aus drei Hauptthreads – dem „Native“-Thread, dem „JS“-Thread und einem Hintergrundthread, der den Schattenknoten verwaltet. Diese Threads kommunizieren miteinander über eine Bibliothek namens „Bridge“.

Anmeldung bei React Native: Wichtige Schritte, die es zu beachten gilt

Lassen Sie uns nun umfassende Einblicke in die Anmeldung in der React Native-Umgebung sammeln.

So lesen Sie Protokolle

Die JavaScript-Protokolle sind im „Konsolen“-Teil des Abschnitts „Entwicklertools“ sichtbar. In dem Browser, der für Remote-JavaScript-Debugging verwendet wird, finden Sie „Entwicklertools“. React Native-Entwickler können diese Protokolle jedoch anzeigen, wenn der Debugger verbunden ist, und dies kann den Ausführungsprozess der App bis zu einem gewissen Grad verlangsamen. Also, was ist die Lösung? Sie müssen Befehle wie „react-native log-ios“ (für iOS-Apps) und „react-native log-android“ (für Android-Apps) verwenden, um sicherzustellen, dass Ihr Gerät während der Protokollierung nicht langsamer wird. Auf diese Weise erfahren Sie auch mehr darüber, was in der gesamten App vor sich geht und nicht nur im JavaScript-Thread.

Lassen Sie uns dies im Detail besprechen, um Ihnen mehr Klarheit beim Lesen von Protokollen zu geben!

Konsolenprotokolle

Um Konsolenprotokolle anzuzeigen, müssen Sie den Befehl npx expo start ausführen und ein Gerät verbinden; Die Konsolenprotokolle werden im Terminalprozess angezeigt. Die Laufzeit sendet diese Protokolle über Websockets an die Expo-CLI. Hier erhalten Sie Low-Fidelity-Protokolle, da die Entwicklungstools nicht direkt mit der Engine verbunden sind. Um Protokolle mit höherer Genauigkeit zu generieren, können Sie erweiterte Protokollierungsfunktionen wie beispielsweise console.table verwenden. Dazu müssen Sie mit Hermes einen Development Build erstellen und dann den Inspector anbinden. Hermes ist eine für die React-Native-Umgebung optimierte JS-Engine. Hermes verbessert die Startzeit einer App durch vorzeitige JS-Kompilierung in Bytecode.

Systemprotokolle

Diese Arten von Protokollen sind nützlich, wenn Sie Protokolle für alles anzeigen möchten, was auf Ihrem Gerät stattfindet, und auch die Protokolle, die vom Betriebssystem sowie von anderen Apps generiert werden. Dazu müssen Sie die folgenden Befehle im Terminal verwenden.

Für Android-Geräte: npx respond-native log-android

Für iOS-Geräte: React-native log-npxios

So schreiben Sie Protokolle

So schreiben Sie Protokolle! Ihre Ausgabe an das React Native Console-Protokoll erscheint in den Anwendungsprotokollen. Es ist wichtig, beim Schreiben von Protokollen die richtige Protokollebene zu verwenden. Neben dem console.log gibt es andere Protokollebenen wie console.info, console.warn, console.debug usw. Jedes dieser Protokolle hat einen bestimmten Zweck und bietet eine genauere Kontrolle über die benötigte Informationsebene. Sie können console.info verwenden, um herauszufinden, ob eine Reihe von Ereignissen gemäß dem erwarteten Muster stattgefunden hat. console.warn wird verwendet, wenn einige unerwartete Instanzen auftreten; zum Beispiel eine Serverantwort, die nicht ganz falsch ist, aber fragwürdig aussieht. consoe.debug wird verwendet, wenn Sie temporäre Protokolle zum Beheben von Problemen benötigen.

Die Bedeutung von Logging-Bibliotheken

Es ist ratsam, beim Schreiben von Protokollen eine Protokollbibliothek zu verwenden, da diese Protokolle basierend auf verschiedenen Ebenen gemäß den Anforderungen des Kunden speichert. Die Protokolle werden in einem verschlüsselten Dateiformat gespeichert und Protokollnachrichten werden zur Referenz der Entwickler gesendet oder angezeigt. Solche gebrauchsfertigen Logger sparen Zeit und Aufwand für Entwickler.

Wenn in der Produktionsumgebung keine geeigneten Protokolldateien vorhanden sind, wird es schwierig, Probleme zu debuggen. Dies liegt daran, dass Protokolldateien die einzige Informationsquelle sind, die Ihnen beim Debuggen unerwarteter Probleme oder getrennter Fehler hilft. Die Verwendung von Protokollierungsbibliotheken behebt diese Einschränkung.

Reagieren Sie auf native Logging-Bibliotheken: Beispiele

React-nativer-Datei-Logger

React-native-file-logger ist ein Datei-Logger für die native React-Umgebung und kann Nachrichten von Konsolenaufrufen an Protokolldateien anhängen, indem Datei-Logger von Logback (für Android) und CocoaLumberjack (für iOS) verwendet werden. Konfigurieren Sie es mit dem Befehl: FileLogger.configure(). Nach der Konfiguration protokolliert es automatisch alle vorhandenen Aufrufe von console.log/debug/… in einer Datei.

React-native-file-logger ist in TypeScript geschrieben und bietet eine optionale File-Rolling-Richtlinie. Die Dateien werden basierend auf der Größe und der benötigten Zeit gerollt. Die fortlaufende Richtlinie ist hochgradig anpassbar. Sie können die Protokollebene für die Dateiausgabe und das Protokollverzeichnis, einen Pfad, in dem Protokolldateien gespeichert werden, anpassen. Wenn Sie keine Konsolenaufrufe für die Dateiprotokollierung verwenden möchten, haben Sie außerdem die Möglichkeit, Nachrichten mithilfe Ihrer Logger-API direkt in die Protokolldatei zu schreiben.

Dieser Logger kann auch Dateiprotokolle per E-Mail an Entwickler senden, ohne auf eine andere Bibliothek angewiesen zu sein. Der Logger verwendet das undokumentierte global._inspectorLog von React Native. Mit React-native-file-logger können Sie Konsolenaufrufe abfangen und die formatierte Protokollnachricht abrufen.

reagieren-native-logs

Dieser React Native Logger verfügt über benutzerdefinierte „Log-Levels“ und „Transports“ wie Dateischreiben, farbige Konsole usw. Der Schweregrad jedes Log-Levels wird angezeigt; Log-Ebenen sind nach Wichtigkeit aufsteigend geordnet. Danach verwaltet „transport“ die Protokolle. „Transport“ ist eine Funktion, die Protokollnachrichten speichert, anzeigt und sendet.

Führen Sie für die Installation einen dieser beiden Befehle aus:

npm install – React-native-logs speichern

oder

Garn hinzufügen reagieren-native-Protokolle

Jetzt den Ball ins Rollen bringen! Gehen Sie zu React-Native-Logs und von dort aus

Importieren Sie { Logger }.

Führen Sie dann den Befehl var log = logger.createLogger aus

Mit der Methode „createLogger“ können Sie einen einfachen Logger erstellen, der Warn-, Debug- und Fehlerebenen bietet. Um diesen Logger anzupassen, müssen Sie ein Konfigurationsobjekt an die Methode „createLogger“ übergeben.

Kommen wir zum „Transport“: Entwickler können ihre eigenen „Transport“-Spezifikationen schreiben, um Protokolle an einen Cloud-Dienst zu senden. Sie können auch aus mehreren Standard-"Transport"-Optionen wie hideDate, hideLevel, loggerName, dateFormat usw. wählen; wenn Sie den Parameter – transportOptions setzen. Hier könnten Sie auch neue Optionen hinzufügen, die an Transporte übergeben werden, und die voreingestellten Transportoptionen überschreiben.

Der Schweregrad von Protokollen kann festgelegt werden; Dazu müssen Sie den Namen (String) der Ebene übergeben, die am wenigsten wichtig ist. Hier können Sie alle config.severity-Optionen überschreiben, die beim Erstellen des Loggers festgelegt wurden.

Umgang mit verschiedenen Arten von Fehlern, die von Protokollen angezeigt werden

Alle Warnungen und Fehler in den Entwicklungs-Builds werden in einer in der App vorhandenen LogBox angezeigt. Diese LogBox wird während der Veröffentlichung der Produktions-Builds automatisch deaktiviert. Denken Sie daran, dass das Ignorieren von Protokollen keine gute Praxis ist und der letzte Ausweg sein sollte. Und wenn Sie aus unvermeidlichen Gründen ein Protokoll ignorieren mussten, erstellen Sie später eine Aufgabe, um diese Protokolle zu reparieren.

Konsolenfehler

Sie können die Konsolenfehler und -warnungen in Form von Bildschirmbenachrichtigungen mit einem gelben oder roten Abzeichen anzeigen. Außerdem wird die Anzahl der Warnungen und Fehler angezeigt. Um die Warnungen und Fehler der Konsole zu lesen, müssen Sie auf die Benachrichtigung klicken. Danach werden Vollbildinformationen über das Protokoll angezeigt, und Sie können durch jedes in der Konsole vorhandene Protokoll blättern.

Sie können die oben genannten Benachrichtigungen ausblenden, indem Sie den Befehl verwenden: LogBox.ignoreAllLogs(). Dieser Ansatz ist praktisch, wenn Sie Produktdemos geben. Sie können Benachrichtigungen auch nach dem „Pro-Log“-Ansatz ausblenden. Hier müssen Sie den Befehl eingeben: LogBox.ignoreLogs(). Dieser Ansatz kann verwendet werden, um laute Warnungen zu verarbeiten, die Sie nicht beheben können. zum Beispiel diejenigen in einer Abhängigkeit von Drittanbietern.

Syntaxfehler

Immer wenn ein Syntaxfehler auftritt, wird ein LogBox-Fehler im Vollbildmodus angezeigt. Die LogBox zeigt Ihnen den Stack-Trace sowie den Ort des Syntaxfehlers. Ein solcher Fehler kann nicht verworfen werden, da er auf eine ungültige JS-Ausführung hinweist, die unbedingt behoben werden muss, bevor Sie mit dem App-Entwicklungsprozess fortfahren. So müssen Sie vorgehen, um Syntaxfehler zu schließen. Beheben Sie den Fehler. Dann können Sie eine dieser beiden Möglichkeiten verwenden – Fast Refresh aktivieren und als „automatisch schließen“ speichern oder Fast Refresh deaktivieren und mit dem Befehl cmd + r neu laden.

Unbehandelte JS-Fehler

Die zuvor nicht behandelten JavaScript-Fehler zeigen automatisch eine Vollbild-LogBox an, die die Fehlerquelle anzeigt. Sie können solche Fehler ignorieren oder minimieren, um den Status der Anwendung anzuzeigen, wenn diese Fehler auftreten. Es wird jedoch dringend empfohlen, diese Fehler zu beheben.

Endeffekt

Ich hoffe, Sie haben umsetzbare Erkenntnisse zu den verschiedenen Ansätzen zur Anmeldung bei React Native gesammelt. Um eine erstklassige React Native App zu erstellen, muss das Entwicklungsteam gut gerüstet sein, um auf unerwartete Ereignisse und Fehler zu reagieren. Und die Protokollierung hilft Ihnen, die Grundursache von Fehlern herauszufinden, und macht es den Entwicklern leicht, Probleme zu lösen. Sie müssen den Protokollierungsprozess jedoch angemessen durchführen, um seine Vorteile zu nutzen, ohne die UX zu beeinträchtigen. Daher ist es wichtig, ein erfahrenes React Native-App-Entwicklungsunternehmen für die Durchführung Ihres Softwareentwicklungsprojekts auszuwählen.