Hoy lo guiaré a través del seguimiento de errores en tiempo real en una aplicación React. La aplicación frontend no se usa normalmente para el seguimiento de errores. Algunas empresas a menudo dejan de lado el seguimiento de errores y vuelven a él después de la documentación, las pruebas, etc. Sin embargo, si puede mejorar su producto, ¡hágalo!
1. ¿Por qué necesita Sentry?
Supongo que está interesado en el seguimiento de errores durante la producción.
¿Crees que esto no es suficiente?
Bien, veamos los detalles.
Razones principales para usar Sentry para desarrolladores:
- Le permite deshacerse de los riesgos al implementar código con errores
- Ayudar al control de calidad en las pruebas de código
- Reciba notificaciones rápidas de problemas
- Capacidad para corregir errores rápidamente
- Obtener una visualización conveniente de errores en el panel de administración
- Ordenar errores por segmento de usuario/navegador
Razones principales del proyecto CEO / Lead
- Ahorre dinero (Sentry se puede instalar en sus servidores)
- Obtener comentarios de los usuarios
- Entender lo que está mal con su proyecto en tiempo real
- Comprender la cantidad de problemas que las personas tienen con su aplicación
- Ayuda para encontrar lugares donde sus desarrolladores cometieron un error
Creo que los desarrolladores estarían interesados en este artículo en primer lugar. También puede usar esta lista de razones para convencer a su jefe de que integre Sentry.
Tenga cuidado con el último elemento de la lista de negocios.
¿Ya estás interesado?
¿Qué es Centinela?
Sentry es una aplicación de seguimiento de errores de código abierto que ayuda a los desarrolladores a rastrear y solucionar fallas en tiempo real. No olvide que la aplicación también le permite aumentar la eficiencia y mejorar la experiencia del usuario. Sentry es compatible con JavaScript, Node, Python, PHP, Ruby, Java y otros lenguajes de programación.
2. Inicie sesión y cree un proyecto
- Abra su cuenta Sentry. Es posible que debas iniciar sesión. (Tenga en cuenta que Sentry se puede instalar en sus servidores)
- El siguiente paso es crear un proyecto.
- Seleccione su idioma de la lista. (Vamos a elegir React. Haga clic en "Crear proyecto")
Configura tu aplicación. Puede ver un ejemplo básico de cómo integrar Sentry en un contenedor 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 tiene un asistente útil para ayudarlo a comprender lo que debe hacer a continuación. Puede seguir los pasos a continuación. Quiero mostrarte cómo crear tu primer controlador de errores. ¡Genial, hemos creado un proyecto! Pasemos al siguiente paso
3. Integrando React y Sentry
Debe instalar el paquete npm en su proyecto.
npm i @sentry/browserInicialice Sentry en su contenedor:
Sentry.init({
// dsn: #dsnUrl,
});El DSN se encuentra en Proyectos -> Configuración -> Claves de cliente. Puede encontrar claves de cliente en la barra de búsqueda.
componentDidCatch(error, errorInfo) {
Sentry.withScope(scope => {
Object.keys(errorInfo).forEach(key => {
scope.setExtra(key, errorInfo[key]);
});
Sentry.captureException(error);
});
}4. Seguimiento del primer error
Por ejemplo, usé una aplicación de música simple con la API de Deezer. Puedes verlo . Necesitamos crear un error. Una forma es acceder a la propiedad "indefinido"
Necesitamos crear un botón que llame console.log с usuario.email. Después de esta acción, deberíamos recibir un mensaje de error: TypeError no capturado (no se puede leer la propiedad de undefined email) debido a la ausencia de un objeto de usuario. También puedes usar excepción de JavaScript.
<button type="button" onClick={() => console.log(user.email)}>
Test Error button
</button>Todo el contenedor se ve así:
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);Después de integrar este botón, debe probarlo en el navegador.
Tenemos nuestro primer error
¡Whoo-hoo!
Si hace clic en el error del encabezado, verá el seguimiento de la pila.
Los mensajes se ven mal. Por supuesto, hemos visto mensajes de error sin entender dónde está este código. De forma predeterminada, se trata del mapa de origen en ReactJS porque no están configurados.
También me gustaría proporcionar instrucciones para configurar el mapa de origen, pero eso haría que esta publicación fuera mucho más larga de lo que pretendía.
Puedes estudiar este tema. . Si te interesa este artículo, publicará la segunda parte sobre la integración del mapa fuente. Así que haz clic en más Me gusta y suscríbete a para no perderse la segunda parte.
5. Uso Sentry con punto final API
DE ACUERDO. Hemos cubierto la excepción de javascript en los párrafos anteriores. Sin embargo, ¿qué hacemos con los errores XHR?
Sentry también tiene un manejo de errores personalizado. Lo usé para el seguimiento de errores de API.
Sentry.captureException(err)Puede personalizar el nombre del error, el nivel, agregar datos, datos de usuario únicos a través de su 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));
}
});Me gustaría usar una función genérica para la 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);
};Importe esta función en la llamada 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));
}
});
};Veamos los métodos:
- establecerNivel le permite insertar un error de nivel en el panel de centinela. Tiene propiedades: 'fatal', 'error', 'advertencia', 'registro', 'información, 'depuración', 'crítico').
- establecerUsuario ayuda a guardar los datos del usuario (identificación, dirección de correo electrónico, plan de pago, etc.).
- conjuntoExtra le permite configurar cualquier dato que necesite, por ejemplo, una tienda.
Si desea comentarios de los usuarios sobre un error, debe usar la función showReportDialog.
Sentry.showReportDialog();Conclusión:
Hoy describimos una de las formas de integrar Sentry en una aplicación React.
→ Chat de Telegram por
Fuente: habr.com