Categories
Uncategorized

Reagire Gestione degli errori e reporting con l’errore al contorno e Sentry

TheMummichogblog è un partecipante al Amazon Services LLC Associates programma, un programma di affiliazione pubblicitario progettato per fornire un mezzo per siti per guadagnare tariffe pubblicitarie con la pubblicità e il link al amazon.com. Amazon, il logo di Amazon, AmazonSupply, e il logo AmazonSupply sono marchi di Amazon.com, Inc. o delle sue affiliate.

Reagire Gestione degli errori e reporting con l’errore al contorno e Sentry
14 min leggere
Reagire, JavaScript, Strumenti
Condividere su Twitter o LinkedIn
Con Smashing Newsletter, ci si sente sempre a casa. Un gatto con le pantofole di lettura l’edizione newsletter.
Smashing Newsletter
Ogni secondo Martedì, inviamo una newsletter con le tecniche utili su front-end e UX. Iscriviti e Get Smart Interface Design Liste di controllo PDF nella tua casella di posta.

Il vostro (smashing) e-mail
Iscriviti →
Costruire in-demand competenze
Costruire in-demand competenze
Partecipa web.dev DIRETTA
Partecipa web.dev DIRETTA
In questo articolo, esploreremo il concetto di confini di errore in un Reagire applicazione. Lavoreremo attraverso un esempio app per vedere come possiamo usare i confini di errore per offrire una migliore esperienza app. Infine, ci integriamo Sentry nel nostro perimetro di errore per la segnalazione degli errori in tempo reale.
In questo articolo, vedremo i confini di errore nel reagire. Impareremo che cosa sono e come utilizzarli per fornire una migliore esperienza utente, anche quando qualcosa si rompe nella nostra applicazione. Impareremo anche come integrare con Sentry per il monitoraggio in tempo reale l’errore.

--------------------------------------------------------------------------------------------------



Perciò chiunque ascolta queste mie parole e le mette in pratica, è simile a un uomo saggio che ha costruito la sua casa sulla roccia.

----------------------------------------------------------------------------------------------

Questo tutorial è rivolto a Reagire sviluppatori di ogni livello che vuole iniziare a utilizzare i limiti di errore nelle loro applicazioni reagire.

L’unico prerequisito è che avete una certa familiarità con React componenti di classe.

Sarò utilizzando filato come il mio gestore di pacchetti per questo progetto. Troverete le istruzioni di installazione per il sistema operativo specifico qui.

Che cosa è un boundary error e perché ne abbiamo bisogno?
Un quadro, si dice, vale più di mille parole. Per questo motivo, mi piacerebbe parlare di confini errore utilizzando – avete indovinato – immagini.

L’illustrazione seguente mostra l’albero componente di un semplice React app. Esso ha una testata, una barra laterale a sinistra, e il componente principale, ognuno dei quali è avvolto da una radice componente.

Un esempio reagire albero componente
albero dei componenti. (Anteprima ingrandita)
Su rendendo questi componenti, arriviamo a qualcosa che assomiglia a l’immagine qui sotto.

vista renderizzata del precedente albero componente
App di rendering. (Anteprima ingrandita)
In un mondo ideale, ci si aspetterebbe di vedere l’applicazione reso questo modo ogni singola volta. Ma, purtroppo, viviamo in un mondo non ideale. Problemi, (bug), possono emergere nel, backend, fine frontend dello sviluppatore, e mille altri fini. Il problema potrebbe accadere in uno dei nostri tre componenti di cui sopra. Quando questo accade, la nostra applicazione bello messo crolla come un castello di carte.

Reagire incoraggia a pensare in termini di componenti. Componendo più componenti più piccoli è meglio che avere un singolo componente gigante. Lavorando in questo modo ci aiuta a pensare la nostra applicazione in unità semplici. Ma a parte questo, non sarà bello se potessimo contenere gli eventuali errori che potrebbero accadere in uno qualsiasi dei componenti? Perché un guasto in un singolo componente deve far crollare tutta la casa?

moduli web sono al centro di ogni interazione significativa, quindi sono la pena di ottenere una maniglia ferma su. Patterns Incontra Adam Argento maschera, una guida pratica per la progettazione e le forme di costruzione per il web.

A proposito del libro ↬
Pannello caratteristica
Nei primi giorni di Reagire, questo è stato molto il caso. E peggio, a volte non si poteva neanche a capire quale fosse il problema. Il repository React su Github ha alcuni di tali errori notevoli qui, qui, e qui.

Reagire 16 è venuto in soccorso con il concetto di “confine errore”. L’idea è semplice. Erigere un recinto intorno a un componente per mantenere ogni incendio in tale componente di uscire.

L’illustrazione seguente mostra un albero con una componente avvolgimento componente del componente. Si noti che abbiamo potuto certamente avvolgere gli altri componenti in un contorno di errore se volevamo. Potremmo anche avvolgere il componente in un limite di errore.

albero Componente con contorno di errore: Un esempio Reagire albero componente con un componente di confine errore.
albero Componente con limite di errore. (Anteprima ingrandita)
Il contorno rosso nella figura sottostante rappresenta il confine di errore quando l’applicazione è reso.

vista renderizzata del precedente albero componente, con contorno di errore
App reso con limite di errore. (Anteprima ingrandita)
Come abbiamo discusso in precedenza, questa linea rossa continua a eventuali errori che si verificano nel componente dalla fuoriuscita e crash entrambi i e componenti. Questo è il motivo per cui abbiamo bisogno di un limite di errore.

Ora che abbiamo una comprensione concettuale di un confine errore, diamo ora entrare in aspetti tecnici.

Che cosa rende un componente Un boundary error?
Come possiamo vedere dal nostro albero dei componenti, il confine errore stesso è un Reagire componente. Secondo la documentazione,

Un componente di classe diventa un confine di errore se definisce uno (o entrambi) dei metodi del ciclo di vita statica getDerivedStateFromError () o componentDidCatch ().
Ci sono due cose da notare qui. In primo luogo, soltanto un elemento classe può essere utilizzato come un confine errore. Anche se si sta scrivendo tutti i componenti come la funzione, si devono ancora fare uso di un componente di classe, se si vuole avere un limite di errore. In secondo luogo, deve definire uno (o entrambi) di getDerivedStateFromError statico () o componentDidCatch (). Quali uno (s) si definisce dipende da ciò che si vuole realizzare con il vostro confine errore.

Funzioni di un boundary error
Un confine errore non è qualche muro muto il cui unico scopo nella vita è quello di mantenere un fuoco in. Limiti di errore fare il lavoro vero e proprio. Per cominciare, catturano errori JavaScript. Essi possono anche registrare quegli errori, e visualizzare un’interfaccia utente di ripiego. Andiamo su ciascuno di \ queste funzioni una dopo l’altra.

Rilevare gli errori JavaScript
Quando un errore viene generato all’interno di un componente, il confine di errore è la prima linea di difesa. Nel nostro ultimo esempio, se si verifica un errore durante il rendering del componente, l’errore catture di confine questo errore e ne impedisce la diffusione verso l’esterno.

LOGS quegli errori
Questo è del tutto facoltativo. Si poteva cogliere l’errore senza effettuare l’accesso esso. Spetta a voi. Si può fare quello che vuoi con gli errori gettati. li Log, salvarli, inviare loro da qualche parte, mostrarle ai tuoi utenti (davvero non si vuole fare questo). Tocca a voi.

Ma per ottenere l’accesso agli errori è necessario definire il metodo del ciclo di vita componentDidCatch ().

Render Un FALLBACK UI
Questo, come la registrazione degli errori, è del tutto facoltativo. Ma immaginate avete avuto alcuni ospiti importanti, e l’alimentazione era di andare fuori. Sono sicuro che non voglio i vostri ospiti brancolare nel buio, così si inventa una tecnologia per illuminare le candele istantaneamente. Magico, hmm. Bene, gli utenti sono ospiti importanti, e si desidera offrire loro la migliore esperienza in tutte le situazioni. È possibile rendere un interfaccia utente fallback con getDerivedStateFromError statico () dopo un errore è stato gettato.

E ‘importante notare che i confini di errore non cattura gli errori per le seguenti situazioni:

Gli errori all’interno gestori di eventi.
Errori nel codice asincrono (ad esempio SetTimeout o requestAnimationFrame callback).
Gli errori che si verificano quando si sta facendo un po ‘il rendering lato server.
Gli errori vengono gettati nel confine errore stesso (piuttosto che i suoi figli). Si potrebbe avere un altro errore cattura boundary questo errore, però.
Lavorare con i confini di errore
Vediamo ora tuffo nel nostro editor di codice. Per seguire, è necessario clonare il repo. Dopo aver clonato repository, controllare il ramo 01-iniziale-setup. Una volta fatto ciò, eseguire i seguenti comandi per avviare l’applicazione.

# Installare le dipendenze di progetto
fILATO installare

# Avviare il server
inizio filato
copia
Una volta lanciato, l’applicazione rende a quello che abbiamo nella foto qui sotto.

L’applicazione di avviamento in esecuzione nel browser
vista del browser di avviamento app. (Anteprima ingrandita)
L’applicazione attualmente ha un’intestazione e due colonne. Cliccando sulle immagini mettersi in colonna di sinistra effettua una chiamata API per gli URL picsum.photos/v2/list?page=0&limit=2 e visualizza due immagini. Sulla colonna di destra, abbiamo qualche descrizione testi e due pulsanti.

Quando clicchiamo la stringa Sostituisci con pulsante di oggetto, saremo sostituire il testo { “funzione”: “Vivo in crash”}, che è stata stringata, con l’oggetto JavaScript pianura. Ciò attiverà un errore come Reagire non rende gli oggetti semplici JavaScript. Questo farà sì che l’intera pagina per dormire e andare in bianco. Dovremo aggiornare la pagina per tornare la nostra visione.

Provare per credere.

Ora aggiornare la pagina e fare clic sul pulsante Invoke gestore di eventi. Vedrete una schermata pop-up di errore, con un po ‘X nell’angolo in alto a destra. Cliccando su di esso elimina la schermata di errore e vi mostra la pagina visualizzata, senza alcuna necessità di aggiornare. In questo caso, Reagire sa ancora cosa visualizzare, anche se viene generato un errore nel gestore eventi. In un ambiente di produzione, la schermata di errore non verrà visualizzato a tutti e la pagina rimarrà intatta. Si può vedere solo che qualcosa ha sbagliato andato se si guarda nella console sviluppatore.

Uno schermo per avvertirci che un errore si è verificato in un gestore di eventi.
gestore di eventi avviso di errore. (Anteprima ingrandita)
Nota: per eseguire l’applicazione in modalità di produzione richiede l’installazione di servire a livello globale. Dopo l’installazione del server, costruire l’applicazione, e iniziare con il sotto comando.

# Costruire l’applicazione per la produzione
costruire filato

# Servire l’applicazione dalla cartella di compilazione
servire accumulo -s
copia
Dopo aver visto come Reagire manici due tipi di errori, (errori di rendering, e di errore gestore di eventi), diamo ora scrivere una componente di confine errore.

Creare un nuovo file ErrorBoundary.js all’interno della cartella src / e Costruiamo il boundary error pezzo per pezzo componente.

importazione Reagire, {Component} da ‘reagire’;
PropTypes di importazione dalla ‘prop-tipi’;

classe predefinita di esportazione ErrorBoundary estende Component {
= {Statali
errore: ”,
errorInfo: ”,
hasError: false,
};
static getDerivedStateFromError (errore) {
ritorno {hasError: true, errore};
}
componentDidCatch (errore, errorInfo) {
// eslint-disable-next-line no-console
console.log ({errore, errorInfo});
this.setState ({errorInfo});
}
render () {
// prossimo blocco di codice va qui
tornare this.props.children;
}
}
ErrorBoundary.propTypes = {
figli: PropTypes.oneOfType ([PropTypes.object, PropTypes.array]) IsRequired,.
};
copia
Definiamo entrambi i due metodi del ciclo di vita che fanno di un componente di un limite di errore. Ogni volta che si verifica un errore all’interno componente figlio del confine errore, entrambi i nostri metodi del ciclo di vita vengono attivati.

static getDerivedStateFromError () riceve l’errore e aggiorna le variabili di stato, di errore e hasError.
componentDidCatch () riceve l’errore, che rappresenta l’errore che è stato gettato e errorInfo che è un oggetto con una chiave componentStack contenente informazioni su quale componente gettato l’errore. Qui abbiamo registrato l’errore e anche aggiornare lo stato con l’errorInfo. E ‘totalmente a voi ciò che si vuole fare con questi due.
Poi nel metodo render, torniamo this.props.children, che rappresenta qualunque componente che questo errore racchiude al contorno.

Aggiungiamo l’ultimo pezzo di codice. Copiare il seguente codice e incollarlo all’interno del metodo render ().

const {hasError, errorInfo} = this.state;
if (hasError) {
ritorno (




C’è stato un errore nel caricamento di questa pagina. {‘ ‘}
style = {{cursore: ‘puntatore’, color: ‘# 0077FF’}}
onClick = {() => {
window.location.reload ();
}}
>
Ricarica questa pagina
Span> {‘ ‘}
P>
Div>



Clicca per i dettagli di errore summary>
{ErrorInfo && errorInfo.componentStack.toString ()}
Dettagli>
Div>
Div>
);
}
copia
Nel metodo render (), controlliamo se hasError è vero. Se lo è, allora rendiamo il
div> div, che è la nostra interfaccia utente di ripiego. Qui, vi mostriamo le informazioni sull’errore e la possibilità di ricaricare la pagina. Tuttavia, in un ambiente di produzione, non è consigliato per mostrare l’errore per l’utente. Qualche altro messaggio andrebbe bene.

Vediamo ora fanno uso del nostro componente ErrorBoundary. Aprire App.js, importare ErrorBoundary e rendere ColumnRight al suo interno.

# Importare il confine errore
importazione ErrorBoundary da ‘./ErrorBoundary’;

# Avvolgere la colonna di destra, con il limite di errore


ErrorBoundary>
copia
Ora cliccate su Sostituisci stringa con oggetto. Questa volta, la colonna di destra si blocca e viene visualizzata l’interfaccia utente di ripiego. Stiamo mostrando un rapporto dettagliato su dove è accaduto l’errore. Vediamo anche il log degli errori nella console sviluppatore.

Una vista di un confine di errore che mostra un’interfaccia utente di ripiego.
Vista del confine errore in azione. (Anteprima ingrandita)
Possiamo vedere che rimane tutto il resto a posto. Clicca sulle immagini di confermarle che ancora funziona come previsto.

A questo punto, vorrei ricordare che con i confini di errore, si può andare come granulari come si desidera. Ciò significa che è possibile utilizzare in quantità necessaria. Si potrebbe anche avere più limiti di errore in un unico componente.

Con la nostra attuale uso di boundary error, cliccando Sostituire stringa con oggetto si blocca l’intera colonna di destra. Vediamo come possiamo migliorare su questo.

Aprite src / colonne / ColumnRight.js, importazione ErrorBoundary e rendere la seconda

blocco al suo interno. Questo è il punto che si blocca il componente.

# Importare il componente
importazione ErrorBoundary da ‘../ErrorBoundary’;

# Rendere il comma che sbaglia al suo interno.


Facendo clic su questo pulsante si sostituire l’oggetto in stringa, {‘ ‘}
{text} code>, con l’oggetto originale. Questo si tradurrà in un
Errore di rendering.
P>
ErrorBoundary>
copia
Ora cliccate su Sostituisci stringa con oggetto.

Guarda di app con un miglioramento rispetto l’uso del nostro confine errore.
Migliorata errore di utilizzo di confine. (Anteprima ingrandita)
Questa volta, abbiamo ancora la maggior parte della pagina intatta. Solo il secondo comma è sostituito con la nostra interfaccia utente fallback.

Clicca intorno per assicurarsi che tutto il resto funziona.

Se si desidera controllare il mio codice a questo punto si dovrebbe verificare il ramo 02-creare-EB.

Nel caso in cui vi state chiedendo se tutta questa cosa errore di confine è fresco, mi permetta di mostrare ciò che ho catturato su Github pochi giorni fa. Guardate il contorno rosso.

Una vista di un messaggio di errore su Github, con qualcosa che assomiglia ad un boundary error.
schermata di errore su Github. (Anteprima ingrandita)
Io non sono certo di quello che sta succedendo qui, ma sembra certo, come un confine errore.

i confini di errore sono cool, ma non vogliamo errori in primo luogo. Quindi, abbiamo bisogno di monitorare gli errori che si verificano in modo che possiamo avere una migliore idea di come risolverli. In questa sezione, impareremo come Sentry ci può aiutare in questo senso.

Integrazione con Sentry
Come ho aperto la home page Sentry durante la scrittura di questa linea, sono stato accolto da questo messaggio.

errori del software sono inevitabili. Il caos non è.
Sentry fornisce self-hosted e monitoraggio degli errori basata su cloud che aiuta tutti i team di sviluppo software scoprire, triage, e gli errori di priorità ai in tempo reale.
Sentry è un servizio di segnalazione degli errori commerciale. Ci sono molte altre aziende che forniscono servizi simili. La mia scelta di Sentry per questo articolo è perché ha un piano di sviluppo gratuito che mi permette di accedo fino a 5.000 eventi al mese in tutti i miei progetti (docs pricing). Un evento è un rapporto di incidente (noto anche come un’eccezione o errore). Per questo tutorial, ci sarà fare uso del piano di sviluppo gratuito.

È possibile integrare Sentry con un sacco di framework web. Andiamo oltre i passi per integrarlo nel nostro progetto reagire.

Visita il sito web Sentry e creare un account o Login se ne avete già uno.
Clicca su progetti nella navigazione a sinistra. Quindi, fare clic su Crea progetto per avviare un nuovo progetto.
In Scegliere una piattaforma, selezionate Reagire.
In Imposta le impostazioni degli avvisi di default Avviso controllo me su ogni nuovo numero.
Lascia la tua nome di un progetto e fare clic su Crea progetto. Ciò creerà il progetto e reindirizzare l’utente verso la pagina di configurazione.
Diamo installare il browser SDK Sentry.

# Installare Sentry
filato add @ sentinella / navigatore
copia
Nella pagina di configurazione, copiare il codice di inizializzazione del browser SDK e incollarlo nel file index.js.

import * come Sentry da ‘@ Sentry / navigatore’;

# Inizializza con Data Source Name (DSN)
Sentry.init ({DSN: ‘DSN-string’});
copia
E questo è sufficiente per Sentry per iniziare l’invio di avvisi di errore. Si dice nella documentazione,

Nota: Di per sé, @ Sentry / navigatore segnalerà eventuali eccezioni non gestite fanno innescati dalla vostra applicazione.

Clicca su Got it! Portami al flusso problema per procedere alla questioni cruscotto. Ora tornare alla vostra applicazione nel browser e fare clic sui pulsanti rossi per gettare un po ‘di errore. Si dovrebbe ricevere e-mail per ogni errore (A volte i messaggi di posta elettronica sono in ritardo). Aggiorna il tuo questioni dashboard per visualizzare gli errori.

Sentry problemi cruscotto che mostra la lista degli eventi di errore.
Sentry problemi cruscotto. (Anteprima ingrandita)
Il cruscotto Sentry fornisce un sacco di informazioni sull’errore che riceve. È possibile visualizzare informazioni come un grafico della frequenza di occorrenza di ciascun tipo di evento di errore. È inoltre possibile assegnare ad ogni errore di un membro del team. C’è un sacco di informazioni. Non prendere un po ‘di tempo per esplorare loro di vedere ciò che è utile a voi.

È possibile fare clic su ogni numero per visualizzare informazioni più dettagliate sull’evento errore.

Ora usiamo Sentry per segnalare gli errori che vengono catturati dal nostro confine errore. Aprire ErrorBoundary.js e aggiornare i seguenti pezzi di codice.

# Import Sentry
import * come Sentry da ‘@ sentinella / navigatore’

# Aggiungi eventId a stato
= {Statali
errore: ”,
eventId: ”, // aggiungere questo allo stato
errorInfo: ”,
hasError: false,
};

# Aggiornamento componentDidCatch
componentDidCatch (errore, errorInfo) {
// eslint-disable-next-line no-console
console.log ({errore, errorInfo});
Sentry.withScope ((campo di applicazione) => {
scope.setExtras (errorInfo);
const eventId = Sentry.captureException (errore);
this.setState ({eventId, errorInfo});
});
}
copia
Con questa impostazione, Sentry manda tutti gli errori catturate dal nostro confine errore al nostro cruscotto problema utilizzando il metodo Sentry.captureException.

Sentry ci dà anche uno strumento per raccogliere il feedback degli utenti. Aggiungiamo il pulsante di feedback come parte della nostra fallback interfaccia utente all’interno del nostro confine errore.

Aprire ErrorBoundary.js e aggiungere il pulsante di feedback subito dopo il div con un className di carta-corpo. Si potrebbe inserire questo tasto qualsiasi.



Div>

# Aggiungere il pulsante Sentry
className = “bg-primaria text-light”
onClick = {() =>
Sentry.showReportDialog ({eventId: this.state.eventId})
}
>
rapporto di feedback

copia
Ora, ogni volta che la nostra interfaccia utente fallback è reso, viene visualizzato il pulsante di feedback report. Facendo clic su questo pulsante si apre una finestra di dialogo che l’utente può riempire di fornirci un feedback.

Sentry dialogo con modulo di feedback
modulo di feedback Sentry. (Anteprima ingrandita)
Vai avanti e attivare un errore, quindi, compilare e inviare il modulo di feedback. Ora vai alla tua dashboard Sentry e cliccare sui commenti degli utenti nella navigazione a sinistra. Si dovrebbe vedere il tuo feedback riportati.

il feedback Sentry che mostra l’elenco dei feedback degli utenti.
cruscotto risposte sentinella. (Anteprima ingrandita)
Attualmente, otteniamo gli avvisi per ogni errore, anche quelle che avvengono durante lo sviluppo. Questo tende a intasare il nostro flusso problema. Diamo riportano solo gli errori che si verificano nella produzione.

Sulla navigazione a sinistra fare clic su Impostazioni. Sotto il menu dell’organizzazione, fare clic su Progetti. In tale elenco, clicca sul progetto di confine errore. Da Impostazioni progetto sul lato sinistro, cliccare su Filtri in ingresso. Se vuoi filtrare gli eventi provenienti da localhost e abilitarlo. Questo è solo una delle numerose configurazioni che sono disponibili in sentinella. Vi incoraggio a dare un’occhiata in giro per vedere quello che potrebbe essere utile per il vostro progetto.

Se desideri dare un’occhiata al mio codice, il ramo corrispondente nel mio repo è 03-integrazione-sentinella.

Conclusione
Se non siete stati utilizzando i contorni di errore nella vostra Reagire app, immediatamente si dovrebbe aggiungere uno al livello superiore della vostra applicazione. Inoltre, vi incoraggio a integrare un servizio di segnalazione degli errori nel progetto. Abbiamo visto quanto sia facile per iniziare con Sentry gratuitamente.

La versione finale dell’app è ospitato su Netlify.

www.smashingmagazine.com/2020/06/react-error-handling-reporting-error-boundary-sentry/

Amazon e il logo di Amazon sono marchi di Amazon.com, Inc., o delle sue affiliate.