🥇Suivi des erreurs dans une application React avec Sentry

Aujourd'hui, je vais vous parler du suivi des erreurs en temps réel dans une application React. L'application d'interface utilisateur n'est généralement pas utilisée pour le suivi des erreurs. Certaines entreprises retardent souvent le suivi des erreurs, y revenant après la documentation, les tests, et d'autres étapes. Cependant, si vous pouvez améliorer votre produit, faites-le simplement !

1. Pourquoi avez-vous besoin de Sentry ?

Je suppose que vous êtes intéressé par le suivi des erreurs en production.

Pensez-vous que ce n'est pas suffisant ?

Bien, examinons les détails.

Les principales raisons d'utiliser Sentry pour les développeurs :

Permet d'éliminer les risques lors du déploiement de code avec des erreurs.
Aide le QA à tester le code.
Recevoir des notifications rapides sur les problèmes.
Possibilité de corriger rapidement les erreurs.
Obtenez une visualisation pratique des erreurs dans le panneau d'administration.
Tri des erreurs par segments d'utilisateur / navigateur.

Principales raisons pour les CEO / Leads de projet.

Économies d'argent (Sentry peut être installé sur vos serveurs).
Recevoir des retours d'utilisateurs.
Comprendre ce qui ne va pas avec votre projet en temps réel.
Comprendre le nombre de problèmes rencontrés par les utilisateurs de votre application.
Aide à détecter les zones où vos développeurs ont commis des erreurs.

Je pense que les développeurs seraient intéressés par cet article en premier lieu. Vous pouvez également utiliser cette liste de raisons pour convaincre la direction d'intégrer Sentry.

Faites attention au dernier point de la liste pour les affaires.

Vous êtes déjà intéressé ?

Qu'est-ce que Sentry ?

Sentry est une application de suivi des erreurs open source qui aide les développeurs à suivre et à corriger les pannes en temps réel. N'oubliez pas que l'application permet également d'améliorer l'efficacité et l'expérience utilisateur. Sentry prend en charge JavaScript, Node, Python, PHP, Ruby, Java et d'autres langages de programmation.

2. Connectez-vous et créez un projet.

Ouvrez votre compte Sentry. Vous devrez peut-être vous connecter. (Notez que Sentry peut être installé sur vos serveurs.)
La prochaine étape consiste à créer un projet.
Sélectionnez votre langue dans la liste. (Nous allons choisir React. Cliquez sur « Créer un projet ».)

Configurez votre application. Voici un exemple de base sur la façon d'intégrer Sentry dans un conteneur:

import * as Sentry from '@sentry/browser';
// Sentry.init({
//  dsn: "<https:>"
// });
// devrait avoir été appelé avant de l'utiliser ici
// idéalement avant même de rendre votre application react 

class ExampleBoundary extends Component {
    constructor(props) {
        super(props);
        this.state = { error: null };
    }

    componentDidCatch(error, errorInfo) {
      this.setState({ error });
      Sentry.withScope(scope =&gt; {
        Object.keys(errorInfo).forEach(key =&gt; {
          scope.setExtra(key, errorInfo[key]);
        });
        Sentry.captureException(error);
      });
    }

    render() {
        if (this.state.error) {
            // afficher l'interface utilisateur de secours
            return (
              <a onclick="{()" > Sentry.showReportDialog()}&gt;Faire un retour d'information</a>
            );
        } else {
            // lorsqu'il n'y a pas d'erreur, rendre les enfants inchangés
            return this.props.children;
        }
    }
}

Sentry dispose d'un assistant utile qui vous aidera à comprendre ce que vous devez faire ensuite. Vous pouvez suivre les étapes suivantes. Je veux vous montrer comment créer votre premier gestionnaire d'erreurs. Super, nous avons créé le projet ! Passons à l'étape suivante.

3. Intégration de React et Sentry

Vous devez installer le paquet npm dans votre projet.

npm i @sentry/browser

Initialisez Sentry dans votre conteneur:

Sentry.init({
  // dsn: #dsnUrl,
});

Le DSN se trouve dans Projets -> Paramètres -> Clés Client. Vous pouvez trouver les clés client dans la barre de recherche.

componentDidCatch(error, errorInfo) {
  Sentry.withScope(scope => {
    Object.keys(errorInfo).forEach(key => {
      scope.setExtra(key, errorInfo[key]);
    });
    Sentry.captureException(error);
  });
}

4. Suivi de la première erreur

Par exemple, j'ai utilisé une simple application musicale avec l'API Deezer. Vous pouvez le voir. ici. Nous devons créer une erreur. L'un des moyens consiste à accéder à la propriété "undefined".

Nous devons créer un bouton qui appelle console.log avec user.email. Après cette action, nous devrions obtenir un message d'erreur : Uncaught TypeError (impossible de lire la propriété de l'objet indéfini email) en raison de l'absence de l'objet utilisateur. Vous pouvez également utiliser l'exception Javascript.

Le conteneur entier ressemble à ceci:

importer React, { Component } from "react";
importer { connect } from "react-redux";
importer { Input, List, Skeleton, Avatar } from "antd";
importer * as Sentry from "@sentry/browser";
importer getList from "..../store/actions/getList";

const Search = Input.Search;

const mapState = état =&gt; ({
  liste: état.root.list,
  chargement: état.root.loading
});

const mapDispatch = {
  getList
};

class Container extends Component {
  constructor(props) {
    super(props);

    Sentry.init({
      dsn: "https://fc0edcf6927a4397855797a033f04085@sentry.io/1417586",
    });
  }

  componentDidCatch(error, errorInfo) {
    Sentry.withScope(scope =&gt; {
      Object.keys(errorInfo).forEach(key =&gt; {
        scope.setExtra(key, errorInfo[key]);
      });
      Sentry.captureException(error);
    });
  }
  render() {
    const { liste, chargement, getList } = this.props;
    const utilisateur = undefined;
    return (
      <div classname="App">
        <button
          type="button"
          onclick="{()" > console.log(utilisateur.email)}
        &gt;
          tester l'erreur1
        </button>
        <div onclick="{()" > Sentry.showReportDialog()}&gt;Signaler un retour d'information1</div>
        <h1>Music Finder</h1>
        <br />
        <search onsearch="{value" > getList(value)} entrerBouton /&gt;
        {chargement &amp;&amp; <skeleton avatar title="{false}" loading="{true}" active />}
        {!chargement &amp;&amp; (
          <list
            itemlayout="horizontal"
            datasource="{list}"
            locale="{{" emptytext: <div /> }}
            renderItem={item =&gt; (
              <List.Item>
                &lt;List.Item.Meta
                  avatar={<avatar src="{item.artist.picture}" />}
                  title={item.title}
                  description={item.artist.name}
                /&gt;
              </List.Item>
            )}
          />
        )}
      </div>
    );
  }
}

export default connect(
  mapState,
  mapDispatch
)(Container);

Après avoir intégré ce bouton, vous devez le tester dans le navigateur.

Nous avons notre première erreur.

Hourra !

Si vous cliquez sur l'erreur dans l'en-tête, vous verrez la trace de la pile.

Les messages semblent mauvais. Bien sûr, nous avons vu des messages d'erreur sans comprendre où ce code se trouve. Par défaut, il s'agit de la carte source dans ReactJS, car elles ne sont pas configurées.

Je voudrais également fournir des instructions pour configurer la carte source, mais cela rendrait cet article beaucoup plus long que prévu.

Vous pouvez explorer ce sujet ici. Si cet article vous intéresse, Dmitry Nozhenko publiera la deuxième partie sur l'intégration de la carte source. Alors, n'hésitez pas à aimer et à vous abonner Dmitry Nozhenko, pour ne pas manquer la deuxième partie.

5. Utilisation Sentry avec une API API

D'accord. Nous avons examiné les exceptions Javascript dans les sections précédentes. Cependant, que faire avec les erreurs XHR ?

Sentry dispose également d'un traitement des erreurs personnalisé. Je l'ai utilisé pour suivre les erreurs API.

Sentry.captureException(err)

Vous pouvez configurer le nom de l'erreur, le niveau, ajouter des données, des données utilisateur uniques à l'aide de votre application, d'un e-mail, etc.

superagent
  .get(`https://deezerdevs-deezer.p.rapidapi.com/search?q=${query}`)
  .set("X-RapidAPI-Key", #id_key)
  .end((err, response) => {
    if (err) {
      Sentry.configureScope(
        scope => scope
          .setUser({"email": "john.doe@example.com"})
          .setLevel("Error")
      );
      return Sentry.captureException(err);
    }

    if (response) {
      return dispatch(setList(response.body.data));
    }
  });

Je voudrais utiliser une fonction générale pour la capture d'API.

import * as Sentry from "@sentry/browser";

export const apiCatch = (error, getState) => {
  const store = getState();
  const storeStringify = JSON.stringify(store);
  const { root: { user: { email } } } = store;

  Sentry.configureScope(
    scope => scope
      .setLevel("Error")
      .setUser({ email })
      .setExtra("store", storeStringify)
  );
    // Sentry.showReportDialog(); - Si vous voulez obtenir des retours des utilisateurs sur l'erreur
  return Sentry.captureException(error);
};

Importez cette fonction dans l'appel de l'API.

export default query => (dispatch, getState) => {
  superagent
    .get(`https://deezerdevs-deezer.p.rapidapi.com/search?q=${query}`)
    .set("X-RapidAPI-Key", #id_key)
    .end((error, response) => {
      if (error) {
        return apiCatch(error, getState)
      }

      if (response) {
        return dispatch(setList(response.body.data));
      }
    });
};

Vérifions les méthodes :

setLevel permet d'insérer une erreur de niveau dans le tableau de bord Sentry. Il a des propriétés — ‘fatal’, ‘error’, ‘warning’, ‘log’, ‘info’, ‘debug’, ‘critical’.
setUser aide à conserver toutes les données utilisateur (id, adresse e-mail, plan de paiement, etc.).
setExtra permet de spécifier toutes les données dont vous avez besoin, par exemple, le magasin.

Si vous souhaitez obtenir des retours des utilisateurs sur une erreur, vous devez utiliser la fonction showReportDialog.

Sentry.showReportDialog();

Conclusion :

Aujourd'hui, nous avons décrit l'une des façons d'intégrer Sentry dans une application React.

→ Chat Telegram sur Sentry

Source : habr.com

Suivi des erreurs dans une application React à l'aide de Sentry

1. Pourquoi avez-vous besoin de Sentry ?

Qu'est-ce que Sentry ?

2. Connectez-vous et créez un projet.

3. Intégration de React et Sentry

4. Suivi de la première erreur