Enregistrement de Redux en production avec LOGROCKING
LOGROCKING: Votre DVR d'application Web, aidant à redux l'application débogue
LOGROCKING est un outil de développeur révolutionnaire, comme le DVR d'une application Web, enregistrant chaque événement qui se produit sur un site Web. Il enregistre les actions et l'état Redux, les journaux de console, les erreurs JavaScript, les traces de pile, les demandes / réponses du réseau, les métadonnées du navigateur et les journaux personnalisés, et reproduit des vidéos précises au niveau pixel des applications à une page unique les plus complexes.
Il est difficile de comprendre les problèmes dans les applications Web. D'après les erreurs JavaScript mystérieuses, les bogues rapportés par les utilisateurs à des problèmes trouvés dans l'AQ, les développeurs ont travaillé dur pour résoudre des problèmes qui affectent les utilisateurs. Et ce ne sont que des problèmes évidents - la plupart des bogues ne sont jamais réellement signalés parce que les utilisateurs qui rencontrent de mauvaises expériences quittent ou le supportent silencieusement.
Pour résoudre ce problème, les développeurs adoptent de plus en plus des outils de journalisation frontale, car les bibliothèques de gestion de l'État modernes comme Redux quittent une riche piste d'audit. L'enregistrement des actions et du statut dans les environnements de production facilite la compréhension des bogues et des problèmes signalés par les utilisateurs.
Cet article vous montrera comment configurer la journalisation Redux à l'aide de Logrocket, puis discuter des techniques pour faciliter les applications Redux plus faciles à déboguer.
Cet article a été initialement publié sur logrocket.com et a été reproduit ici avec l'autorisation de l'auteur.
LOGROCKING: DVR pour les applications Web
LOGROCKING est un nouveau type d'outil de développement. C'est comme un DVR pour une application Web, enregistrant tout ce qui se passe sur un site Web. Il fonctionne parfaitement avec n'importe quelle application, quel que soit le cadre qu'il est utilisé et possède des plugins qui peuvent enregistrer un contexte supplémentaire à partir de React, Redux, Vue.js et Angular. Avec Logrocket, vous pouvez rejouer les sessions contenant des bogues ou des problèmes d'utilisateur pour comprendre rapidement la cause profonde sans deviner pourquoi le problème se produit. En plus de la journalisation des actions et de l'état Redux, Logrocket enregistre également les journaux de console, les erreurs JavaScript, les traces de pile, les demandes / réponses du réseau avec des en-têtes et des corps, des métadonnées de navigateur et des journaux personnalisés. Il détecte également le DOM d'enregistrer HTML et CSS sur la page, reproduisant des vidéos précises de niveau pixel des applications à une page à une seule page les plus complexes.
Définir Logrocket
La configuration de Logrocket est simple, il vous suffit d'ajouter quelques lignes de code à votre application:
Installez à l'aide de NPM:
- .
-
npm i --save logrocket
Créez un compte gratuit sur https://app.logrocket.com et notez votre identifiant d'application. - Initialiser Logrocking dans votre application:
import LogRocket from 'logrocket'; // 使用您的应用ID初始化LogRocket LogRocket.init('<your_application_id>');
import { applyMiddleware, createStore } from 'redux'; const store = createStore( reducer, // 您的应用reducer applyMiddleware(middlewares, LogRocket.reduxMiddleware()), );
LOGROCKING fournit également des plugins pour d'autres implémentations de flux telles que NGRX et VUEX, que vous pouvez lire ici.
REMPLAYEZ LA SESSION D'UTILISATION
Rejouant une session dans Logrocket, c'est comme le voir se produire dans votre propre navigateur. Vous pouvez vérifier les actions Redux, y compris la charge utile d'action complète et l'état précédent et suivant.
LOGROCKING capture les demandes et les réponses du réseau et vous permet de creuser dans des demandes spécifiques et d'afficher des en-têtes et des corps. Le graphique en cascade affiche le timing, vous permettant de voir facilement quelles demandes sont lentes, ou si des conditions de course potentielles se sont produites.
Parfois, les journaux redux seuls ne suffisent pas pour comprendre les bogues, en particulier lorsqu'ils traitent des problèmes signalés par l'utilisateur. La lecture vidéo de Logrocket aide en vous permettant de voir exactement ce que les utilisateurs voient dans votre application.
Étant donné que cette vidéo est en fait une reconstruction du DOM (plutôt qu'une vraie vidéo), vous pouvez vérifier HTML / CSS pour les bogues visuels, ou jouer à 2x pour comprendre rapidement comment les utilisateurs le font dans l'application lorsqu'ils traitent avec le support Personne ce qui s'est passé.
Intégrer la connexion redux à votre flux de travail
La capacité à rejouer les sessions utilisateur et à afficher les journaux Redux est très utile tout au long du flux de travail de développement.
Correction du bug
LOGROCKING s'intègre aux outils de reporting de bogues tels que Sentry et BugsNag, vous permettant d'afficher les journaux et vidéos Redux pour chaque bogue. Cela aide non seulement à corriger les bogues, mais aide également à comprendre l'impact de l'erreur, car certaines erreurs JavaScript sont totalement hors de propos. En regardant la vidéo lorsque l'erreur se produit, vous pouvez facilement dire si elle affecte réellement l'utilisateur ou peut être ignorée.
support
Les utilisateurs signalent souvent des problèmes, mais ne fournissent pas suffisamment de contexte pour comprendre exactement ce qui se passe.
Si vous utilisez un outil de support de chat comme Intercom, vous pouvez intégrer directement Logrocket pour ajouter des commentaires avec des URL enregistrées lorsque les utilisateurs commencent à discuter.
Si vous vous intégrez à un outil d'analyse plus général, vous pouvez ajouter une URL d'enregistrement à l'aide de l'API de suivi comme indiqué ci-dessous:
import LogRocket from 'logrocket'; // 使用您的应用ID初始化LogRocket LogRocket.init('<your_application_id>');
Faites une utilisation complète de la journalisation redux dans les environnements de production
L'environnement de production La journalisation est immédiatement utile dans toutes les applications Redux, mais en créant votre application en tenant compte de l'exploitation forestière, vous pouvez vous assurer que la journalisation est la plus utile lors des problèmes de débogage.
Essayez de sauver la majeure partie de l'état dans Redux
Je ne veux pas discuter de l'argument entre l'État local et l'état Redux ici, mais lorsque vous décidez si une partie d'état donnée doit être à Redux, demandez-vous si cela aide à voir cet état lors de la débogage de la question. Si la réponse est oui, envisagez de mettre cet état dans Redux afin qu'il soit enregistré avec les rapports de crash et les problèmes d'utilisateur.
Utiliser la bibliothèque d'acquisition de données à l'aide de redux
Les bibliothèquescomme Apollo-Client (pour GraphQL) et Redux-Queery (pour le repos) facilitent tous les données de la récupération du réseau via Redux. Ils utilisent Redux comme couche de persistance, ce qui signifie que lors du débogage du problème, vous pouvez vérifier les journaux Redux pour voir quelles données ces clients ont récupéré.
Si vous préférez une approche plus simple, vous pouvez rédiger vos propres données pour obtenir le "framework" en planifiant simplement des actions explicites lors de l'interrogation et de la réception de données du réseau.
en utilisant redux pour gérer les sources d'incertitude
Lorsque vous accédez à des données à partir d'API telles que WebSockets, de stockage local, indexédb et même date (), envisagez de planifier des actions redux contenant des résultats afin que vous puissiez facilement déboguer ces données à l'avenir. Par exemple, lorsque vous écoutez un WebSocket, planifiez une action Redux sur chaque message - afin que vous puissiez voir les données du journal redux.
Utiliser d'autres API de console
Les méthodes de console comme Console.Time (), Console.Count () et Console.Group () vous permettent d'ajouter des données riches aux journaux, tels que le nombre de rendu de composants React, le synchronisation des transactions et les journaux de cycle de vie des composants.
Créer et télécharger la carte source sur LOGROCKING
LOGROCKING prend en charge le mappage source, que vous pouvez télécharger via CLI. Ce faisant, vous pouvez voir des erreurs JavaScript, des actions Redux, des journaux de console et des traces de pile symbolisées pour les demandes de réseau, qui vous permet de voir où des actions spécifiques sont déclenchées dans votre code.
Conclusion
réagir et redux sont souvent salués comme des outils pour la construction applications maintenables - l'un des composants importants est debugabilité . L'enregistrement des données Redux dans un environnement de production peut fournir de telles informations car les bogues et autres problèmes rapportés par l'utilisateur peuvent être facilement débogués en vérifiant l'état Redux, les demandes de réseau et DOM.
La journalisation redux avec Logrocket peut considérablement simplifier le travail de correction des bogues et des utilisateurs de support. Vous pouvez commencer à utiliser LOGROCKING ici.
FAQ (FAQ) sur la journalisation redux dans les environnements de production à l'aide de LOGROCKING
Quelles sont les principales fonctions de Logrocket dans la journalisation redux?
LOGROCKING est un outil puissant qui aide les développeurs à suivre, enregistrer et comprendre les interactions utilisateur dans leurs applications Web. Il fournit une vue complète de ce qui se passe dans l'application, y compris les demandes de réseau, les journaux de console et même les actions des utilisateurs. Cela facilite l'identification et la résolution de problèmes, car les développeurs peuvent voir exactement ce qui cause le problème. LOGROCKING est particulièrement utile dans les applications Redux car elle peut enregistrer les actions et les états Redux, affichant ainsi clairement les séquences d'événements.
En quoi Logrocket est-il différent des autres outils de journalisation?
LOGROCKING ressorte pour sa fonction de relecture de session. Cette fonctionnalité permet aux développeurs de rejouer les sessions problématiques et de visualiser avec précision ce que les utilisateurs voient. Cela peut être inestimable pour identifier et corriger les bogues. De plus, Logrocket intègre de manière transparente avec Redux, ce qui facilite la connexion des actions Redux et de l'état.
Comment intégrer LOGROCKING avec mon application Redux?
L'intégration de LOGROCKING avec les applications Redux est très simple. Après avoir installé Logrocket via NPM, vous pouvez l'initialiser dans le fichier d'entrée de l'application. Vous pouvez ensuite utiliser le middleware Redux de Logrocket pour enregistrer les actions et l'état Redux. Ce middleware peut être ajouté lors de la création de stockage Redux.
Puis-je utiliser Logrocking dans un environnement de production?
Oui, Logrocket est conçu pour être utilisé dans les environnements de production. Il dispose d'une variété de fonctionnalités qui le rendent adapté à l'utilisation de la production, tels que des contrôles de confidentialité qui protègent les données sensibles des utilisateurs et les optimisations des performances qui garantissent que les applications ne ralentissent pas.
quels types de données peuvent enregistrer le logrocking?
LOGROCKING peut enregistrer une variété de données, y compris les demandes de réseau, les journaux de console, les actions et l'état Redux et l'interaction utilisateur. Cela offre une vue complète de ce qui se passe dans l'application, ce qui facilite l'identification et la résolution des problèmes.
Comment LogGrocket gère-t-il les données utilisateur sensibles?
LOGROCKING a de puissants contrôles de confidentialité qui peuvent protéger les données utilisateur sensibles. Vous pouvez configurer ces contrôles pour empêcher l'enregistrement de certaines données. Par exemple, vous pouvez empêcher l'entrée du formulaire de journalisation pour protéger les mots de passe utilisateur.
Puis-je utiliser Logrocking avec d'autres bibliothèques de gestion d'État?
Oui, bien que Logrocket intègre de manière transparente avec Redux, il peut également être utilisé avec d'autres bibliothèques de gestion d'État. Il fournit des middleware pour plusieurs bibliothèques populaires, notamment MOBX et VUEX.
Comment LogGrocket aide-t-il à déboguer?
La fonction de relecture de session de Logrocket peut être très précieuse dans le débogage. En rejouant la session problématique, les développeurs peuvent voir exactement ce que les utilisateurs voient, ce qui facilite l'identification et la corrige des bogues. De plus, la journalisation complète des demandes de réseau, les journaux de console et les interactions utilisateur par Logrocket peuvent fournir un contexte précieux lors du débogage.
Puis-je personnaliser les données enregistrées par Logrocket?
Oui, Logrocket est hautement personnalisable. Vous pouvez configurer les données à enregistrer, et vous pouvez également ajouter des journaux personnalisés pour suivre des événements ou des états spécifiques de votre application.
Logrrocket convient-il aux grandes applications?
Oui, Logrocket est conçu pour gérer les grandes applications. Il a une optimisation des performances pour s'assurer que l'application n'est pas ralentie et peut gérer beaucoup de journaux. De plus, les puissantes capacités de recherche et de filtrage de Logrocket facilitent la recherche de journaux pertinents dans les grands ensembles de données.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Outils d'IA chauds

Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool
Images de déshabillage gratuites

Clothoff.io
Dissolvant de vêtements AI

Video Face Swap
Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !

Article chaud

Outils chauds

Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise
Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP

Dreamweaver CS6
Outils de développement Web visuel

SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Sujets chauds











Python convient plus aux débutants, avec une courbe d'apprentissage en douceur et une syntaxe concise; JavaScript convient au développement frontal, avec une courbe d'apprentissage abrupte et une syntaxe flexible. 1. La syntaxe Python est intuitive et adaptée à la science des données et au développement back-end. 2. JavaScript est flexible et largement utilisé dans la programmation frontale et côté serveur.

Les principales utilisations de JavaScript dans le développement Web incluent l'interaction client, la vérification du formulaire et la communication asynchrone. 1) Mise à jour du contenu dynamique et interaction utilisateur via les opérations DOM; 2) La vérification du client est effectuée avant que l'utilisateur ne soumette les données pour améliorer l'expérience utilisateur; 3) La communication de rafraîchissement avec le serveur est réalisée via la technologie AJAX.

L'application de JavaScript dans le monde réel comprend un développement frontal et back-end. 1) Afficher les applications frontales en créant une application de liste TODO, impliquant les opérations DOM et le traitement des événements. 2) Construisez RestulAPI via Node.js et Express pour démontrer les applications back-end.

Comprendre le fonctionnement du moteur JavaScript en interne est important pour les développeurs car il aide à écrire du code plus efficace et à comprendre les goulots d'étranglement des performances et les stratégies d'optimisation. 1) Le flux de travail du moteur comprend trois étapes: analyse, compilation et exécution; 2) Pendant le processus d'exécution, le moteur effectuera une optimisation dynamique, comme le cache en ligne et les classes cachées; 3) Les meilleures pratiques comprennent l'évitement des variables globales, l'optimisation des boucles, l'utilisation de const et de locations et d'éviter une utilisation excessive des fermetures.

Python et JavaScript ont leurs propres avantages et inconvénients en termes de communauté, de bibliothèques et de ressources. 1) La communauté Python est amicale et adaptée aux débutants, mais les ressources de développement frontal ne sont pas aussi riches que JavaScript. 2) Python est puissant dans les bibliothèques de science des données et d'apprentissage automatique, tandis que JavaScript est meilleur dans les bibliothèques et les cadres de développement frontaux. 3) Les deux ont des ressources d'apprentissage riches, mais Python convient pour commencer par des documents officiels, tandis que JavaScript est meilleur avec MDNWEBDOCS. Le choix doit être basé sur les besoins du projet et les intérêts personnels.

Les choix de Python et JavaScript dans les environnements de développement sont importants. 1) L'environnement de développement de Python comprend Pycharm, Jupyternotebook et Anaconda, qui conviennent à la science des données et au prototypage rapide. 2) L'environnement de développement de JavaScript comprend Node.js, VScode et WebPack, qui conviennent au développement frontal et back-end. Le choix des bons outils en fonction des besoins du projet peut améliorer l'efficacité du développement et le taux de réussite du projet.

C et C jouent un rôle essentiel dans le moteur JavaScript, principalement utilisé pour implémenter des interprètes et des compilateurs JIT. 1) C est utilisé pour analyser le code source JavaScript et générer une arborescence de syntaxe abstraite. 2) C est responsable de la génération et de l'exécution de bytecode. 3) C met en œuvre le compilateur JIT, optimise et compile le code de point chaud à l'exécution et améliore considérablement l'efficacité d'exécution de JavaScript.

JavaScript est largement utilisé dans les sites Web, les applications mobiles, les applications de bureau et la programmation côté serveur. 1) Dans le développement de sites Web, JavaScript exploite DOM avec HTML et CSS pour réaliser des effets dynamiques et prend en charge des cadres tels que JQuery et React. 2) Grâce à la réactnative et ionique, JavaScript est utilisé pour développer des applications mobiles multiplateformes. 3) Le cadre électronique permet à JavaScript de créer des applications de bureau. 4) Node.js permet à JavaScript d'exécuter le côté du serveur et prend en charge les demandes simultanées élevées.
