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:

.
1. npm i --save logrocket Créez un compte gratuit sur https://app.logrocket.com et notez votre identifiant d'application.
2. Initialiser Logrocking dans votre application:

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

Ajouter le middleware redux:

C'est la configuration de base - voici tout ce dont vous avez besoin pour commencer à utiliser LOGROCKING!

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èques

comme 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!