Avui us explicaré el seguiment d'errors en temps real en una aplicació React. L'aplicació frontal no s'utilitza normalment per al seguiment d'errors. Algunes empreses sovint deixen de banda el seguiment d'errors i hi tornen després de la documentació, les proves, etc. Tanmateix, si podeu canviar el vostre producte per millorar, feu-ho!
1. Per què necessites Sentry?
Suposo que estàs interessat en el seguiment d'errors durant la producció.
Creus que això no és suficient?
D'acord, mirem els detalls.
Principals raons per utilitzar Sentry per a desenvolupadors:
- Us permet desfer-vos dels riscos en desplegar codi amb errors
- Ajuda al control de qualitat en les proves de codi
- Obteniu notificacions ràpides de problemes
- Capacitat per solucionar errors ràpidament
- Obtenir una visualització còmoda dels errors al tauler d'administració
- Ordena els errors per segment d'usuari/navegador
Principals raons del projecte CEO/Lead
- Estalvieu diners (Sentry es pot instal·lar als vostres servidors)
- Obteniu comentaris dels usuaris
- Comprendre què passa amb el vostre projecte en temps real
- Comprendre el nombre de problemes que tenen les persones amb la vostra aplicació
- Ajuda a trobar llocs on els teus desenvolupadors s'han equivocat
Crec que els desenvolupadors estarien interessats en aquest article en primer lloc. També podeu utilitzar aquesta llista de motius per convèncer el vostre cap perquè integri Sentry.
Aneu amb compte amb l'últim element de la llista d'empreses.
Ja estàs interessat?
Què és Sentry?
Sentry és una aplicació de seguiment d'errors de codi obert que ajuda els desenvolupadors a fer un seguiment i solucionar els errors en temps real. No oblideu que l'aplicació també us permet augmentar l'eficiència i millorar l'experiència de l'usuari. Sentry és compatible amb JavaScript, Node, Python, PHP, Ruby, Java i altres llenguatges de programació.
2. Inicieu sessió i creeu un projecte
- Obriu el vostre compte de Sentry. És possible que hàgiu d'iniciar la sessió. (Tingueu en compte que Sentry es pot instal·lar als vostres servidors)
- El següent pas és crear un projecte
- Seleccioneu el vostre idioma de la llista. (Anem a triar Reaccionar. Feu clic a "Crear projecte")
Configura la teva aplicació. Podeu veure un exemple bàsic de com integrar Sentry en un contenidor a continuació:
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 té un assistent útil que us ajudarà a entendre què heu de fer a continuació. Podeu seguir els passos següents. Vull mostrar-vos com crear el vostre primer gestor d'errors. Genial, hem creat un projecte! Passem al següent pas
3. Integració de React i Sentry
Heu d'instal·lar el paquet npm al vostre projecte.
npm i @sentry/browserInicialitza Sentry al teu contenidor:
Sentry.init({
// dsn: #dsnUrl,
});El DSN es troba a Projectes -> Configuració -> Claus de client. Podeu trobar les claus de client a la barra de cerca.
componentDidCatch(error, errorInfo) {
Sentry.withScope(scope => {
Object.keys(errorInfo).forEach(key => {
scope.setExtra(key, errorInfo[key]);
});
Sentry.captureException(error);
});
}4. Seguiment del primer error
Per exemple, vaig utilitzar una aplicació de música senzilla amb l'API Deezer. Ho pots veure . Hem de crear un error. Una manera és accedir a la propietat "indefinida".
Hem de crear un botó que cridi consola.log с usuari.correu electrònic. Després d'aquesta acció, hauríem de rebre un missatge d'error: TypeError no detectat (no es pot llegir la propietat de undefined email) a causa de l'absència d'un objecte d'usuari. També pots utilitzar excepció de javascript.
<button type="button" onClick={() => console.log(user.email)}>
Test Error button
</button>Tot el contenidor té aquest aspecte:
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);Després d'integrar aquest botó, hauríeu de provar-lo al navegador.
Tenim el nostre primer error
Uu-uu!
Si feu clic a l'error de la capçalera, veureu el rastre de la pila.
Els missatges tenen mala pinta. Per descomptat, hem vist missatges d'error sense entendre on és aquest codi. Per defecte es tracta del mapa font a ReactJS perquè no estan configurats.
També m'agradaria proporcionar instruccions per configurar el mapa font, però això faria que aquesta publicació sigui molt més llarga del que volia.
Podeu estudiar aquest tema . Si esteu interessats en aquest article, publicarà la segona part sobre la integració del mapa font. Així que fes clic a més m'agrada i subscriu-te per no perdre's la segona part.
5. Ús Sentinella amb punt final API
D'ACORD. Hem cobert l'excepció de javascript als paràgrafs anteriors. Tanmateix, què fem amb els errors XHR?
Sentry també té un maneig d'errors personalitzat. El vaig utilitzar per al seguiment d'errors de l'API.
Sentry.captureException(err)Podeu personalitzar el nom de l'error, el nivell, afegir dades, dades d'usuari úniques mitjançant la vostra aplicació, correu electrònic, etc.
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));
}
});M'agradaria utilitzar una funció genèrica per a 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);
};Importeu aquesta funció a la crida de l'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));
}
});
};Comprovem els mètodes:
- setLevel us permet inserir un error de nivell al tauler de control del sentinella. Té propietats: "fatal", "error", "avís", "registre", "informació", "depuració", "crític").
- setUser ajuda a desar qualsevol dada d'usuari (identificador, adreça de correu electrònic, pla de pagament, etc.).
- setExtra us permet configurar les dades que necessiteu, per exemple, una botiga.
Si voleu comentaris dels usuaris sobre un error, hauríeu d'utilitzar la funció showReportDialog.
Sentry.showReportDialog();Conclusió:
Avui hem descrit una de les maneres d'integrar Sentry en una aplicació React.
→ Xatejar de Telegram per
Font: www.habr.com