Hoxe falareivos sobre o seguimento de erros en tempo real nunha aplicación React. Normalmente non se usa unha aplicación front-end para o seguimento de erros. Algunhas empresas adoitan deixar o seguimento de erros, volvendo a el despois da documentación, probas, etc. Non obstante, se podes cambiar o teu produto para mellor, faino!
1. Por que necesitas Sentry?
Supoño que estás interesado en rastrexar erros durante a produción
Cres que isto non é suficiente?
Vale, vexamos os detalles.
Razóns principais para que os desenvolvedores usen Sentry:
- Permite evitar riscos ao despregar código con erros
- Axuda ao control de calidade coas probas de código
- Recibe notificacións rápidas sobre problemas
- Capacidade para corrixir erros rapidamente
- Obter unha cómoda visualización de erros no panel de administración
- Ordena os erros por segmento de usuario/navegador
Principais razóns para o proxecto CEO/Lead
- Aforra diñeiro (Sentry pódese instalar nos teus servidores)
- Recibir comentarios dos usuarios
- Comprender o que está mal no teu proxecto en tempo real
- Comprender o número de problemas que teñen as persoas coa túa aplicación
- Axúdache a atopar lugares onde os teus desenvolvedores cometeron erros
Creo que os desenvolvedores estarían interesados neste artigo primeiro. Tamén podes usar esta lista de motivos para convencer aos teus xefes de que integren Sentry.
Teña coidado co último elemento da lista de empresas.
Xa estás interesado?
Que é Sentry?
Sentry é unha aplicación de seguimento de erros de código aberto que axuda aos desenvolvedores a rastrexar e solucionar fallos en tempo real. Non esquezas que a aplicación permítelle aumentar a eficiencia e mellorar a experiencia do usuario. Sentry admite JavaScript, Node, Python, PHP, Ruby, Java e outras linguaxes de programación.
2. Inicia sesión e crea un proxecto
- Abre a túa conta de Sentry. É posible que teñas que iniciar sesión. (Ten en conta que Sentry pódese instalar nos teus servidores)
- O seguinte paso é crear un proxecto
- Seleccione o seu idioma na lista. (Imos seleccionar React. Fai clic en "Crear proxecto")
Personaliza a túa aplicación. Podes ver un exemplo básico de como integrar Sentry nun contedor a continuación:
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 ten un asistente útil para axudarche a descubrir o que debes facer a continuación. Podes seguir estes pasos. Quero amosarche como crear o teu primeiro controlador de erros. Xenial, creamos un proxecto! Pasemos ao seguinte paso
3. Integración de React e Sentry
Debes instalar o paquete npm no teu proxecto.
npm i @sentry/browserInicializa Sentry no teu contedor:
Sentry.init({
// dsn: #dsnUrl,
});O DSN atópase en Proxectos -> Configuración -> Chaves de cliente. Podes atopar as claves de cliente na barra de busca.
componentDidCatch(error, errorInfo) {
Sentry.withScope(scope => {
Object.keys(errorInfo).forEach(key => {
scope.setExtra(key, errorInfo[key]);
});
Sentry.captureException(error);
});
}4. Seguimento do primeiro erro
Por exemplo, usei unha aplicación de música sinxela coa API de Deezer. Podes velo . Necesitamos crear un erro. Unha forma é acceder á propiedade "indefinida".
Necesitamos crear un botón que chame consola.log с usuario.correo electrónico. Despois desta acción deberíamos recibir unha mensaxe de erro: TypeError non detectado (non se pode ler a propiedade de undefined email) debido a que falta un obxecto de usuario. Tamén podes usar excepción de Javascript.
<button type="button" onClick={() => console.log(user.email)}>
Test Error button
</button>Todo o recipiente ten o seguinte aspecto:
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);Despois de integrar este botón, debes probalo no navegador.
Temos o noso primeiro erro
Uuuuuuuu!
Se fai clic no erro da cabeceira, verá un rastro de pila.
As mensaxes pintan mal. Por suposto que vimos mensaxes de erro sen entender onde está o código. Por defecto estamos a falar do mapa fonte en ReactJS porque non están configurados.
Tamén me gustaría proporcionar instrucións para configurar o mapa de orixe, pero iso faría que este artigo sexa moito máis longo do que pretendía.
Podes estudar este tema . Se estás interesado neste artigo, publicará a segunda parte sobre a integración do mapa fonte. Entón, fai máis Gústame e subscríbete para non perderse a segunda parte.
5. Uso sentinela con punto final API
OK. Cubrimos a excepción de javascript nos parágrafos anteriores. Non obstante, que faremos ante os erros XHR?
Sentry tamén ten un tratamento personalizado de erros. Useino para rastrexar os erros da API.
Sentry.captureException(err)Podes personalizar o nome do erro, o nivel, engadir datos, datos únicos de usuario usando a túa aplicación, correo electrónico, 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));
}
});Gustaríame usar unha función xenérica para a API de captura.
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 esta función na túa chamada á 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));
}
});
};Imos comprobar os métodos:
- setLevel permítelle inserir un erro de nivel no panel de control. Ten propiedades: 'fatal', 'error', 'warning', 'log', 'info, 'debug', 'critical').
- setUser axuda a gardar calquera dato do usuario (identificador, enderezo de correo electrónico, plan de pago, etc.).
- setExtra permítelle especificar os datos que necesites, por exemplo, almacenar.
Se queres obter comentarios dos usuarios sobre un erro, debes usar a función showReportDialog.
Sentry.showReportDialog();Conclusión:
Hoxe describimos un xeito de integrar Sentry nunha aplicación React.
→ Chat de Telegram por
Fonte: www.habr.com