🥇Sentry monitoraggio remoto dei bug nelle applicazioni frontend React

Stiamo esplorando l'utilizzo di Sentry con React.

Questo articolo è parte di una serie che inizia con la segnalazione degli errori di Sentry, ad esempio: Parte 1.

Implementazione di React

Per prima cosa, dobbiamo aggiungere un nuovo progetto Sentry per questa applicazione; dal sito di Sentry. In questo caso, scegliamo React.

Implementiamo di nuovo i nostri due pulsanti, Hello e Error, nell'applicazione React. Iniziamo creando la nostra applicazione di partenza:

npx create-react-app react-app

Poi importiamo il pacchetto Sentry:

yarn add @sentry/browser

e lo inizializziamo:

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,
  });
}
...

Osservazioni:

Durante lo sviluppo abbiamo altri meccanismi per monitorare i problemi, come la console, quindi attiviamo Sentry solo per le build di produzione.

Poi implementiamo i nostri pulsanti Hello e Error e li aggiungiamo all'applicazione:

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}"
        >
          Ciao
        </button>
        <div>{text}</div>
      </div>
    )
  }

  handleClick = () =&gt; {
    this.setState({
      text: 'Ciao Mondo',
    });
    try {
      throw new Error('Catturato');
    } catch (err) {
      if (process.env.NODE_ENV !== 'production') {
        return;
      }
      Sentry.captureException(err);
    }
  }
}

react-app / src / MyError.js

importa React, { Component } da '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

(translated text in it)
      <div classname="App">
        ...
        <hello />
        <myerror />
      </div>
    (translated text in it)

Problema (Mappe sorgente)

Possiamo testare Sentry con una build di produzione, digitando:

yarn build

e dalla cartella build digitiamo:

npx http-server -c-1

Il problema con cui ci confronteremo immediatamente è che i registri degli errori di Sentry si riferiscono ai numeri di riga nel pacchetto minimizzato; non molto utile.

Il servizio Sentry spiega questo estraendo le mappe sorgente per il pacchetto minimizzato dopo aver ricevuto un errore. In questo caso, ci allontaniamo da localhost (non accessibile dal servizio Sentry).

Soluzioni (Mappe sorgente)

La soluzione a questo problema consiste nell'eseguire l'applicazione da un server web pubblico. Una semplice risposta a questo è utilizzare il servizio GitHub Pages (gratuito). I passaggi per utilizzarlo di solito sono i seguenti:

Copia il contenuto della cartella build nella cartella docs nella radice del repository.
Abilita GitHub Pages nel repository (da GitHub) per utilizzare la cartella docs in master branch
Incarica le modifiche su GitHub

Nota: dopo aver capito che dovevo utilizzare create-create-app funzione homepage per avviare l'applicazione. consisteva nell'aggiungere il seguente codice a package.json:

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

La versione finale dell'applicazione in esecuzione è disponibile all'indirizzo:

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

Illustrazione degli Errori Catturati

Passiamo attraverso il clic sul pulsante Hello.

Con l'errore che appare nel seguente modo:

Osservazioni:

Questo rapporto di errore non potrebbe essere più chiaro, BRAVO.

Illustrazione degli Errori Non Catturati

Analogamente, passiamo attraverso il clic sul pulsante Error.

Con l'errore che appare nel seguente modo:

La migliore gestione degli errori non previsti (rendering)

Introduzione ai confini degli errori
Un errore JavaScript nell'interfaccia utente non deve compromettere il funzionamento dell'intera applicazione. Per affrontare questo problema per gli utenti di React, React 16 introduce un nuovo concetto di "confini degli errori".
I confini degli errori sono componenti React che catturano errori JavaScript in qualsiasi parte del proprio albero di componenti figli, registrano questi errori e visualizzano un'interfaccia utente di riserva invece dell'albero dei componenti che si è guastato. I confini degli errori catturano gli errori durante il rendering, nei metodi del ciclo di vita e nei costruttori di tutto l'albero sottostante.
…
Nuovo comportamento per errori non rilevati
Questa modifica è significativa. A partire da React 16, gli errori che non vengono catturati da alcun confine degli errori porteranno a smontare l'intero albero dei componenti React.
— Dan Abramov — Gestione degli errori in React 16

Un'importante precisazione che mi è servita del tempo prima di comprenderla è che il comportamento sopra citato funziona solo con errori generati nel metodo di rendering (o, più probabilmente, in uno dei metodi del ciclo di vita). Ad esempio, usare i confini degli errori non sarebbe servito a nulla con il nostro pulsante Error; quell'errore era nel gestore del clic.

Creiamo un esempio di errore di rendering e poi utilizziamo i confini degli errori per una gestione dell'errore più elegante.

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}"
        >
          Errore di Rendimento
        </button>
        { flag &amp;&amp; <div>{flag.busted.bogus}</div> }
      </div>
    )
  }

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

Osservazione:

Quando si preme il pulsante, React verrà visualizzato flag.busted.bogus, che genera un errore
Senza un confine degli errori, l'intero albero dei componenti verrà smontato

Poi scriviamo il nostro codice per il confine degli errori (usa il nuovo metodo del ciclo di vita componentDidCatch); questo è, fondamentalmente, un esempio presentato nell'articolo di 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>Qualcosa è andato storto.</h1>;
    }
    return this.props.children;
  }
}

Infine, utilizziamo questo componente:

react-app / src / App.js

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

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

Da questo momento in poi, premere il pulsante Render Error visualizza l'interfaccia utente di riserva e riporta l'errore a Sentry.