Cómo utilizar límites de error en React

Introducción

Los límites de error se introdujeron en React v16 como una forma de detectar errores complicados que ocurren durante la fase de renderizado. En el pasado, esto habría provocado que la aplicación se desmontara por completo y el usuario solo vería una página web en blanco, lo cual no es ideal.

En este artículo, aprenderá sobre los límites de error a través de fragmentos de código y demostraciones interactivas.

Prerrequisitos

Para seguir este artículo necesitarás:

• Si tienes alguna familiaridad con React, puedes leer nuestra serie Cómo programar en React.js .

Este tutorial fue verificado con Node v16.4.2, npmv7.19.1 y reactv17.0.2.

Encontrar errores sin límites de error

Es inevitable que nos encontremos con errores inesperados en nuestras aplicaciones durante el desarrollo. Es posible que intentes acceder a una propiedad anidada profundamente en un objeto que no existe o que, en ocasiones, no esté bajo tu control (como una solicitud HTTP fallida a una API de terceros).

En la demostración a continuación, simularemos un error para ver qué sucede normalmente sin un límite de error.

Contador de errores.js

import React from 'react';class BuggyCounter extends React.Component {  state = {    counter: 0,  };  handleClick = () = {    this.setState({      counter: this.state.counter + 1,    });  };  render() {    if (this.state.counter === 5) {      // Simulate an error!      throw new Error('Simulated error.');    }    return (      div        h1{this.state.counter}/h1        button onClick={this.handleClick}+/button      /div    );  }}export default BuggyCounter;

Visita el ejemplo de código en vivo alligatorio-react-error-boundaries-1de @wle8300 en CodePen.

Haga clic en el botón + (incrementar) y observe cómo falla en 5.

OutputUncaught Error: Simulated error.

Cuando la aplicación detecta un error, el componente se desmonta por completo y el usuario se queda con una página HTML en blanco. Esto puede confundir a los usuarios y hacer que no sepan qué hacer a continuación.

¡Los límites de error proporcionan una forma de manejar estos errores con elegancia!

Encontrar errores con límites de error

¿Qué son exactamente los límites de error? Al contrario de lo que se pueda pensar, no se trata de un nuevo componente o biblioteca de JavaScript. Es más bien una estrategia para gestionar errores en los componentes de React.

En concreto, se trata del uso de dos métodos que están disponibles en los componentes React:

Ejemplo de límite de error.js

import React from 'react';class MyErrorBoundaryExample extends React.Component {  state = {    error: null,  };  static getDerivedStateFromError(error) {    // Update state so next render shows fallback UI.    return { error: error };  }  componentDidCatch(error, info) {    // Log the error to an error reporting service    logErrorToExampleService(error, info);  }  render() {    if (this.state.error) {      // You can render any custom fallback UI      return pSomething broke/p;    }    return this.props.children;  }}export default MyErrorBoundaryExample;

• static getDerivedStateFromErrores un método de ciclo de vida que permite que el límite de error tenga la oportunidad de actualizarse statey, por lo tanto, activar un último render(). En el fragmento de código anterior, el estado se utiliza para revelar un mensaje de error intuitivo para humanos en lugar del componente dañado (por ejemplo, this.props.children).
• componentDidCatches un método de ciclo de vida diseñado para desencadenar efectos secundarios (por ejemplo, registrar el error en herramientas como Crashlytics ). Puede acceder info.componentStackpara obtener un seguimiento de pila fácil de usar para desarrolladores que será útil para clasificar el error.

Cualquier componente de React se considera un límite de error cuando emplea al menos uno de estos métodos de ciclo de vida.

Las buenas prácticas sugieren que usted querrá crear un componente que esté diseñado específicamente como un límite de error en lugar de mezclar lógica de manejo de errores en sus componentes genéricos.

¡ Modifiquémoslo ligeramente MyErrorBoundaryy luego envolvámoslo BuggyComponentpara que detecte el error!

MiErrorBoundary.js

import React from 'react';class MyErrorBoundary extends React.Component {  state = {    errorMessage: '',  };  static getDerivedStateFromError(error) {    return { errorMessage: error.toString() };  }  componentDidCatch(error, info) {    this.logErrorToServices(error.toString(), info.componentStack);  }  // A fake logging service.  logErrorToServices = console.log;  render() {    if (this.state.errorMessage) {      return p{this.state.errorMessage}/p;    }    return this.props.children;  }}export default MyErrorBoundary;

Y App.js:

Aplicación.js

import React from 'react';import BuggyCounter from './BuggyCounter';import MyErrorBoudnary from './MyErrorBoundary';class App extends React.Component {  refreshPage = () = {    history.go(0);  };  render() {    return (      div        MyErrorBoundary          BuggyCounter /        /MyErrorBoundary        hr /        button onClick={this.refreshPage}Refresh Page/button      /div    );  }}export default App;

BuggyCounter.jssigue siendo el mismo.

Visita el ejemplo de código en vivo alligatorio-react-error-boundaries-2de @wle8300 en CodePen.

Prueba a hacer clic en el botón + (incremento) nuevamente. Una vez que llegue a 5, se bloqueará sin problemas. Además, ¡puedes abrir tu consola para ver un seguimiento de la pila!

En lugar de bloquear por completo la aplicación, podemos usar los límites de error para sustituirla por una interfaz de usuario alternativa. Esto proporciona una respuesta visual al usuario de que algo falló y le permite seguir interactuando con nuestra aplicación.

Pueden optar por abandonar el sitio o incluso comunicarse con el servicio de atención al cliente para que los ayude a resolver su situación. Es una excelente manera de redimir una experiencia de usuario que de otro modo sería desafortunada.

Comparación de límites de error yTry...Catch

Los límites de error en realidad no compiten directamente con try...catchlas declaraciones. Los límites de error solo están diseñados para interceptar errores que se originan en tres lugares de un componente de React:

• Durante renderla fase
• En un método de ciclo de vida
• En elconstructor

Básicamente… las partes React-y de un componente.

A modo de contrapunto, estos son los lugares donde los Límites de Error no podrán detectar un error:

• Controladores de eventos (por ejemplo, onClick, onChange, etc.)
• setTimeoutorequestAnimationFramecallbacks
• Representación del lado del servidor (SSR)
• Y errores causados ​​por el propio límite de error (en lugar de sus hijos)

Por lo tanto, los límites de error no afectan realmente la forma en que se usa try...catch. Ambos son necesarios como estrategia sólida para gestionar errores en React.

Conclusión

En este artículo aprendiste sobre los límites de error.

Nota: Los límites de error solo están disponibles en componentes React basados ​​en clases. Al momento de escribir este artículo, no hay una manera de implementarlos mediante React Hooks .

Ahora que los límites de error están disponibles desde la versión 16 de React, generalmente se recomienda usar al menos un límite de error en la raíz de la aplicación (por ejemplo, el App.jsarchivo). Esto evitará que los usuarios vean una página HTML en blanco y tal vez vean una interfaz de usuario alternativa.

En el futuro, puede emplear varios tipos diferentes de límites de error que emplean diferentes interfaces de usuario de respaldo o aquellas que solo registran errores en un servicio de terceros.

¡Consulta la documentación oficial de React para obtener más información!