🥇Monitoraggio degli errori in un'applicazione React con Sentry

Oggi parlerò di monitoraggio degli errori in tempo reale nell'applicazione React. Di solito, le applicazioni dell'interfaccia utente non sono utilizzate per il monitoraggio degli errori. Alcune aziende spesso posticipano il monitoraggio degli errori, tornando ad esso dopo la documentazione, i test e altro. Tuttavia, se puoi migliorare il tuo prodotto, fallo e basta!

1. Perché hai bisogno di Sentry?

Presumo che tu sia interessato al monitoraggio degli errori in produzione.

Pensi che non sia sufficiente?

Bene, esaminiamo i dettagli.

Le principali ragioni per utilizzare Sentry per gli sviluppatori:

Permette di eliminare i rischi durante il deployment di codice difettoso.
Supporto al QA nella fase di test del codice.
Ricezione di notifiche tempestive sui problemi.
Possibilità di correggere rapidamente gli errori.
Visualizzazione intuitiva degli errori nel pannello di amministrazione.
Classificazione degli errori per segmenti di utenti / browser.

Le ragioni principali per CEO / Project Lead.

Risparmio di denaro (Sentry può essere installato sui tuoi server).
Ricezione di feedback dagli utenti.
Comprendere cosa non va nel tuo progetto in tempo reale.
Comprendere il numero di problemi che le persone hanno con la tua applicazione
Aiuto nella ricerca dei luoghi dove i tuoi sviluppatori hanno fatto degli errori

Credo che gli sviluppatori sarebbero interessati a questo articolo in primo luogo. Puoi anche usare questo elenco di motivi per convincere i superiori a integrare Sentry.

Fai attenzione all'ultimo punto dell'elenco per le aziende.

Sei già interessato?

Che cos'è Sentry?

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

2. Accedi e crea un progetto

Apri il tuo account Sentry. Potrebbe essere necessario accedere. (Nota che Sentry può essere installato sui tuoi server)
Il passo successivo è creare un progetto
Seleziona il tuo linguaggio dalla lista. (Stiamo per scegliere React. Clicca su "Crea progetto")

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

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

Sentry ha un utile Maestro che ti guiderà su cosa fare dopo. Puoi seguire i seguenti passaggi. Vorrei mostrarti come creare il tuo primo gestore degli 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 Progetti -> Impostazioni -> Chiavi Client. 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 Deezer. Puoi vederlo qui. Dobbiamo creare un errore. Un modo per farlo è accedere a una proprietà "undefined".

Dobbiamo creare un pulsante che chiama console.log con user.email. Dopo questa azione, dovremmo ricevere un messaggio di errore: Uncaught TypeError (impossibile leggere la proprietà di undefined) email) a causa dell'assenza dell'oggetto utente. Puoi anche utilizzare 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;Report feedback1</div>
        <h1>Music Finder</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, dovrai testarlo nel browser.

Abbiamo il primo errore

Evviva!

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

I messaggi sembrano brutti. Certo, abbiamo visto messaggi di errore senza capire da dove proviene questo codice. Di default si tratta della mappa sorgente in ReactJS, poiché non è configurata.

Vorrei anche fornire istruzioni su come impostare 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, metti più mi piace e iscriviti a Dmitry Nozhenko, per non perdere la seconda parte.

5. Utilizzo Sentry con endpoint API

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

Sentry ha anche elaborazione degli errori personalizzata. L'ho usato per tracciare gli errori dell'API.

Sentry.captureException(err)

Puoi configurare il nome dell'errore, il livello, aggiungere dati, dati utente unici tramite 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 comune per 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(); - Se vuoi ricevere il feedback degli utenti su errori
  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));
      }
    });
};

Verifichiamo i metodi:

setLevel consente di inserire un errore di livello nella dashboard di Sentry. Ha proprietà come 'fatal', 'error', 'warning', 'log', 'info', 'debug', 'critical'.
setUser aiuta a mantenere qualsiasi dato utente (id, indirizzo email, piano di pagamento, ecc.).
setExtra consente di specificare qualsiasi dato di cui hai bisogno, come un negozio.

Se vuoi ricevere feedback degli utenti su un errore, dovresti usare la funzione showReportDialog.