🥇Seguimiento de errores en aplicaciones React con Sentry

Hoy les hablaré sobre el seguimiento de errores en tiempo real en aplicaciones React. La interfaz de usuario generalmente no se utiliza para el seguimiento de errores. Algunas empresas suelen posponer el seguimiento, regresando a ello después de la documentación, pruebas y demás. Sin embargo, si puedes mejorar tu producto, ¡hazlo!

1. ¿Por qué necesitas Sentry?

Supongo que estás interesado en el seguimiento de errores en el proceso de producción.

¿Crees que eso es insuficiente?

Bien, veamos los detalles.

Principales razones para que los desarrolladores usen Sentry:

Permite eliminar riesgos al desplegar código con errores
Ayuda al equipo de QA en la prueba del código
Obtención de notificaciones rápidas sobre problemas
Posibilidad de corregir errores rápidamente
Obtener una visualización clara de los errores en el panel de administración
Clasificación de errores por segmentos de usuario / navegador

Principales razones para el CEO / Líder del proyecto

Ahorro de costos (Sentry se puede instalar en tus servidores)
Obtención de comentarios de los usuarios
Comprensión de lo que está mal con tu proyecto en tiempo real
Entender cuántos problemas tienen las personas con tu aplicación
Ayuda a identificar los lugares donde tus desarrolladores cometieron errores

Creo que los desarrolladores estarían particularmente interesados en este artículo. También puedes usar esta lista de razones para convencer a la gerencia de integrar Sentry.

Cuidado con el último punto en la lista para los negocios.

¿Ya estás interesado?

¿Qué es Sentry?

Sentry es una aplicación de seguimiento de errores de código abierto que ayuda a los desarrolladores a monitorear y corregir fallos en tiempo real. No olvides que la aplicación también mejora la eficiencia y la experiencia del usuario. Sentry es compatible con JavaScript, Node, Python, PHP, Ruby, Java y otros lenguajes de programación.

2. Inicia sesión y crea un proyecto

Abre tu cuenta de Sentry. Es posible que debas iniciar sesión. (Ten en cuenta que Sentry se puede instalar en tus servidores)
El siguiente paso es crear un proyecto
Elige tu lenguaje de la lista. (Vamos a seleccionar React. Haz clic en 'Crear proyecto')

Configura tu aplicación. A continuación, puedes ver un ejemplo básico de cómo integrar Sentry en un contenedor:

import * as Sentry from '@sentry/browser';
// Sentry.init({
//  dsn: "<https:>"
// });
// debería haberse llamado antes de usarlo aquí
// idealmente incluso antes de renderizar tu aplicación react 

class ExampleBoundary extends Component {
    constructor(props) {
        super(props);
        this.state = { error: null };
    }

    componentDidCatch(error, errorInfo) {
      this.setState({ error });
      Sentry.withScope(scope =&gt; {
        Object.keys(errorInfo).forEach(key =&gt; {
          scope.setExtra(key, errorInfo[key]);
        });
        Sentry.captureException(error);
      });
    }

    render() {
        if (this.state.error) {
            //renderizar UI de respaldo
            return (
              <a onclick="{()" > Sentry.showReportDialog()}&gt;Reportar feedback</a>
            );
        } else {
            //cuando no hay error, renderizar hijos sin cambios
            return this.props.children;
        }
    }
}

Sentry tiene un asistente útil que te ayudará a entender qué debes hacer a continuación. Puedes seguir los siguientes pasos. Quiero mostrarte cómo crear tu primer controlador de errores. ¡Genial, hemos creado el proyecto! Pasemos al siguiente paso.

3. Integración de React y Sentry

Debes instalar el paquete npm en tu proyecto.

npm i @sentry/browser

Inicializa Sentry en tu contenedor:

Sentry.init({
 // dsn: #dsnUrl,
});

El DSN se encuentra en Proyectos -> Configuración -> Claves del cliente. Puedes encontrar las claves del 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. Rastreo del primer error

Por ejemplo, utilicé una simple aplicación musical con API de Deezer. Puedes verlo. aquí. Necesitamos crear un error. Una forma de hacerlo es accediendo a una propiedad "undefined".

Debemos crear un botón que llame a console.log con user.email. Después de esta acción, deberíamos recibir un mensaje de error: Uncaught TypeError (no se puede leer la propiedad de undefined correo electrónico) debido a la falta del objeto usuario. También puedes utilizar la excepción de Javascript.

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 =&gt; ({
  list: state.root.list,
  loading: state.root.loading
});

const mapDispatch = {
  getList
};

class Container extends Component {
  constructor(props) {
    super(props);

    Sentry.init({
      dsn: "https:\/\/fc0edcf6927a4397855797a033f04085@sentry.io\/1417586",
    });
  }

  componentDidCatch(error, errorInfo) {
    Sentry.withScope(scope =&gt; {
      Object.keys(errorInfo).forEach(key =&gt; {
        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)}
        &gt;
          prueba error1
        </button>
        <div onclick="{()" > Sentry.showReportDialog()}&gt;Informar retroalimentación1</div>
        <h1>Buscador de Música</h1>
        <br />
        <search onsearch="{value" > getList(value)} enterButton \/&gt;
        {loading &amp;&amp; <skeleton avatar title="{false}" loading="{true}" active />}
        {!loading &amp;&amp; (
          <list
            itemlayout="horizontal"
            datasource="{list}"
            locale="{{" emptytext: <div /> }}
            renderItem={item =&gt; (
              <List.Item>
                &lt;List.Item.Meta
                  avatar={<avatar src="{item.artist.picture}" />}
                  title={item.title}
                  description={item.artist.name}
                \/&gt;
              </List.Item>
            )}
          />
        )}
      </div>
    );
  }
}

export default connect(
  mapState,
  mapDispatch
)(Container);

Después de integrar este botón, deberías probarlo en el navegador.

Tenemos nuestro primer error

¡Quién lo diría!

Si haces clic en el encabezado del error, verás el rastreo de la pila.

Los mensajes se ven mal. Por supuesto, hemos visto mensajes de error sin entender dónde está este código. Por defecto se trata del mapa fuente en ReactJS, ya que no están configurados.

También me gustaría proporcionar instrucciones sobre cómo configurar el mapa fuente, pero eso haría que este artículo fuera mucho más largo de lo que planeé.

Puedes explorar este tema aquí. Si te interesa este artículo, Dmitry Nozhenko publicará la segunda parte sobre la integración del mapa fuente. Así que da más 'me gusta' y suscríbete a Dmitry Nozhenko, para no perderte la segunda parte.

5. Uso Sentry con el endpoint API

Está bien. Hemos cubierto excepciones de javascript en los puntos anteriores. Sin embargo, ¿qué haremos con los errores de XHR?

Sentry también tiene manejo de errores personalizado. Lo he utilizado para rastrear errores de API.

Sentry.captureException(err)

Puedes configurar el nombre del error, el nivel, añadir datos, datos de usuario únicos utilizando tu 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": "john.doe@example.com"})
          .setLevel("Error")
      );
      return Sentry.captureException(err);
    }

    if (response) {
      return dispatch(setList(response.body.data));
    }
  });

Me gustaría usar una función común para el catch de API.

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(); - Si deseas obtener comentarios de los usuarios sobre el error
  return Sentry.captureException(error);
};

Importa 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));
      }
    });
};

Vamos a revisar los métodos:

setLevel te permite insertar un error de nivel en el panel de control de Sentry. Tiene las propiedades: ‘fatal’, ‘error’, ‘warning’, ‘log’, ‘info’, ‘debug’, ‘critical’.
setUser ayuda a guardar cualquier dato de usuario (id, dirección de correo electrónico, plan de pago, etc.).
setExtra te permite establecer cualquier dato que necesites, como la tienda.

Si deseas obtener comentarios de los usuarios sobre el error, deberías usar la función showReportDialog.