🥇Sentry surveillance des bugs distants dans les applications frontend React

Nous étudions l'utilisation de Sentry avec React.

Cet article fait partie d'une série qui commence par un message sur les erreurs Sentry en exemple : Partie 1.

Mise en œuvre de React

Tout d'abord, nous devons ajouter un nouveau projet Sentry pour cette application ; depuis le site de Sentry. Dans ce cas, nous choisissons React.

Nous réimplémentons nos deux boutons, Hello et Error, dans l'application React. Nous commençons par créer notre application de démarrage :

npx create-react-app react-app

Ensuite, nous importons le package Sentry :

yarn add @sentry/browser

et nous l'initialisons :

react-app / src / index.js

...
import * as Sentry from '@sentry/browser';

const RELEASE = '0.1.0';
if (process.env.NODE_ENV === 'production') {
  Sentry.init({
    dsn: 'https://303c04eac89844b5bfc908ceffc6757c@sentry.io/1289887',
    release: RELEASE,
  });
}
...

Observations :

Pendant le développement, nous avons d'autres mécanismes pour observer les problèmes, comme la console, donc nous activons Sentry uniquement pour les versions de production

Ensuite, nous implémentons nos boutons Hello et Error et les ajoutons à l'application :

react-app / src / Hello.js

import React, { Component } from 'react';
import * as Sentry from '@sentry/browser';

export default class Hello extends Component {
  state = {
    text: '',
  };
  render() {
    const { text } = this.state;
    return (
      <div>
        <button
          onclick="{this.handleClick}"
        >
          Bonjour
        </button>
        <div>{text}</div>
      </div>
    )
  }

  handleClick = () =&gt; {
    this.setState({
      text: 'Bonjour le monde',
    });
    try {
      throw new Error('Attrapé');
    } catch (err) {
      if (process.env.NODE_ENV !== 'production') {
        return;
      }
      Sentry.captureException(err);
    }
  }
}

react-app / src / MyError.js

import React, { Component } from 'react';

export default class MyError extends Component {
  render() {
    return (
      <div>
        <button
          onclick="{this.handleClick}"
        >
          Error
        </button>
      </div>
    )
  }

  handleClick = () =&gt; {
    throw new Error('Uncaught');
  }
}

react-app / src / App.js

...import Hello from './Hello';
import MyError from './MyError';

class App extends Component {
  render() {
    return (
      <div classname="App">
        ...
        <hello />
        <myerror />
      </div>
    );
  }
}

export default App;

Problème (Cartes Sources)

Nous pouvons tester Sentry avec une version de production en entrant :

yarn build

et depuis le dossier build, tapez :

npx http-server -c-1

Le problème auquel nous allons immédiatement faire face est que les enregistrements d'erreurs Sentry font référence à des numéros de lignes dans le package minifié ; ce n'est pas très utile.

Le service Sentry explique cela en tirant les cartes sources pour le package minifié après réception de l'erreur. Dans ce cas, nous courons depuis localhost (non accessible par le service Sentry).

Solutions (Cartes Sources)

La solution à ce problème consiste à exécuter l'application depuis un serveur Web public. Un moyen simple de répondre à cela est d'utiliser le service GitHub Pages (gratuit). Les étapes à suivre sont généralement les suivantes :

Copiez le contenu du dossier build dans le dossier docs dans le répertoire racine du dépôt.
Activez GitHub Pages dans le dépôt (depuis GitHub) pour utiliser le dossier docs dans master la branche
Poussez les modifications sur GitHub

Remarque: après avoir compris que je devais utiliser create-react-app la fonction homepage pour exécuter l'application. Cela a consisté à ajouter ce qui suit dans le package.json :

"homepage": "https://larkintuckerllc.github.io/hello-sentry/"

La version finale de l'application lancée est disponible à l'adresse :

https://larkintuckerllc.github.io/hello-sentry/

Illustration des Erreurs Capturées

Passons à travers l'appui sur le bouton Hello.

Avec l'erreur apparaissant comme suit :

Observations :

Ce rapport d'erreur ne pourrait pas être plus clair, BRAVO.

Illustration des Erreurs Non Capturées

De même, passons à travers l'appui sur le bouton Error.

Avec l'erreur apparaissant comme suit :

La meilleure gestion des erreurs non détectées (rendu)

Introduction aux Limites d'Erreur
Une erreur JavaScript dans la partie interface utilisateur ne doit pas interrompre le fonctionnement de l'application entière. Pour résoudre ce problème pour les utilisateurs de React, React 16 introduit un nouveau concept de "limites d'erreur".
Les limites d'erreur sont des composants React qui interceptent les erreurs JavaScript à n'importe quel endroit de leur arbre de composants enfants, enregistrent ces erreurs et affichent une interface utilisateur de secours au lieu de l'arbre de composants qui a échoué. Les limites d'erreur attrapent les erreurs pendant le rendu, dans les méthodes du cycle de vie et dans les constructeurs de tout l'arbre en dessous.
…
Un nouveau comportement pour les erreurs non détectées
Ce changement est important. À partir de React 16, les erreurs qui ne sont pas prises en charge par une limite d'erreur entraîneront le démontage de tout l'arbre de composants React.
— Dan Abramov — Gestion des Erreurs dans React 16

Une précision importante qui m'a pris un certain temps à comprendre est que le comportement susmentionné ne fonctionne qu'avec les erreurs générées dans la méthode de rendu (ou, plus probablement, dans l'une des méthodes du cycle de vie). Par exemple, l'utilisation des limites d'erreur n'apporterait aucun avantage avec notre bouton Error; cette erreur se trouvait dans le gestionnaire de clics.

Créons un exemple d'erreur de rendu, puis utilisons les limites d'erreur pour une gestion d'erreur plus élégante.

react-app / src / MyRenderError

import React, { Component } from 'react';

export default class MyRenderError extends Component {
  state = {
    flag: false,
  };
  render() {
    const { flag } = this.state;
    return (
      <div>
        <button
          onclick="{this.handleClick}"
        >
          Erreur de rendu
        </button>
        { flag &amp;&amp; <div>{flag.busted.bogus}</div> }
      </div>
    )
  }

  handleClick = () =&gt; {
    this.setState({
      flag: true,
    });
  }
}

Observation :

Lorsqu'on clique sur le bouton, React il sera affiché flag.busted.bogus, qui génère une erreur
Sans limite d'erreur, tout l'arbre de composants sera démonté.

Ensuite, nous écrivons notre code de limite d'erreur (utilisant la nouvelle méthode du cycle de vie componentDidCatch); c'est fondamentalement un exemple tiré de l'article de Dan Abramov :

react-app / src / ErrorBoundary.js

import React, { Component } from 'react';
import * as Sentry from '@sentry/browser';

export default class ErrorBoundary extends Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  componentDidCatch(err, info) {
    this.setState({ hasError: true });
    Sentry.captureException(err);
  }

  render() {
    if (this.state.hasError) {
      return <h1>Un problème est survenu.</h1>;
    }
    return this.props.children;
  }
}

Enfin, nous utilisons ce composant :

react-app / src / App.js

...
import MyRenderError from './MyRenderError';

class App extends Component {
  render() {
    return (
      <errorboundary>
        <div classname="App">
          ...
        </div>
      </errorboundary>
    );
  }
}
...

Ainsi, cliquer sur le bouton Render Error affiche l'interface utilisateur de secours et signale l'erreur à Sentry.

Fin

J'espère que cela vous a été utile.

P.S. Lien vers l'original

P.S. Chat Telegram sur Sentry https://t.me/sentry_ru

Source : habr.com

Sentry pour la surveillance à distance des bugs dans les applications frontend React