Suivi des erreurs dans une application React avec Sentry

Aujourd'hui, je vais vous guider à travers le suivi des erreurs en temps réel dans une application React. L'application frontale n'est généralement pas utilisée pour le suivi des bogues. Certaines entreprises mettent souvent de côté le suivi des bogues, y revenant après documentation, tests, etc. Cependant, si vous pouvez changer votre produit pour le mieux, faites-le !

1. Pourquoi avez-vous besoin de Sentry ?

Je suppose que vous êtes intéressé par le suivi des bogues pendant la production.

Pensez-vous que cela ne suffit pas ?

Bon, regardons les détails.

Principales raisons d'utiliser Sentry pour les développeurs :

• Vous permet de vous débarrasser des risques lors du déploiement de code avec des erreurs
• Aide QA dans les tests de code
• Recevez des notifications de problèmes rapides
• Capacité à corriger rapidement les erreurs
• Obtenir un affichage pratique des erreurs dans le panneau d'administration
• Trier les erreurs par segment utilisateur/navigateur

Principaux motifs de PDG / chef de projet

• Économisez de l'argent (Sentry peut être installé sur vos serveurs)
• Obtenir les commentaires des utilisateurs
• Comprendre ce qui ne va pas avec votre projet en temps réel
• Comprendre le nombre de problèmes que les gens rencontrent avec votre application
• Aide pour trouver les endroits où vos développeurs ont fait une erreur

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 votre patron d'intégrer Sentry.

Soyez prudent avec le dernier élément de la liste des entreprises.

Êtes-vous déjà intéressé?

Qu'est-ce que Sentry ?

Sentry est une application open source de suivi des bogues qui aide les développeurs à suivre et à corriger les plantages en temps réel. N'oubliez pas que l'application vous permet également d'augmenter l'efficacité et d'améliorer 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. (Veuillez noter que Sentry peut être installé sur vos serveurs)
• L'étape suivante consiste à créer un projet
• Sélectionnez votre langue dans la liste. (Nous allons choisir Réagir. Cliquez sur "Créer un projet")

Configurez votre application. Vous pouvez voir un exemple de base de la façon d'intégrer Sentry dans un conteneur ci-dessous :

import * as Sentry from '@sentry/browser';
// Sentry.init({
//  dsn: "<https://[email protected]/1432138>"
// });
// should have been called before using it here
// ideally before even rendering your react app 

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

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

    render() {
        if (this.state.error) {
            //render fallback UI
            return (
              <a onClick={() => Sentry.showReportDialog()}>Report feedback</a>
            );
        } else {
            //when there's not an error, render children untouched
            return this.props.children;
        }
    }
}

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

3. Intégration de React et Sentry

Vous devez installer le package 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 application musicale simple avec l'API Deezer. Tu peux le voir ici. Nous devons créer une erreur. Une façon est d'accéder à la propriété "undefined"

Nous devons créer un bouton qui appelle console.log с utilisateur.email. Après cette action, nous devrions recevoir un message d'erreur : TypeError non intercepté (impossible de lire la propriété à partir d'undefined email) en raison de l'absence d'un objet utilisateur. Vous pouvez aussi utiliser exception javascript.

<button type="button" onClick={() => console.log(user.email)}>   
  Test Error button 
</button>

L'ensemble du conteneur ressemble à ceci :

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

const Search = Input.Search;

const mapState = state => ({
  list: state.root.list,
  loading: state.root.loading
});

const mapDispatch = {
  getList
};

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

    Sentry.init({
      dsn: "https://[email protected]/1417586",
    });
  }

  componentDidCatch(error, errorInfo) {
    Sentry.withScope(scope => {
      Object.keys(errorInfo).forEach(key => {
        scope.setExtra(key, errorInfo[key]);
      });
      Sentry.captureException(error);
    });
  }
  render() {
    const { list, loading, getList } = this.props;
    const user = undefined;
    return (
      <div className="App">
        <button
          type="button"
          onClick={() => console.log(user.email)}
        >
          test error1
        </button>
        <div onClick={() => Sentry.showReportDialog()}>Report feedback1</div>
        <h1>Music Finder</h1>
        <br />
        <Search onSearch={value => getList(value)} enterButton />
        {loading && <Skeleton avatar title={false} loading={true} active />}
        {!loading && (
          <List
            itemLayout="horizontal"
            dataSource={list}
            locale={{ emptyText: <div /> }}
            renderItem={item => (
              <List.Item>
                <List.Item.Meta
                  avatar={<Avatar src={item.artist.picture} />}
                  title={item.title}
                  description={item.artist.name}
                />
              </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

Whoo Hoo!

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

Les messages ont l'air mauvais. Bien sûr, nous avons vu des messages d'erreur sans comprendre où se trouvait ce code. 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 ce message beaucoup plus long que prévu.

Vous pouvez étudier ce sujet ici. Si cet article vous intéresse, Dmitri Nozhenko publiera la deuxième partie sur l'intégration de la carte source. Alors cliquez sur plus de likes et abonnez-vous à Dmitri Nozhenkoà ne pas manquer la deuxième partie.

5. Utilisation Sentinelle avec point final API

D'ACCORD. Nous avons couvert l'exception javascript dans les paragraphes précédents. Cependant, que fait-on des erreurs XHR ?

Sentry a également une gestion des erreurs personnalisée. Je l'ai utilisé pour le suivi des bogues de l'api.

Sentry.captureException(err)

Vous pouvez personnaliser le nom du bogue, le niveau, ajouter des données, des données utilisateur uniques via votre application, votre 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": "[email protected]"})
          .setLevel("Error")
      );
      return Sentry.captureException(err);
    }

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

Je voudrais utiliser une fonction générique pour l'API catch.

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(); - If you want get users feedback on error
  return Sentry.captureException(error);
};

Importez cette fonction dans l'appel 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 :

• définir le niveau permet d'insérer une erreur de niveau dans le tableau de bord sentinelle. Il a des propriétés - 'fatal', 'error', 'warning', 'log', 'info, 'debug', 'critical').
• définirUtilisateur aide à enregistrer toutes les données de l'utilisateur (identifiant, adresse e-mail, plan de paiement, etc.).
• définirExtra vous permet de définir toutes les données dont vous avez besoin, par exemple, un magasin.

Si vous voulez des commentaires d'utilisateurs sur un bogue, 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 télégramme par Sentinelle

Source: habr.com