Reaccionar manejo e informes de errores con límite de error y centinela

 

 

 

  • Creación y mantenimiento de sistemas de diseño exitosos, con Brad Fost
  • ¡Registro!

  • Índice
    1. ¿Qué es un límite de error y por qué lo necesitamos?
    2. ¿Qué hace que un componente sea un límite de error?
    3. Funciones de un límite de error
    4. Detectar errores de JavaScript
      1. Registra esos errores
      2. Representar una interfaz de usuario alternativa
    5. Trabajar con límites de error
    6. Integración con Sentry
    7. Conclusión
      1. Recursos Relacionados

    En este artículo, exploraremos el concepto de límites de error en una aplicación React. Trabajaremos con una aplicación de ejemplo para ver cómo podemos usar los límites de error para ofrecer una mejor experiencia de aplicación. Finalmente, integraremos Sentry en nuestro límite de error para generar informes de errores en tiempo real.

     

    En este artículo, veremos los límites de error en React. Aprenderemos qué son y cómo usarlos para brindar una mejor experiencia de usuario, incluso cuando algo falla en nuestra aplicación. También aprenderemos cómo integrarnos con Sentry para monitorear errores en tiempo real.

    Este tutorial está dirigido a desarrolladores de React de todos los niveles que quieran comenzar a usar límites de error en sus aplicaciones de React.

    El único requisito previo es que esté familiarizado con los componentes de la clase React.

    Usaré Yarn como mi administrador de paquetes para este proyecto. Encontrarás instrucciones de instalación para tu sistema operativo específico aquí .

    ¿Qué es un límite de error y por qué lo necesitamos?

    Una imagen, dicen, vale más que mil palabras. Por esa razón, me gustaría hablar sobre los límites de error usando (lo adivinaste) imágenes.

    La siguiente ilustración muestra el árbol de componentes de una aplicación React simple. Tiene un encabezado, una barra lateral a la izquierda y el componente principal, todo lo cual está envuelto por un App /componente raíz.

    Árbol de componentes. ( Vista previa grande )

     

    Al renderizar estos componentes, llegamos a algo que se parece a la imagen siguiente.

    Representación de la aplicación. ( Vista previa grande )

    En un mundo ideal, esperaríamos ver la aplicación renderizada de esta manera cada vez. Pero, lamentablemente, vivimos en un mundo no ideal. Los problemas (errores) pueden surgir en el frontend, el backend, el desarrollador y mil otros extremos. El problema podría ocurrir en cualquiera de nuestros tres componentes anteriores. Cuando esto sucede, nuestra aplicación bellamente diseñada se derrumba como un castillo de naipes.

    React fomenta el pensamiento en términos de componentes. Componer varios componentes más pequeños es mejor que tener un solo componente gigante. Trabajar de esta manera nos ayuda a pensar en nuestra aplicación en unidades simples. Pero aparte de eso, ¿no sería bueno si pudiéramos contener cualquier error que pudiera ocurrir en cualquiera de los componentes? ¿Por qué un fallo en un solo componente debería derribar toda la casa?

    En los primeros días de React, este era en gran medida el caso. Y peor aún, a veces ni siquiera podías descubrir cuál era el problema. El repositorio de React en Github tiene algunos de estos errores notables aquí , aquí y aquí .

    React 16 vino al rescate con el concepto de "límite de error". La idea es sencilla. Levante una cerca alrededor de un componente para evitar que se extienda cualquier incendio en ese componente.

    La siguiente ilustración muestra un árbol de componentes con un ErrorBoundary /componente envolviendo el Main /componente. Tenga en cuenta que ciertamente podríamos envolver los otros componentes en un límite de error si quisiéramos. Incluso podríamos envolver el App /componente en un límite de error.

    Árbol de componentes con límite de error. ( Vista previa grande )

    El contorno rojo en la siguiente ilustración representa el límite del error cuando se procesa la aplicación.

    Aplicación renderizada con límite de error. ( Vista previa grande )

    Como comentamos anteriormente, esta línea roja evita que cualquier error que ocurra en el Main /componente se derrame y bloquee tanto el componente Header /como LeftSideBar /. Por eso necesitamos un límite de error.

    Ahora que tenemos una comprensión conceptual de un límite de error, entremos en los aspectos técnicos.

    ¿Qué hace que un componente sea un límite de error?

    Como podemos ver en nuestro árbol de componentes, el límite de error en sí es un componente de React. Según los documentos,

    Un componente de clase se convierte en un límite de error si define uno (o ambos) de los métodos del ciclo de vida static getDerivedStateFromError()o componentDidCatch().

     

    Hay dos cosas a tener en cuenta aquí. En primer lugar, sólo se puede utilizar un componente de clase como límite de error. Incluso si escribe todos sus componentes como una función, aún debe utilizar un componente de clase si desea tener un límite de error. En segundo lugar, debe definir uno (o ambos) de static getDerivedStateFromError()o componentDidCatch(). Cuál(es) defina(s) depende de lo que quiera lograr con su límite de error.

    Funciones de un límite de error

    Un límite de error no es un muro tonto cuyo único propósito en la vida es contener el fuego. Los límites de error funcionan de verdad. Para empezar, detectan errores de JavaScript. También pueden registrar esos errores y mostrar una interfaz de usuario alternativa. Repasemos cada una de estas funciones una tras otra.

    Detectar errores de JavaScript

    Cuando se produce un error dentro de un componente, el límite del error es la primera línea de defensa. En nuestra última ilustración, si ocurre un error al renderizar el Main /componente, el límite de error detecta este error y evita que se propague hacia afuera.

    Registra esos errores

    Esto es completamente opcional. Podrías detectar el error sin registrarlo. Es tu decision. Puedes hacer lo que quieras con los errores arrojados. Regístrelos, guárdelos, envíelos a algún lugar, muéstrelos a sus usuarios (realmente no desea hacer esto). Tu decides.

    Pero para acceder a los errores hay que definir el componentDidCatch()método del ciclo de vida.

    Representar una interfaz de usuario alternativa

    Esto, al igual que registrar los errores, es completamente opcional. Pero imagina que tienes algunos invitados importantes y se va a cortar el suministro eléctrico. Seguro que no quieres que tus invitados anden a tientas en la oscuridad, así que inventas una tecnología para encender las velas instantáneamente. Mágico, mmm. Bueno, tus usuarios son invitados importantes y quieres brindarles la mejor experiencia en todas las situaciones. Puede representar una interfaz de usuario alternativa static getDerivedStateFromError()después de que se haya producido un error.

    Es importante tener en cuenta que los límites de error no detectan errores en las siguientes situaciones:

    1. Errores dentro de los controladores de eventos.
    2. Errores en código asincrónico (por ejemplo, setTimeouto requestAnimationFramedevoluciones de llamada).
    3. Errores que ocurren cuando estás realizando algún renderizado del lado del servidor.
    4. Los errores se generan en el propio límite de error (en lugar de en sus elementos secundarios). Sin embargo, es posible que otro límite de error detecte este error.

    Trabajar con límites de error

    Profundicemos ahora en nuestro editor de código. Para seguir adelante, debe clonar el repositorio . Después de clonar el repositorio, consulte la rama 01-initial-setup . Una vez hecho esto, ejecute los siguientes comandos para iniciar la aplicación.

    # install project dependenciesyarn install# start the serveryarn start

    Cuando se inicia, la aplicación muestra lo que tenemos en la imagen a continuación.

     

    Vista del navegador de la aplicación de inicio. ( Vista previa grande )

    Actualmente, la aplicación tiene un encabezado y dos columnas. Al hacer clic en Obtener imágenes en la columna de la izquierda, se realiza una llamada API a la URL https://picsum.photos/v2/list?page=0limit=2y se muestran dos imágenes. En la columna de la derecha tenemos unos textos descriptivos y dos botones.

    Cuando hacemos clic en el Replace string with objectbotón, reemplazaremos el texto {"function":"I live to crash"}, que ha sido stringified, con el objeto JavaScript simple. Esto provocará un error ya que React no representa objetos JavaScript simples. Esto hará que toda la página colapse y quede en blanco. Tendremos que actualizar la página para recuperar nuestra vista.

    Pruébelo usted mismo.

    Ahora actualice la página y haga clic en el Invoke event handlerbotón. Verás una ventana emergente de error, con un poco Xen la esquina superior derecha. Al hacer clic en él, se elimina la pantalla de error y se muestra la página renderizada, sin necesidad de actualizarla. En este caso, React todavía sabe qué mostrar aunque se produzca un error en el controlador de eventos. En un entorno de producción, esta pantalla de error no aparecerá en absoluto y la página permanecerá intacta. Solo puedes ver que algo salió mal si miras en la consola del desarrollador.

    Alerta de error del controlador de eventos. ( Vista previa grande )

    Nota : Para ejecutar la aplicación en modo de producción es necesario instalar el servicio globalmente. Después de instalar el servidor, cree la aplicación e iníciela con el siguiente comando.

    # build the app for productionyarn build# serve the app from the build folderserve -s build

    Habiendo visto cómo React maneja dos tipos de errores (error de representación y error del controlador de eventos), escribamos ahora un componente de límite de error.

    Cree un nuevo ErrorBoundary.jsarchivo dentro de la /srccarpeta y construyamos el componente del límite de error pieza por pieza.

    import React, { Component } from 'react';import PropTypes from 'prop-types';export default class ErrorBoundary extends Component { state = { error: '', errorInfo: '', hasError: false, }; static getDerivedStateFromError(error) { return { hasError: true, error }; } componentDidCatch(error, errorInfo) { // eslint-disable-next-line no-console console.log({ error, errorInfo }); this.setState({ errorInfo }); } render() { // next code block goes here return this.props.children; }}ErrorBoundary.propTypes = { children: PropTypes.oneOfType([ PropTypes.object, PropTypes.array ]).isRequired,};

    Definimos los dos métodos de ciclo de vida que convierten a un componente en un límite de error. Siempre que ocurre un error dentro del componente secundario del límite de error, se activan ambos métodos de ciclo de vida. blog sobre telescopios

    1. static getDerivedStateFromError()recibe el error y actualiza las variables de estado, errory hasError.
    2. componentDidCatch()recibe el error, que representa el error que se produjo y errorInfoque es un objeto con una componentStackclave que contiene información sobre qué componente produjo el error. Aquí registramos el error y también actualizamos el estado con el archivo errorInfo. Depende totalmente de ti lo que quieras hacer con estos dos.

    Luego, en el método de renderizado, devolvemos this.props.children, que representa cualquier componente que encierre este límite de error.

     

    Agreguemos el último fragmento de código. Copie el siguiente código y péguelo dentro del render()método.

    const { hasError, errorInfo } = this.state;if (hasError) { return ( div className="card my-5" div className="card-header" p There was an error in loading this page.{' '} span style={{ cursor: 'pointer', color: '#0077FF' }} onClick={() = { window.location.reload(); }} Reload this page /span{' '} /p /div div className="card-body" details className="error-details" summaryClick for error details/summary {errorInfo errorInfo.componentStack.toString()} /details /div /div );}

    En el render()método, comprobamos si hasErrores cierto. Si es así, renderizamos el div className="card my-5"/divdiv, que es nuestra interfaz de usuario alternativa. Aquí, mostramos información sobre el error y una opción para recargar la página. Sin embargo, en un entorno de producción, no se recomienda mostrar el error al usuario. Algún otro mensaje estaría bien.

    Ahora hagamos uso de nuestro ErrorBoundarycomponente. Abre App.js, importa ErrorBoundaryy renderiza ColumnRightdentro de él.

    # import the error boundaryimport ErrorBoundary from './ErrorBoundary';# wrap the right column with the error boundaryErrorBoundary ColumnRight //ErrorBoundary

    Ahora haga clic en Replace string with object. Esta vez, la columna derecha falla y se muestra la interfaz de usuario alternativa. Mostramos un informe detallado sobre dónde ocurrió el error. También vemos el registro de errores en la consola del desarrollador.

    Vista del límite de error en acción. ( Vista previa grande )

    Podemos ver que todo lo demás permanece en su lugar. Haga clic en Get imagespara confirmar que todavía funciona como se esperaba.

    En este punto, quiero mencionar que con los límites de error, puedes ir tan granularmente como quieras. Esto significa que puedes utilizar tantos como sea necesario. Incluso podría tener múltiples límites de error en un solo componente.

    Con nuestro uso actual de Error Boundary, al hacer clic Replace string with objectse bloquea toda la columna derecha. Veamos cómo podemos mejorar esto.

    Abre src/columns/ColumnRight.js, importa ErrorBoundaryy renderiza el segundo pbloque dentro de él. Este es el párrafo que bloquea el ColumnRight /componente.

    # import the componentimport ErrorBoundary from '../ErrorBoundary';# render the erring paragraph inside it.ErrorBoundary p Clicking this button will replace the stringified object,{' '} code{text}/code, with the original object. This will result in a rendering error. /p/ErrorBoundary

    Ahora haga clic en Replace string with object.

     

    Uso mejorado del límite de error. ( Vista previa grande )

    Esta vez todavía tenemos la mayor parte de la página intacta. Solo el segundo párrafo se reemplaza con nuestra interfaz de usuario alternativa.

    Haga clic para asegurarse de que todo lo demás esté funcionando.

    Si desea consultar mi código en este punto, debe consultar la rama 02-create-eb .

    En caso de que te preguntes si todo este asunto de los límites de error es interesante, déjame mostrarte lo que capturé en Github hace unos días. Mira el contorno rojo.

    Pantalla de error en Github. ( Vista previa grande )

    No estoy seguro de lo que está sucediendo aquí, pero parece un límite de error.

    Los límites de error son geniales, pero, en primer lugar, no queremos errores. Por lo tanto, debemos monitorear los errores a medida que ocurren para poder tener una mejor idea de cómo solucionarlos. En esta sección, aprenderemos cómo Sentry puede ayudarnos en ese sentido.

    Integración con Sentry

    Cuando abrí la página de inicio de Sentry mientras escribía esta línea, recibí este mensaje.

    Los errores de software son inevitables. El caos no lo es.
    Sentry proporciona monitoreo de errores autohospedado y basado en la nube que ayuda a todos los equipos de software a descubrir, clasificar y priorizar errores en tiempo real.

    Sentry es un servicio comercial de notificación de errores. Hay muchas otras empresas que ofrecen servicios similares. Elegí Sentry para este artículo porque tiene un plan de desarrollador gratuito que me permite registrar hasta 5000 eventos por mes en todos mis proyectos ( documentos de precios ). Un evento es un informe de fallo (también conocido como excepción o error). Para este tutorial, utilizaremos el plan de desarrollador gratuito.

    Puede integrar Sentry con muchos marcos web. Repasemos los pasos para integrarlo en nuestro proyecto React.

    1. Visite el sitio web de Sentry y cree una cuenta o inicie sesión si ya tiene una.
    2. Haga clic en Projectsen la navegación izquierda. Luego, haga clic en Create Projectpara iniciar un nuevo proyecto.
    3. En Choose a platform, seleccione Reaccionar.
    4. Bajo Set your default alert settingscontrol Alert me on every new issue.
    5. Dale un nombre a tu proyecto y haz clic en Create project. Esto creará el proyecto y lo redireccionará a la página de configuración.

    Instalemos el SDK del navegador Sentry.

    # install Sentryyarn add @sentry/browser

    En la página de configuración, copie el código de inicialización del SDK del navegador y péguelo en su index.jsarchivo.

    import * as Sentry from '@Sentry/browser';# Initialize with Data Source Name (dsn)Sentry.init({ dsn: 'dsn-string' });

    Y eso es suficiente para que Sentry comience a enviar alertas de error. Dice en los documentos ,

    Nota : Por sí solo, @Sentry/browserinformará cualquier excepción no detectada activada por su aplicación.

     

    Haga clic en Got it! Take me to the issue streampara pasar al panel de problemas. Ahora regrese a su aplicación en el navegador y haga clic en los botones rojos para generar algún error. Debería recibir alertas por correo electrónico para cada error (a veces los correos electrónicos se retrasan). Actualice su panel de problemas para ver los errores.

    Panel de problemas de Sentry. ( Vista previa grande )

    El panel de Sentry proporciona mucha información sobre el error que recibe. Puede ver información como un gráfico de la frecuencia de aparición de cada tipo de evento de error. También puedes asignar cada error a un miembro del equipo. Hay un montón de información. Tómese un tiempo para explorarlos y ver qué le resulta útil.

    Puede hacer clic en cada problema para ver información más detallada sobre el evento de error.

    Ahora usemos Sentry para informar errores detectados por nuestro límite de error. Abra ErrorBoundary.jsy actualice los siguientes fragmentos de código.

    # import Sentryimport * as Sentry from '@sentry/browser'# add eventId to statestate = { error: '', eventId: '', // add this to state errorInfo: '', hasError: false,};# update componentDidCatchcomponentDidCatch(error, errorInfo) { // eslint-disable-next-line no-console console.log({ error, errorInfo }); Sentry.withScope((scope) = { scope.setExtras(errorInfo); const eventId = Sentry.captureException(error); this.setState({ eventId, errorInfo }); });}

    Con esta configuración, Sentry envía todos los errores capturados por nuestro límite de error a nuestro panel de problemas utilizando el Sentry.captureExceptionmétodo.

    Sentry también nos brinda una herramienta para recopilar comentarios de los usuarios. Agreguemos el botón de comentarios como parte de nuestra interfaz de usuario alternativa dentro de nuestro límite de error.

    Abra ErrorBoundary.jsy agregue el botón de comentarios justo después divcon un nombre de clase de card-body. Puedes colocar este botón donde quieras.

    div className="card-body" .../div# add the Sentry buttonbutton className="bg-primary text-light" onClick={() = Sentry.showReportDialog({ eventId: this.state.eventId }) } Report feedback/button

    Ahora, cada vez que se representa nuestra interfaz de usuario alternativa, Report feedbackse muestra el botón. Al hacer clic en este botón se abre un cuadro de diálogo que el usuario puede completar para enviarnos sus comentarios.

    Formulario de comentarios de centinela. ( Vista previa grande )

    Continúe y genere un error, luego complete y envíe el formulario de comentarios. Ahora vaya a su panel de Sentry y haga clic en User Feedbacken la navegación izquierda. Deberías ver tus comentarios reportados.

    Panel de comentarios de Sentry. ( Vista previa grande )

    Actualmente, recibimos alertas por cada error, incluso aquellos que ocurren durante el desarrollo. Esto tiende a obstruir nuestro flujo de temas. Solo reportemos errores que ocurren en producción.

    En la navegación izquierda haga clic en Settings. Debajo del ORGANIZATIONmenú, haga clic en Projects. En esa lista, haga clic en su proyecto de límite de error. Desde Project Settingsel lado izquierdo, haga clic en Inbound Filters. Búscalo Filter out events coming from localhosty habilítalo. Esta es sólo una de las numerosas configuraciones que están disponibles en Sentry. Te animo a que eches un vistazo para ver qué podría ser útil para tu proyecto.

    Si desea echar un vistazo a mi código, la rama correspondiente en mi repositorio es 03-integrate-sentry .

    Conclusión

    Si no ha estado usando límites de error en su aplicación React, debe agregar uno inmediatamente en el nivel superior de su aplicación. Además, te animo a que integres un servicio de informe de errores en tu proyecto. Hemos visto lo fácil que es empezar a utilizar Sentry de forma gratuita.

    La versión final de la aplicación está alojada en Netlify .

    Recursos Relacionados

    • Reaccionar , centinela
    • Límites de error
    • Límites de error en reaccionar

    (ks, ra, yk, il)Explora más en

    • Reaccionar
    • javascript
    • Pruebas
    • Herramientas





    Tal vez te puede interesar:

    1. ¿Deberían abrirse los enlaces en ventanas nuevas?
    2. 24 excelentes tutoriales de AJAX
    3. 70 técnicas nuevas y útiles de AJAX y JavaScript
    4. Más de 45 excelentes recursos y repositorios de fragmentos de código

    Reaccionar manejo e informes de errores con límite de error y centinela

    Reaccionar manejo e informes de errores con límite de error y centinela

    Creación y mantenimiento de sistemas de diseño exitosos, con Brad Fost ¡Registro! Índice ¿Qué es un

    programar

    es

    https://aprendeprogramando.es/static/images/programar-reaccionar-manejo-e-informes-de-errores-con-limite-de-error-y-centinela-1033-0.jpg

    2024-05-21

     

    Reaccionar manejo e informes de errores con límite de error y centinela
    Reaccionar manejo e informes de errores con límite de error y centinela

     

     

    Top 20