Sentry est une plate-forme de suivi des erreurs qui vous permet de surveiller les problèmes dans vos déploiements de production. Il prend en charge les langages et frameworks de programmation les plus courants.
GitLab est une plate-forme DevOps basée sur Git pour gérer l'ensemble du cycle de vie du développement logiciel. GitLab peut s'intégrer à Sentry pour afficher les erreurs capturées. Dans cet article, nous utiliserons les deux services pour éviter les problèmes dans une application React.
Mise en place
GitLab et Sentry ont tous deux des options auto-hébergées et SaaS. Les étapes de ce guide s'appliquent aux deux variantes. Nous supposerons que vous avez déjà un projet React prêt à être utilisé dans votre instance GitLab.
Connectez-vous à Sentry et cliquez sur le bouton “Créer un projet” bouton dans le coin supérieur droit. Cliquez sur “Réagir” sous le “Choisissez une plate-forme” titre. Cela permet à Sentry d'adapter des exemples d'extraits de code à votre projet.
Choisissez quand recevoir des alertes en utilisant les options sous “Définissez vos paramètres d'alerte par défaut.” Sélectionnez “M'alerter à chaque nouveau problème” pour recevoir un e-mail à chaque fois qu'une erreur est enregistrée. Le “Quand il y a plus de” L'option filtre le bruit créé par des événements en double dans une fenêtre de temps donnée.
Donnez un nom à votre projet dans le champ “Nom du projet” domaine. Cliquez sur “Créer un projet” pour terminer votre configuration.
Ajout de Sentry à votre base de code
Maintenant, vous devez intégrer Sentry avec votre code React. Ajoutez la bibliothèque Sentry aux dépendances de votre projet à l'aide de npm :
npm install @sentry/react
Vous devrez initialiser Sentry dès que possible dans le JavaScript de votre application. Cela donne à Sentry une visibilité sur les erreurs qui se produisent au début du cycle de vie de React. Ajoutez le script d'amorçage Sentry avant votre premier appel ReactDOM.render(). Ceci est généralement dans index.js :
importer l'application depuis "./App.js"; importer React à partir de “react” ; importer ReactDOM à partir de “react-dom” ; importer * en tant que Sentry depuis "@sentry/react"; Sentry.init({ dsn : “mon-dsn” }); ReactDOM.render(<App />, document.getElementById("react"));
Remplacez my-dsn par le DSN que Sentry affiche sur l'écran de création de votre projet. Le DSN identifie de manière unique votre projet afin que le service puisse attribuer correctement les événements.
Capture d'erreurs
Sentry capturera et signalera automatiquement les erreurs JavaScript non gérées. Bien qu'il ne puisse pas empêcher le plantage, il vous permet de savoir que quelque chose ne va pas avant que le rapport de l'utilisateur n'arrive.
Voici un exemple d'App.js :
importer React à partir de “react” ; exporter par défaut () => { données const = null; return data.map((val, key) => { <touche h1={touche}>{val}</h1>; }); };Ce code est cassé—les données sont définies sur null, la propriété de la carte ne sera donc pas définie. Nous essayons d'appeler data.map() malgré tout pour que l'application se bloque. Vous devriez voir un problème apparaître dans Sentry.
Les problèmes de sentinelle incluent autant de données que possible sur l'erreur. Vous pouvez voir l'URL de la page ainsi que des informations sur l'appareil de l'utilisateur. Sentry combinera automatiquement les problèmes en double. Cela vous permet de voir si un événement était un événement ponctuel ou régulier ayant un impact sur plusieurs utilisateurs.
Sentry récupère automatiquement les cartes source JavaScript lorsqu'elles sont disponibles. Si vous utilisez create-react-app, les cartes source sont automatiquement générées par npm run build. Assurez-vous de les copier sur votre serveur Web afin que Sentry puisse les trouver. Vous verrez de jolies traces de pile du code source d'origine au lieu de la pile obscurcie produite par la sortie de construction minifiée.
Vous pouvez marquer les erreurs Sentry comme Résolues ou Ignorées une fois qu'elles ont été traitées. Vous trouverez ces boutons sous le titre du problème et sur la page de présentation des problèmes. Utilisez Résolu une fois que vous êtes sûr qu'un problème a été résolu. Ignoré est pour les cas où vous n'avez pas l'intention de traiter la cause première. Dans les sites React, cela peut être le cas pour les erreurs causées par les anciennes versions du navigateur.
Error Boundaries
Les limites d'erreur React vous permettent d'afficher une interface utilisateur de secours lorsque une erreur est renvoyée dans un composant. Sentry fournit son propre wrapper de limite d'erreur. Cela génère une interface utilisateur de secours et enregistre l'erreur détectée dans Sentry.
importer * en tant que Sentry de "sentry"; exporter par défaut () => { données const = null; retour ( <Sentry.ErrorBoundary fallback={<h1>Une erreur s'est produite.</h1>}> { data.map((val, clé) => { <touche h1={touche}>{val}</h1>; }); } </Sentry.ErrorBoundary> ); };
Maintenant, vous pouvez afficher un avertissement aux utilisateurs lorsqu'une erreur se produit. Vous recevrez toujours le rapport d'erreur dans votre projet Sentry.
Ajout de l'intégration GitLab
Il y a deux côtés à intégrer GitLab et Sentry. Premièrement, les projets GitLab ont un “Error Tracking” fonction qui affiche votre liste d'erreurs Sentry. Vous pouvez marquer les erreurs comme résolues ou ignorées depuis GitLab. La deuxième partie consiste à connecter Sentry à GitLab. Cela permet à Sentry de créer automatiquement des problèmes GitLab lorsqu'une nouvelle erreur est enregistrée.
Regardons d'abord l'écran de suivi des erreurs de GitLab. Vous devrez créer une clé API Sentry. Cliquez sur votre nom d'utilisateur en haut à gauche de votre interface utilisateur Sentry, puis sur les clés API dans le menu. Cliquez sur “Créer un nouveau jeton” dans le coin supérieur droit.
Ajoutez les portées de jetons suivantes :
- alerts:read
- alerts:write
- event:admin
- event:read
- event:write
- project:read
Cela permet à GitLab de lire et mettre à jour vos erreurs Sentry.
Ensuite, dirigez-vous vers votre projet GitLab. Cliquez sur Paramètres dans le menu latéral, puis sur Opérations. Développez le “Suivi des erreurs” section. Collez votre jeton d'authentification Sentry dans le “Auth Token” et appuyez sur “Connect.” Si vous utilisez une instance Sentry auto-hébergée, vous devrez également ajuster l'“URI de l'API Sentry” correspondant à l'URI de votre serveur.
Le “Projet” La liste déroulante se remplira d'une liste de vos projets Sentry. Sélectionnez le bon projet et appuyez sur “Enregistrer les modifications.” Vous êtes maintenant prêt à utiliser le suivi des erreurs dans GitLab.
Cliquez sur Opérations > Suivi des erreurs dans la barre latérale gauche. Vous verrez votre liste d'erreurs Sentry. Il est filtré par défaut sur les problèmes non résolus. Cela peut être modifié à l'aide des listes déroulantes dans le coin supérieur droit. Cliquez sur une erreur pour voir sa trace de pile détaillée sans quitter GitLab. Il existe des boutons pour ignorer, résoudre et convertir en un problème GitLab. Une fois que vous avez ouvert un problème GitLab, vous pouvez attribuer cet élément à un membre de l'équipe afin que le bogue soit résolu.
Maintenant, vous pouvez ajouter le deuxième composant d'intégration—un lien de Sentry vers GitLab. Cliquez sur Paramètres dans votre barre latérale Sentry, puis sur Intégrations. Recherchez GitLab dans la liste et cliquez sur le bouton violet “Ajouter une installation” bouton dans le coin supérieur droit. Cliquez sur “Suivant” pour voir les informations de configuration.
De retour sur GitLab, cliquez sur l'icône de votre utilisateur dans le coin supérieur droit, suivi de “Préférences.&# 8221 ; Cliquez sur “Applications” dans le menu de gauche et ajoutez une nouvelle application. Utilisez les détails affichés par Sentry dans la fenêtre contextuelle de configuration de l'installation.
GitLab affichera un ID d'application et une clé secrète. Revenez à la fenêtre contextuelle Sentry et entrez ces valeurs. Ajoutez l'URL de votre serveur GitLab (gitlab.com pour GitLab SaaS) et saisissez le chemin d'URL relatif vers votre groupe GitLab (par exemple, mon groupe). L'intégration ne fonctionne pas avec les projets personnels.
Cliquez sur le bouton violet Soumettre pour créer l'intégration. Sentry pourra désormais afficher les informations GitLab à côté de vos erreurs. Cela inclut le commit qui a introduit l'erreur et les traces de pile qui renvoient aux fichiers GitLab. Les utilisateurs de Sentry avec des forfaits payants peuvent associer les problèmes GitLab et Sentry les uns aux autres.
Désactivation de Sentry en développement
Vous ne le ferez pas voulez nécessairement utiliser Sentry lors de l'exécution de votre application localement en développement. N'appelez pas Sentry.init() si vous souhaitez exécuter Sentry désactivé. Vous pouvez vérifier la présence d'une variable d'environnement locale et désactiver Sentry si elle est définie.
si (process.env.NODE_ENV === "production") { Sentry.init({ dsn : “mon-dsn” }); }
NODE_ENV est défini automatiquement par create-react-app. Production construit le code en dur de la variable en production. Vous pouvez l'utiliser pour activer sélectivement Sentry.
Activation du profilage des performances
Sentry peut également profiler les performances du navigateur de votre application. Bien que ce ne soit pas l'objectif principal de cet article, vous pouvez configurer le traçage avec quelques lignes supplémentaires dans l'initialisation de votre bibliothèque Sentry :
npm install @sentry/tracing import {Intégrations} de "@sentry/tracing" ; Sentry.init({ dsn : "my-dsn", intégrations : [nouvelles intégrations.BrowserTracing()], tracesSampleRate : 1.0 });
Vous pourrez désormais consulter les données de performances de votre projet Sentry. Cela peut vous aider à identifier le code lent en production.
Conclusion
Sentry vous permet de rechercher et de corriger les erreurs avant que les utilisateurs ne les signalent. Vous pouvez recevoir des alertes en temps réel lorsque des problèmes surviennent en production. Les traces de pile et les données du navigateur sont affichées en ligne dans chaque problème, ce qui vous donne un point de départ immédiat pour la résolution.
La combinaison de Sentry avec GitLab offre une intégration encore plus étroite avec le processus de développement logiciel. Si vous utilisez déjà GitLab pour la gestion de projet, l'ajout de l'intégration Sentry vous permet de gérer les alertes dans GitLab et de créer des problèmes GitLab pour les nouvelles erreurs Sentry.