🥇Monitoraggio degli errori in un'applicazione React con Sentry

Oggi vi parlerò del monitoraggio degli errori in tempo reale nell'applicazione React. L'applicazione dell'interfaccia utente non viene generalmente utilizzata per il monitoraggio degli errori. Alcune aziende spesso rimandano il monitoraggio degli errori, tornando a esso dopo documentazione, test e altro. Tuttavia, se potete migliorare il vostro prodotto, fatelo senza esitazioni!

1. Perché avete bisogno di Sentry?

Immagino che siate interessati al monitoraggio degli errori durante la produzione.

Pensate che non sia sufficiente?

Bene, esaminiamo i dettagli.

Principali motivi per utilizzare Sentry per gli sviluppatori:

Riduce i rischi nel deploy di codice con errori.
Supporto per il QA nel testare il codice.
Ricezione di notifiche rapide sui problemi.
Possibilità di correggere rapidamente gli errori.
Visualizzazione comoda degli errori nel pannello di amministrazione.
Ordinamento degli errori per segmenti di utenti / browser.

Principali motivi per CEO / project leader.

Risparmio di denaro (Sentry può essere installato sui vostri server).
Ottenere feedback dagli utenti.
Comprendere cosa non va nel vostro progetto in tempo reale.
Comprendere quanti problemi incontrano le persone con la vostra applicazione.
Aiuto nel trovare i punti in cui i vostri sviluppatori hanno commesso errori.

Penso che gli sviluppatori sarebbero particolarmente interessati a questo articolo. Potete anche utilizzare questo elenco di motivi per convincere la direzione a integrare Sentry.

Fate attenzione all'ultimo punto della lista per le aziende.

Siete già interessati?

Cos'è Sentry?

Sentry è un'applicazione open source per il monitoraggio degli errori che aiuta gli sviluppatori a monitorare e correggere i crash in tempo reale. Non dimenticate che l'applicazione può anche migliorare l'efficienza e l'esperienza utente. Sentry supporta JavaScript, Node, Python, PHP, Ruby, Java e altri linguaggi di programmazione.

2. Accedi e crea un progetto.

Accedi al tuo account Sentry. Potrebbe essere necessario effettuare il login. (Si noti che Sentry può essere installato sui vostri server.)
Il passaggio successivo è creare un progetto.
Seleziona il tuo linguaggio dall'elenco. (Noi sceglieremo React. Clicca su 'Crea progetto.')

Configura la tua applicazione. Un esempio di base su come integrare Sentry in un contenitore è mostrato di seguito:

import * as Sentry from '@sentry/browser';
// Sentry.init({
//  dsn: "<https:>"
// });
// avrebbe dovuto essere chiamato prima di usarlo qui
// idealmente prima ancora di renderizzare la tua app 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) {
            //render fallback UI
            return (
              <a onclick="{()" > Sentry.showReportDialog()}&gt;Segnala feedback</a>
            );
        } else {
            //quando non c'è un errore, renderizza i figli senza modifiche
            return this.props.children;
        }
    }
}

Sentry ha un utile Master che ti aiuterà a capire cosa devi fare dopo. Puoi seguire i seguenti passaggi. Voglio mostrarti come creare il tuo primo gestore di errori. Ottimo, abbiamo creato il progetto! Passiamo al passo successivo

3. Integrazione di React e Sentry

Devi installare il pacchetto npm nel tuo progetto.

npm i @sentry/browser

Inizializza Sentry nel tuo contenitore:

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

Il DSN si trova in Projects -> Settings -> Client Keys. Puoi trovare le chiavi client nella barra di ricerca.

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

4. Monitoraggio del primo errore

Ad esempio, ho utilizzato una semplice applicazione musicale con l'API di Deezer. Puoi vederla qui. Dobbiamo generare un errore. Uno dei modi è accedere a una proprietà "undefined"

Dobbiamo creare un pulsante che chiama console.log con user.email. Dopo quest'azione, dovremmo ricevere un messaggio di errore: Uncaught TypeError (impossibile leggere la proprietà da undefined email) a causa dell'assenza dell'oggetto utente. Puoi anche utilizzare l'eccezione Javascript.

L'intero contenitore appare così:

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 =&gt; ({
  list: state.root.list,
  loading: state.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 { list, loading, getList } = this.props;
    const user = undefined;
    return (
      <div classname="App">
        <button
          type="button"
          onclick="{()" > console.log(user.email)}
        &gt;
          test error1
        </button>
        <div onclick="{()" > Sentry.showReportDialog()}&gt;Segnala feedback1</div>
        <h1>Cercatore di Musica</h1>
        <br />
        <search onsearch="{value" > getList(value)} enterButton \/&gt;
        {loading &amp;&amp; <skeleton avatar title="{false}" loading="{true}" active />}
        {!loading &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);

Dopo aver integrato questo pulsante, dovresti testarlo nel browser.

Abbiamo il primo errore

Whoo-hoo!

Se fai clic sull'intestazione dell'errore, vedrai il tracciamento dello stack.

I messaggi non sono buoni. Certo, abbiamo visto messaggi di errore senza capire dove si trovasse quel codice. Di default, si parla della mappa sorgente in ReactJS, poiché non sono configurate.

Vorrei anche fornire istruzioni su come configurare la mappa sorgente, ma questo renderebbe l'articolo molto più lungo di quanto avevo pianificato.

Puoi esplorare questo argomento qui. Se sei interessato a questo articolo, Dmitry Nozhenko pubblicherà la seconda parte sull'integrazione della mappa sorgente. Quindi, fai più like e iscriviti a Dmitry Nozhenko, per non perdere la seconda parte.

5. Utilizzo Sentry dell'endpoint API

Ok. Abbiamo esaminato l'eccezione Javascript nei punti precedenti. Tuttavia, cosa faremo con gli errori XHR?

Sentry ha anche una gestione degli errori personalizzata. L'ho utilizzato per monitorare gli errori dell'API.

Sentry.captureException(err)

Puoi configurare il nome dell'errore, il livello, aggiungere dati, dati utente unici utilizzando la tua applicazione, email, ecc.

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

Vorrei utilizzare una funzione globale per la cattura delle 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(); - Se vuoi ricevere il feedback degli utenti sull'errore
  return Sentry.captureException(error);
};

Importa questa funzione nella chiamata 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));
      }
    });
};

Controlliamo i metodi:

setLevel consente di inserire un errore di livello nel pannello di controllo di Sentry. Ha le proprietà - 'fatal', 'error', 'warning', 'log', 'info', 'debug', 'critical'.
setUser aiuta a memorizzare eventuali dati utente (id, indirizzo email, piano di pagamento, ecc.).
setExtra permette di specificare qualsiasi dato di cui hai bisogno, ad esempio, il negozio.

Se desideri ricevere feedback dagli utenti sull'errore, dovresti utilizzare la funzione showReportDialog.