Oggi ti parlerò del tracciamento degli errori in tempo reale in un'applicazione React. Un'applicazione front-end non viene in genere utilizzata per il rilevamento degli errori. Alcune aziende spesso rimandano il rilevamento dei bug, ritornando ad esso dopo la documentazione, i test, ecc. Tuttavia, se puoi cambiare il tuo prodotto in meglio, fallo e basta!
1. Perché hai bisogno di Sentry?
Presumo che tu sia interessato a tenere traccia dei bug durante la produzione
Pensi che questo non sia sufficiente?
Ok, guardiamo i dettagli.
Principali motivi per cui gli sviluppatori utilizzano Sentry:
- Consente di evitare rischi durante la distribuzione di codice con errori
- Aiuta il QA con il test del codice
- Ricevi notifiche rapide sui problemi
- Capacità di correggere rapidamente gli errori
- Ottenere una comoda visualizzazione degli errori nel pannello di amministrazione
- Ordina gli errori per segmento utente/browser
Principali ragioni del progetto CEO/Lead
- Risparmia denaro (Sentry può essere installato sui tuoi server)
- Ottenere il feedback degli utenti
- Capire cosa c'è che non va nel tuo progetto in tempo reale
- Comprendere il numero di problemi che le persone hanno con la tua app
- Aiutarti a trovare i luoghi in cui i tuoi sviluppatori hanno commesso errori
Penso che gli sviluppatori sarebbero interessati prima a questo articolo. Puoi anche utilizzare questo elenco di motivi per convincere il tuo capo a integrare Sentry.
Fai attenzione all'ultimo elemento dell'elenco delle attività commerciali.
Sei già interessato?
Cos'è Sentry?
Sentry è un'applicazione di tracciamento dei bug open source che aiuta gli sviluppatori a monitorare e correggere gli arresti anomali in tempo reale. Non dimenticare che l'applicazione ti consente di aumentare l'efficienza e migliorare l'esperienza dell'utente. Sentry supporta JavaScript, Node, Python, PHP, Ruby, Java e altri linguaggi di programmazione.
2. Accedi e crea un progetto
- Apri il tuo account Sentinella. Potrebbe essere necessario effettuare l'accesso. (Tieni presente che Sentry può essere installato sui tuoi server)
- Il passo successivo è creare un progetto
- Seleziona la tua lingua dall'elenco. (Selezioneremo React. Fai clic su "Crea progetto")
Personalizza la tua applicazione. Di seguito è riportato un esempio di base di come integrare Sentry in un contenitore:
import * as Sentry from '@sentry/browser';
// Sentry.init({
// dsn: "<https://[email protected]/1432138>"
// });
// should have been called before using it here
// ideally before even rendering your react app
class ExampleBoundary extends Component {
constructor(props) {
super(props);
this.state = { error: null };
}
componentDidCatch(error, errorInfo) {
this.setState({ error });
Sentry.withScope(scope => {
Object.keys(errorInfo).forEach(key => {
scope.setExtra(key, errorInfo[key]);
});
Sentry.captureException(error);
});
}
render() {
if (this.state.error) {
//render fallback UI
return (
<a onClick={() => Sentry.showReportDialog()}>Report feedback</a>
);
} else {
//when there's not an error, render children untouched
return this.props.children;
}
}
}Sentry dispone di un'utile procedura guidata per aiutarti a capire cosa dovresti fare dopo. Puoi seguire questi passaggi. Voglio mostrarti come creare il tuo primo gestore di errori. Ottimo, abbiamo creato un progetto! Passiamo al passaggio successivo
3. Integrazione di React e Sentry
È necessario installare il pacchetto npm nel progetto.
npm i @sentry/browserInizializza 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. Tracciamento del primo errore
Ad esempio, ho utilizzato una semplice applicazione musicale con l'API Deezer. Puoi vederlo . Dobbiamo creare un errore. Un modo è accedere alla proprietà "non definita".
Dobbiamo creare un pulsante che chiami console.log с utente.email. Dopo questa azione dovremmo ricevere un messaggio di errore: Uncaught TypeError (impossibile leggere la proprietà da unknown email) a causa della mancanza di un oggetto utente. Puoi anche usare Eccezione Javascript.
<button type="button" onClick={() => console.log(user.email)}>
Test Error button
</button>L'intero contenitore si presenta 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 => ({
list: state.root.list,
loading: state.root.loading
});
const mapDispatch = {
getList
};
class Container extends Component {
constructor(props) {
super(props);
Sentry.init({
dsn: "https://[email protected]/1417586",
});
}
componentDidCatch(error, errorInfo) {
Sentry.withScope(scope => {
Object.keys(errorInfo).forEach(key => {
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)}
>
test error1
</button>
<div onClick={() => Sentry.showReportDialog()}>Report feedback1</div>
<h1>Music Finder</h1>
<br />
<Search onSearch={value => getList(value)} enterButton />
{loading && <Skeleton avatar title={false} loading={true} active />}
{!loading && (
<List
itemLayout="horizontal"
dataSource={list}
locale={{ emptyText: <div /> }}
renderItem={item => (
<List.Item>
<List.Item.Meta
avatar={<Avatar src={item.artist.picture} />}
title={item.title}
description={item.artist.name}
/>
</List.Item>
)}
/>
)}
</div>
);
}
}
export default connect(
mapState,
mapDispatch
)(Container);Dopo aver integrato questo pulsante, dovresti testarlo nel browser.
Abbiamo il nostro primo errore
Whoo-hoo!
Se fai clic sull'errore dell'intestazione vedrai una traccia dello stack.
I messaggi sembrano pessimi. Ovviamente abbiamo visto messaggi di errore senza capire dove sia il codice. Per impostazione predefinita stiamo parlando della mappa sorgente in ReactJS perché non sono configurate.
Vorrei anche fornire istruzioni per l'impostazione della mappa di origine, ma ciò renderebbe questo articolo molto più lungo di quanto intendessi.
Puoi studiare questo argomento . Se sei interessato a questo articolo, pubblicherà la seconda parte sull'integrazione della mappa sorgente. Quindi, premi più Mi piace e iscriviti per non perdere la seconda parte.
5. Usa Sentinella con punto finale API
OK. Abbiamo trattato l'eccezione JavaScript nei paragrafi precedenti. Tuttavia, cosa faremo in caso di errori XHR?
Sentry dispone anche di una gestione degli errori personalizzata. L'ho usato per tenere traccia degli errori API.
Sentry.captureException(err)Puoi personalizzare il nome dell'errore, il livello, aggiungere dati, dati utente univoci utilizzando l'applicazione, l'e-mail, 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": "[email protected]"})
.setLevel("Error")
);
return Sentry.captureException(err);
}
if (response) {
return dispatch(setList(response.body.data));
}
});Vorrei utilizzare una funzione generica 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(); - If you want get users feedback on error
return Sentry.captureException(error);
};Importa questa funzione nella tua 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 permette di inserire un errore di livello nella dashboard della sentinella. Ha proprietà: 'fatal', 'error', 'warning', 'log', 'info, 'debug', 'critical').
- setUser aiuta a salvare tutti i dati dell'utente (id, indirizzo email, piano di pagamento, ecc.).
- setExtra ti consente di specificare tutti i dati di cui hai bisogno, ad esempio, archiviare.
Se desideri ottenere feedback dagli utenti su un bug, dovresti utilizzare la funzione showReportDialog.
Sentry.showReportDialog();Conclusione:
Oggi abbiamo descritto un modo per integrare Sentry in un'applicazione React.
→ Chatta su Telegram di
Fonte: habr.com