¿Cuáles son los límites de error en ReactJS (16)?

Los errores de tiempo de ejecución durante el renderizado podrían poner una aplicación en un estado roto. React básicamente desmonta el árbol de componentes de Hole React. Lo que sería genial es si pudiéramos detectar los errores en cualquier parte de suárbol de componentes, registrar esos errores y mostrar una interfaz de usuario alternativa. Aquí es donde el límite de error toma el centro de atención. Un componente de clase que implementa uno o ambos métodos de ciclo de vida static getDerivedStateFromError() ocomponenteDidCatch() se convierte en un límite de error . El getDerivedStateFromError() estático se usa para representar una interfaz de usuario alternativa después de que se produce un error. El componenteDidCatch() se utiliza para registrar la información del error.

Los límites de error no detectan errores para:

• Controladores de eventos
• Código asíncrono (por ejemplo, setTimeout o solicitud de red)
• Representación del lado del servidor
• Errores arrojados en el propio límite de error (en lugar de sus hijos)

Veamos un ejemplo sin usar Error Boundary . 

Creando la aplicación React:

Paso 1: Cree una aplicación React usando el siguiente comando:

npx create-react-app error-boundary-demo

Paso 2: después de crear la carpeta de su proyecto, es decir , error-boundary-demo , muévase a ella con el siguiente comando:

cd error-boundary-demo

Paso 3: Cree un directorio y asígnele el nombre Componente .

mkdir Component

Estructura del proyecto:   Tendrá el siguiente aspecto.

Paso 4: En este paso, crearemos el componente HeroViewar para imprimir el nombre del héroe. Este componente arroja un error si el nombre del héroe es ‘Joker’ . Cree HeroViewar.js en el directorio de componentes y escriba el siguiente código. 

import React from 'react'
  
const HeroViewar = ({name}) => {
  
    // Throw an error if not hero
    if(name === "Joker")
        throw new Error("Not a Hero!")
    return(
        <h2>{name}</h2>
    )
}
  
export default HeroViewar

Paso 5: En este paso, importaremos HeroViewar desde HeroViewar.js para imprimir el nombre de algún héroe. Pase el nombre del héroe como apoyo al componente HeroViewar . Escriba el siguiente código en el archivo App.js.

import React from 'react'
import HeroViewar from './Component/HeroViewar'
  
const App = () => {
  return (
    <>
      <HeroViewar name="Superman" />
      <HeroViewar name="Batman" />
      <HeroViewar name="Joker" />
    </>
  )
}
  
export default App

Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto:

npm start

Producción:

Explicación: Uno de los nombres de nuestros héroes era ‘Joker’ , es por eso que HeroViewar arroja un error. Si ahora echa un vistazo al navegador, verá que toda la aplicación se bloquea. Obviamente, esto no es bueno. Lo que queremos es que si un componente en particular arroja un error, solo ese componente debería volver a una interfaz de usuario y el componente restante no debería verse afectado. 

Paso 6: Para superar el problema anterior, React 16 introduce un nuevo concepto de «límite de error». El límite de error captura los errores en cualquier parte de su árbol de componentes y muestra una interfaz de usuario alternativa. Vamos a agregarlo. Cree ErrorBoundary.js en el directorio de componentes y escriba el siguiente código. 

import React, { Component } from 'react'
  
class ErrorBoundary extends Component {
    constructor(props) {
        super(props)
        this.state = { hasError: false }
    }
      
    static getDerivedStateFromError(error){
  
        // Update state so the next render
        // will show the fallback UI.
        return { hasError: true }
    }
  
    componentDidCatch(error, errorInfo) {
  
        // You can also log the error to
        // an error reporting service
        console.log(error, errorInfo)
    }
  
    render() {
        if (this.state.hasError) {
  
          // You can render any custom fallback UI
          return <h2>Something went wrong!</h2>
        }    
        return this.props.children 
      }
}
  
export default ErrorBoundary

Paso 7: actualice App.js para envolver todos y cada uno de HeroViewar  con ErrorBoundary como:

<ErrorBoundary>
    <HeroViewar name="..." />
</ErrorBoundary>

Escriba el siguiente código para App.js

import React from 'react'
import ErrorBoundary from './Component/ErrorBoundary'
import HeroViewar from './Component/HeroViewar'
  
const App = () => {
  return (
    <>
    <ErrorBoundary>
      <HeroViewar name="Superman" />
    </ErrorBoundary>
    <ErrorBoundary>
      <HeroViewar name="Batman" />
    </ErrorBoundary>
    <ErrorBoundary>
      <HeroViewar name="Joker" />
    </ErrorBoundary>
    </>
  )
}
  
export default App

Producción: