Comment utiliser Sentry et GitLab pour capturer les erreurs de réaction -

Name: Tremplin Numérique
Price range: $$$

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 de programmation et les frameworks les plus populaires.

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 garder une longueur d’avance sur les problèmes d’une application React.

Sommaire

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 » dans le coin supérieur droit. Cliquez sur « Réagir » sous la rubrique « Choisir une plate-forme ». Cela permet à Sentry d’adapter des exemples d’extraits de code à votre projet.

Choisissez quand recevoir des alertes à l’aide des options sous « Définir 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. L’option « Quand il y a plus de » 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 ». Cliquez sur « Créer un projet » pour terminer votre configuration.

Ajouter 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 de Sentry avant votre premier ReactDOM.render() appel. C’est typiquement dans index.js:

import App from "./App.js";
import React from "react";
import ReactDOM from "react-dom";
import * as Sentry from "@sentry/react";
 
Sentry.init({
    dsn: "my-dsn"
});
 
ReactDOM.render(<App />, document.getElementById("react"));

Remplacer my-dsn avec 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 utilisateur n’arrive.

Voici un exemple App.js:

import React from "react";
 
export default () => {
    const data = null;
    return data.map((val, key) => {
        <h1 key={key}>{val}</h1>;
    });
};

Ce code est cassé—data est réglé sur null, alors le map la propriété sera undefined. Nous essayons d’appeler data.map() peu importe 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 aide à voir si un événement était un événement ponctuel ou régulier qui a 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 sources sont générées automatiquement 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 numéro 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.

Limites d’erreur

Les limites d’erreur React vous permettent d’afficher une interface utilisateur de secours lorsqu’une erreur est générée dans un composant. Sentry fournit son propre wrapper de limite d’erreur. Cela rend une interface utilisateur de secours et enregistre l’erreur détectée dans Sentry.

import * as Sentry from "sentry";
 
export default () => {
    const data = null;
    return (
        <Sentry.ErrorBoundary fallback={<h1>Something went wrong.</h1>}>
            {
                data.map((val, key) => {
                    <h1 key={key}>{val}</h1>;
                });
            }
        </Sentry.ErrorBoundary>
    );
};

Désormais, 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. Tout d’abord, les projets GitLab ont une fonctionnalité « Error Tracking » 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 GitLab problèmes 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 étendues de jeton suivantes :

alerts:read
alerts:write
event:admin
event:read
event:write
project:read

Cela permet à GitLab de lire et de 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 la section « Suivi des erreurs ». Collez votre jeton d’authentification Sentry dans le champ « Auth Token » et appuyez sur « Connect ». Si vous utilisez une instance Sentry auto-hébergée, vous devrez également ajuster le champ « URI de l’API Sentry » pour qu’il corresponde à l’URI de votre serveur.

La liste déroulante « Projet » s’affichera avec 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 » 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 ». 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 entrez le chemin URL relatif vers votre groupe GitLab (par exemple my-group). L’intégration ne fonctionne pas avec des 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ésactiver Sentry en cours de développement

Vous ne voudrez pas nécessairement utiliser Sentry lors de l’exécution de votre application localement en développement. N’appelez pas Sentry.init() si vous voulez exécuter avec 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.

if (process.env.NODE_ENV === "production") {
    Sentry.init({
        dsn: "my-dsn"
    });
}

NODE_ENV est réglé automatiquement par create-react-app. Production construit le code en dur de la variable pour 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 {Integrations} from "@sentry/tracing";
 
Sentry.init({
    dsn: "my-dsn",
    integrations: [new Integrations.BrowserTracing()],
    tracesSampleRate: 1.0
});

Maintenant, vous pourrez voir les données de performances dans 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, vous offrant ainsi 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.