🥇Surveillance à distance Sentry des bugs dans les applications frontend React

Nous explorons l'utilisation de Sentry avec React.

Cet article fait partie d'une série commençant par le signalement des erreurs Sentry à l'aide d'un exemple : Partie 1.

Implémentation de React

Nous devons d’abord ajouter un nouveau projet Sentry pour cette application ; sur le site Web de Sentry. Dans ce cas, nous choisissons React.

Nous allons réimplémenter nos deux boutons, Hello et Error, dans une application avec 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 initialisez-le:

réagir-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://[email protected]/1289887',
    release: RELEASE,
  });
}
...

Remarques :

Pendant le développement, nous disposons d'autres mécanismes pour surveiller les problèmes, tels que la console, nous n'activons donc Sentry que pour les versions de production.

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

réagir-app/src/Bonjour.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}
        >
          Hello
        </button>
        <div>{text}</div>
      </div>
    )
  }

  handleClick = () => {
    this.setState({
      text: 'Hello World',
    });
    try {
      throw new Error('Caught');
    } catch (err) {
      if (process.env.NODE_ENV !== 'production') {
        return;
      }
      Sentry.captureException(err);
    }
  }
}

réagir-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 = () => {
    throw new Error('Uncaught');
  }
}

réagir-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, entrez :

npx http-server -c-1

Le problème que nous rencontrons immédiatement est que les enregistrements d'erreurs de Sentry font référence aux numéros de ligne du lot minifié ; pas très utile.

Le service Sentry explique cela en extrayant les cartes sources du paquet réduit après avoir reçu une erreur. Dans ce cas, nous utilisons localhost (non accessible par le service Sentry).

Solutions (cartes sources)

La solution à ce problème consiste à exécuter l’application à partir d’un serveur Web public. Un simple bouton de réponse pour utiliser le service GitHub Pages (gratuit). Les étapes à suivre sont généralement les suivantes :

Copiez le contenu du dossier construire au dossier docs dans le répertoire racine du référentiel.
Allumer Pages GitHub dans le référentiel (depuis GitHub) pour utiliser le dossier docs dans maître Ветви
Transférer les modifications vers GitHub

Noter: après avoir compris ce que je dois utiliser créer-créer-une application fonction page d'accueil pour lancer l'application. Il s'agit d'ajouter ce qui suit à package.json :

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

La version finale de l'application en cours d'exécution est disponible sur :

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

Illustration de bugs capturés

Passons en revue en cliquant sur le bouton Bonjour.

Avec une erreur apparaissant comme ceci :

Remarques :

Ce rapport de bug ne pourrait pas être plus clair, BRAVO.

Illustration des erreurs non comptabilisées

De même, passons en revue le clic sur le bouton Erreur.

Avec une erreur apparaissant comme ceci :

Meilleure gestion des erreurs non comptabilisées (rendu)

Introduction des limites d'erreur

Une erreur JavaScript dans une partie de l’interface utilisateur ne devrait pas interrompre l’ensemble de l’application. Pour résoudre ce problème pour les utilisateurs de React, React 16 introduit un nouveau concept appelé « limites d'erreur ».

Les limites d'erreur sont des composants React qui détectent les erreurs JavaScript n'importe où dans leur arborescence de composants enfant, enregistrent ces erreurs et affichent une interface utilisateur de secours au lieu de l'arborescence des composants qui s'est écrasée. Les limites d'erreur détectent les erreurs lors du rendu, dans les méthodes de cycle de vie et dans les constructeurs de l'arborescence entière située en dessous d'elles.

...

Nouveau comportement pour les erreurs non détectées

Ce changement est significatif. À partir de React 16, les erreurs qui n'ont été détectées par aucune limite d'erreur entraîneront le démontage de l'intégralité de l'arborescence des composants React.

- Dan Abramov - Gestion des erreurs dans React 16

Une précision importante qui m'a pris un certain temps avant de m'en rendre compte est que le comportement ci-dessus 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 de cycle de vie). Par exemple, utiliser des limites d'erreur ne servirait à rien avec notre bouton Erreur; cette erreur était dans le gestionnaire de clics.

Créons un exemple d'erreur de rendu, puis utilisons les limites d'erreur pour gérer l'erreur avec plus d'élégance.

réagir-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}
        >
          Render Error
        </button>
        { flag && <div>{flag.busted.bogus}</div> }
      </div>
    )
  }

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

Observation:

Lorsque vous appuyez sur le bouton, Réagir sera affiché flag.busted.bogus, ce qui génère une erreur
Sans limite d'erreur, l'intégralité de l'arborescence des composants sera démontée

Ensuite, nous écrivons notre code limite d'erreur (utilise la nouvelle méthode de cycle de vie composantDidCatch); c'est essentiellement l'exemple donné dans l'article de Dan Abramov :

réagir-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>Something went wrong.</h1>;
    }
    return this.props.children;
  }
}

Finalement nous utilisons ce composant :

réagir-app/src/App.js

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

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

Cependant, cliquer sur le bouton Erreur de rendu affiche l’interface utilisateur de secours et signale une erreur à Sentry.

Achèvement

J'espère que vous avez trouvé cela utile.

PS Lien vers l'original

Chat PS Telegram via Sentry https://t.me/sentry_ru

Source: habr.com

Surveillance à distance Sentry des bugs dans les applications frontales React

Ajouter un commentaire Annuler la réponse