Se connecter React Native : tout ce que vous devez savoir !

La journalisation est un aspect crucial dans les projets de développement d'applications React Native car c'est l'une des méthodes les plus simples et les plus rapides pour déboguer l'application lors de la phase de développement elle-même. La journalisation fournit des informations détaillées et des commentaires sur le problème pendant l'exécution du code. Cela aide également les développeurs à comprendre le comportement d'une application.

Cependant, la journalisation doit être effectuée pendant le processus de développement de l'application ; ce n'est plus avantageux une fois l'application déployée. En effet, ces journaux sont générés côté client. Ainsi, lors de la phase de post-déploiement, les erreurs détectées via les logs ne seront accessibles qu'aux utilisateurs et se perdront dans leurs navigateurs. L'équipe de développement ne peut identifier ces erreurs que si un utilisateur remplit un rapport de bogue, ce qui est le moins susceptible de se produire. Les utilisateurs abandonneront généralement l'application au lieu de signaler le problème.

Cet article fournit des informations complètes sur la journalisation des projets React Native et des méthodes pour résoudre les limitations. Mais, avant de plonger plus profondément, jetons un coup d'œil à l'architecture d'une application React Native.

Réagissez à l'architecture native / à l'environnement d'exécution

L'environnement d'exécution React Native comprend trois threads principaux - le thread "natif", le thread "JS" et un thread d'arrière-plan qui gère le nœud fantôme. Ces threads communiquent entre eux via une bibliothèque nommée "Bridge".

Se connecter à React Native : étapes clés à prendre en compte

Maintenant, rassemblons des informations complètes sur la journalisation dans l'environnement React Native.

Comment lire les journaux

Les journaux JavaScript sont visibles dans la partie "console" de la section "outils de développement". Vous trouverez des « outils de développement » dans le navigateur utilisé pour le débogage JavaScript à distance. Cependant, les développeurs React Native peuvent afficher ces journaux lorsque le débogueur est connecté, ce qui peut ralentir le processus d'exécution de l'application dans une certaine mesure. Alors, quelle est la solution ? Vous devez utiliser des commandes telles que react-native log-ios (pour les applications iOS) et react-native log-android (pour les applications Android) pour vous assurer que votre appareil ne ralentit pas pendant la journalisation. De cette façon, vous en saurez également plus sur ce qui se passe dans l'ensemble de l'application et pas seulement sur le fil JavaScript.

Discutons-en en détail pour vous fournir plus de clarté sur la lecture des journaux !

Journaux de la console

Pour afficher les journaux de la console, vous devez exécuter la commande npx expo start et connecter un appareil ; les journaux de la console apparaîtront dans le processus du terminal. Le runtime envoie ces journaux à l'Expo CLI via des sockets Web. Ici, vous obtenez des journaux basse fidélité car les outils de développement ne sont pas directement connectés au moteur. Pour générer des journaux plus fidèles, vous pouvez utiliser des fonctions de journalisation avancées telles que console.table. Pour cela, vous devez créer une version de développement à l'aide d'Hermes, puis connecter l'inspecteur. Hermes est un moteur JS optimisé pour l'environnement React Native. Hermes améliore le temps de démarrage d'une application en compilant JS à l'avance en bytecode.

Journaux système

Ces types de journaux sont utiles si vous souhaitez afficher les journaux de tout ce qui se passe sur votre appareil, ainsi que les journaux générés par le système d'exploitation ainsi que par d'autres applications. Vous devez utiliser les commandes suivantes dans le terminal à cette fin.

Pour les appareils Android : npx react-native log-android

Pour les appareils iOS : log-npxios réactif natif

Comment écrire des journaux

Voici comment écrire des journaux ! Votre sortie dans le journal React Native Console apparaît dans les journaux d'application. Il est important d'utiliser le niveau de journalisation approprié lors de l'écriture des journaux. Outre le console.log, il existe d'autres niveaux de journal comme console.info, console.warn, console.debug, etc. Chacun de ces journaux a un objectif spécifique et fournit un contrôle plus granulaire sur le niveau d'information nécessaire. Vous pouvez utiliser console.info pour déterminer si un ensemble d'événements s'est produit conformément au modèle attendu. console.warn est utilisé si des instances inattendues se produisent ; par exemple, une réponse du serveur qui n'est pas entièrement incorrecte mais qui semble discutable. consoe.debug est utilisé lorsque vous avez besoin de journaux temporaires pour résoudre des problèmes.

L'importance des bibliothèques de journalisation

Il est conseillé d'utiliser une bibliothèque de journalisation lors de l'écriture des journaux car elle enregistrera les journaux en fonction de différents niveaux selon les exigences du client. Les journaux seront enregistrés dans un format de fichier crypté et des messages de journal seront envoyés ou affichés pour la référence des développeurs. Ces enregistreurs prêts à l'emploi font gagner du temps et des efforts aux développeurs.

Si les fichiers journaux appropriés ne sont pas présents dans l'environnement de production, il devient difficile de déboguer les problèmes. En effet, les fichiers journaux sont la seule source d'informations qui vous aide à déboguer les problèmes inattendus ou les erreurs déconnectées. L'utilisation de bibliothèques de journalisation résout cette limitation.

Bibliothèques de journalisation natives React : exemples

React-native-file-logger

React-native-file-logger est un enregistreur de fichiers pour l'environnement natif de réaction et peut ajouter des messages d'appels de console dans des fichiers journaux en utilisant des enregistreurs de fichiers de Logback (pour Android) et CocoaLumberjack (pour iOS). Configurez-le à l'aide de la commande : FileLogger.configure(). Une fois configuré, il consignera automatiquement tous les appels console.log/debug/… existants dans un fichier.

React-native-file-logger est écrit en TypeScript et offre une politique facultative de roulement de fichiers. Les fichiers sont roulés en fonction de la taille et du temps nécessaire. La politique de roulement est hautement personnalisable. Vous pouvez personnaliser le niveau de journalisation pour la sortie des fichiers et le répertoire des journaux, un chemin où les fichiers journaux sont stockés. De plus, si vous ne souhaitez pas utiliser les appels de console pour la journalisation des fichiers, vous avez la possibilité d'écrire directement des messages dans le fichier journal à l'aide de votre API de journalisation.

Cet enregistreur peut également envoyer des journaux de fichiers par e-mail aux développeurs sans avoir à dépendre d'une autre bibliothèque. L'enregistreur utilise le global._inspectorLog non documenté de React Native. À l'aide de React-native-file-logger, vous pouvez intercepter les appels de la console et récupérer le message de journal formaté.

logs natifs de réaction

Cet enregistreur React Native est livré avec des «niveaux de journalisation» et des «transports» personnalisés tels que l'écriture de fichiers, une console colorée, etc. La gravité de chaque niveau de journalisation est affichée; les niveaux de journalisation sont classés par ordre croissant en fonction de leur degré d'importance. Par la suite, « transport » gère les logs. "Transport" est une fonctionnalité qui enregistre, affiche et envoie des messages de journal.

Pour l'installation, exécutez l'une de ces deux commandes :

npm install –save react-native-logs

ou

fil ajouter réagir-native-logs

Maintenant, lancez le bal ! Allez dans react-native-logs et à partir de là,

importer { enregistreur }.

Exécutez ensuite la commande var log = logger.createLogger

La méthode "createLogger" vous permet de créer un enregistreur simple qui offre des niveaux d'avertissement, de débogage et d'erreur. Pour personnaliser ce logger, vous devez passer un objet de configuration à la méthode « createLogger ».

En ce qui concerne le « transport », les développeurs peuvent écrire leurs propres spécifications de « transport » pour envoyer des journaux à un service Cloud. Vous pouvez également choisir parmi plusieurs options de « transport » par défaut telles que hideDate, hideLevel, loggerName, dateFormat, etc. ; si vous définissez le paramètre – transportOptions. Ici, vous pourrez également ajouter de nouvelles options qui seront transmises aux transports et écraser les options de transport prédéfinies.

Le niveau de gravité des journaux peut être défini ; pour cela, il faut passer le nom (string) du niveau qui a le moins d'importance. Ici, vous pouvez écraser toute option config.severity qui a été définie lors de la création de l'enregistreur.

Comment gérer différents types d'erreurs affichées par les journaux

Tous les avertissements et erreurs dans les versions de développement apparaissent dans une LogBox présente dans l'application. Cette LogBox est désactivée automatiquement lors de la sortie des builds de production. N'oubliez pas qu'ignorer les journaux n'est pas une bonne pratique et devrait être le dernier recours. Et, si vous deviez ignorer un journal pour une raison inévitable, créez une tâche pour réparer ces journaux ultérieurement.

Erreurs de console

Vous pouvez afficher les erreurs et les avertissements de la console sous la forme de notifications à l'écran avec un badge jaune ou rouge. Le nombre d'avertissements et d'erreurs est également affiché. Pour lire les avertissements et les erreurs de la console, vous devez cliquer sur la notification. Par la suite, des informations en plein écran sur le journal apparaîtront et vous pourrez parcourir chaque journal présent dans la console.

Vous pouvez masquer les notifications susmentionnées en utilisant la commande : LogBox.ignoreAllLogs(). Cette approche est pratique lorsque vous faites des démonstrations de produits. Vous pouvez également masquer les notifications en suivant l'approche "par journal". Ici, vous devez taper la commande : LogBox.ignoreLogs(). Cette approche peut être utilisée pour gérer les avertissements bruyants que vous ne pouvez pas corriger ; par exemple, ceux d'une dépendance tierce.

Erreurs de syntaxe

Chaque fois qu'il y a une erreur de syntaxe, une erreur LogBox plein écran apparaît. La LogBox vous montre la trace de la pile ainsi que l'emplacement de l'erreur de syntaxe. Une telle erreur ne peut pas être ignorée car elle indique une exécution JS invalide qui doit nécessairement être résolue avant de poursuivre le processus de développement de l'application. C'est ainsi que vous devez agir pour rejeter les erreurs de syntaxe. Corrigez l'erreur. Ensuite, vous pouvez utiliser l'une ou l'autre de ces deux méthodes - Activer l'actualisation rapide et l'enregistrer sous le nom "Rejeter automatiquement" ou désactiver l'actualisation rapide et recharger à l'aide de la commande cmd+r.

Erreurs JS non gérées

Les erreurs JavaScript précédemment non gérées affichent automatiquement une LogBox plein écran, indiquant la source de l'erreur. Vous pouvez ignorer ou minimiser ces erreurs pour afficher l'état de l'application lorsque ces erreurs surviennent. Cependant, il est fortement recommandé de corriger ces erreurs.

Conclusion

J'espère que vous avez rassemblé des informations exploitables sur les différentes approches de la journalisation dans React Native. Pour créer une application React Native de premier ordre, l'équipe de développement doit être bien équipée pour faire face aux événements et erreurs inattendus. De plus, la journalisation vous aide à trouver la cause première des erreurs et permet aux développeurs de résoudre facilement les problèmes. Cependant, vous devez effectuer le processus de journalisation de manière appropriée pour tirer parti de ses avantages sans affecter l'UX. Par conséquent, il est important de choisir une société de développement d'applications React Native expérimentée pour exécuter votre projet de développement logiciel.