Los Error Boundaries (límites de error) son componentes de React que capturan errores de JavaScript en cualquier parte de su árbol de componentes hijo, registran esos errores y muestran una interfaz de usuario alternativa en lugar de la pantalla en blanco que se produciría si la aplicación fallara por completo. Son una forma robusta de manejar errores en producción.

Creación de un Error Boundary:

        {`import React from 'react';

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // Actualiza el estado para que el próximo renderizado muestre la UI de fallback.
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // También puedes registrar el error en un servicio de reporte de errores
    console.error('Error capturado por ErrorBoundary:', error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // Puedes renderizar cualquier UI de fallback personalizada
      return 
Algo salió mal.
;
    }

    return this.props.children;
  }
}

export default ErrorBoundary;`}
      

Uso de un Error Boundary:

        {`import React from 'react';
import ErrorBoundary from './ErrorBoundary';

function ComponenteQueFalla() {
  // Este componente podría lanzar un error en algún punto
  throw new Error('¡Este componente falló!');
  return 
Componente Normal
;
}

function App() {
  return (
    

      
        
      
      
El resto de la aplicación sigue funcionando.
    
  );
}

export default App;`}
      

Los Error Boundaries solo capturan errores en la renderización, en los métodos de ciclo de vida y en los constructores de los componentes hijos. No capturan errores dentro de manejadores de eventos, código asíncrono, o errores en el propio Error Boundary.