ErrorBoundary React: ejemplo práctico y fallback

Imagina que estás construyendo una aplicación React compleja con múltiples componentes anidados. De repente, un pequeño componente en lo más profundo de tu árbol de componentes lanza un error inesperado. Sin los conocimientos adecuados, toda tu aplicación podría colapsar, mostrando una pantalla en blanco al usuario. ¿Te suena familiar?

Los Error Boundaries son el mecanismo elegante que React nos proporciona para evitar exactamente este escenario. En esta lección, aprenderás cómo implementarlos correctamente y cuándo utilizarlos para crear aplicaciones más robustas y profesionales.

¿Por Qué Necesitamos Error Boundaries?

En JavaScript tradicional, los errores en una parte del código pueden afectar a toda la ejecución. En React, esto es especialmente crítico porque los componentes están organizados en un árbol jerárquico. Cuando un componente lanza un error no manejado:

• React elimina todo el árbol de componentes del DOM
• La aplicación muestra una pantalla en blanco o un error críptico
• El estado interno se corrompe de forma irreversible
• La experiencia del usuario se degrada completamente

"Los errores en producción son inevitables. Lo que distingue una aplicación profesional es cómo manejas esos errores cuando ocurren."

Los Error Boundaries resuelven este problema permitiendo que nuestra aplicación se recupere gracefully de errores inesperados, mostrando contenido alternativo y manteniendo el resto de la aplicación funcionando.

Implementando tu Primer Error Boundary

Paso 1: Crear el Componente Error Boundary

1. Crear un componente de clase que extienda de React.Component
2. Implementar componentDidCatch() para capturar el error y actualizar el estado
3. Implementar static getDerivedStateFromError() para renderizar la UI de fallback
4. Usar el componente envolviendo otros componentes que queramos proteger

Ejemplo Práctico Completo:

// ErrorBoundary.jsx
import React, { Component } from 'react';

class ErrorBoundary extends Component {
  constructor(props) {
    super(props);
    this.state = {
      hasError: false,
      error: null,
      errorInfo: null
    };
  }

  static getDerivedStateFromError(error) {
    // Se llama durante la fase de renderizado
    // Actualiza el estado para mostrar la UI de fallback
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // Se llama después de que ocurre el error
    // Útil para logging y reportes de errores
    console.error('ErrorBoundary capturó un error:', error);
    console.error('Información del componente:', errorInfo);
    
    // Enviar a servicios de monitoreo como Sentry
    // logErrorToMyService(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      return (
        <div className="error-fallback">
          <h2>😔 Algo salió mal</h2>
          <p>{this.state.error?.toString()}</p>
          <button onClick={() => window.location.reload()}>
            Recargar Página
          </button>
        </div>
      );
    }

    return this.props.children;
  }
}

export default ErrorBoundary;

Paso 2: Usar el Error Boundary

// App.jsx
import React from 'react';
import ErrorBoundary from './ErrorBoundary';
import WidgetClimatico from './components/WidgetClimatico';
import PerfilUsuario from './components/PerfilUsuario';
import PanelAdmin from './components/PanelAdmin';

function App() {
  return (
    <div className="app">
      <header>
        <h1>Mi Aplicación</h1>
      </header>
      
      <ErrorBoundary>
        <WidgetClimatico />
      </ErrorBoundary>
      
      <ErrorBoundary>
        <PerfilUsuario />
      </ErrorBoundary>
      
      <ErrorBoundary>
        <PanelAdmin />
      </ErrorBoundary>
    </div>
  );
}

export default App;

Limitaciones de los Error Boundaries

Los Error Boundaries solo interceptan errores que ocurren durante el renderizado, métodos del ciclo de vida, y constructores de los componentes hijos. No funcionan en callbacks de eventos ni código asíncrono.

Patrones Avanzados de Error Boundaries

Error Boundary con Funcionalidad de Retry

class RetryableErrorBoundary extends Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false, error: null };
  }

  static getDerivedStateFromError(error) {
    return { hasError: true, error };
  }

  resetError = () => {
    this.setState({ hasError: false, error: null });
  };

  render() {
    if (this.state.hasError) {
      return (
        <div className="fallback-container">
          <h3>Error en el componente</h3>
          <p>{this.state.error?.message}</p>
          {this.props.onReset?.(this.resetError)}
          <button onClick={this.resetError}>
            Reintentar
          </button>
        </div>
      );
    }
    return this.props.children;
  }
}

Error Boundary con Diferentes UI según el Error

class AdaptiveErrorBoundary extends Component {
  state = { hasError: false, error: null };

  static getDerivedStateFromError(error) {
    return { hasError: true, error };
  }

  getFallbackUI(error) {
    if (error.status === 404) {
      return <ComponenteNoEncontrado />;
    }
    if (error.status === 401) {
      return <PaginaNoAutorizado />;
    }
    if (error instanceof NetworkError) {
      return <SinConexion />;
    }
    return <ErrorGenerico />;
  }

  render() {
    if (this.state.hasError) {
      return this.getFallbackUI(this.state.error);
    }
    return this.props.children;
  }
}

Integración con Servicios de Monitoreo

Los Error Boundaries son el lugar perfecto para integrar herramientas de monitoreo de errores como Sentry, Bugsnag o LogRocket:

componentDidCatch(error, errorInfo) {
  // Integración con Sentry
  Sentry.captureException(error, { extra: errorInfo });
  
  // Integración con LogRocket
  LogRocket.captureException(error, {
    tags: { component: errorInfo.componentStack },
    extra: { errorInfo }
  });
  
  // Logging personalizado
  console.error('Error capturado:', {
    mensaje: error.message,
    stack: error.stack,
    componente: errorInfo.componentStack,
    timestamp: new Date().toISOString()
  });
}

Buenas Prácticas

Ejemplo Real: Protegiendo una Aplicación de Dashboard

// DashboardLayout.jsx
import React from 'react';
import ErrorBoundary from '../components/ErrorBoundary';
import GraficosVentas from './GraficosVentas';
import ListaClientes from './ListaClientes';
import NotificacionesPanel from './NotificacionesPanel';

function DashboardLayout() {
  return (
    <div className="dashboard">
      <aside>
        <ErrorBoundary fallback={<MenuFallback />}>
          <MenuNavegacion />
        </ErrorBoundary>
      </aside>
      
      <main>
        <ErrorBoundary fallback={<ErrorGraficos />}>
          <GraficosVentas />
        </ErrorBoundary>
        
        <ErrorBoundary fallback={<ErrorLista />}>
          <ListaClientes />
        </ErrorBoundary>
      </main>
      
      <aside>
        <ErrorBoundary fallback={<NotificacionesError />}>
          <NotificacionesPanel />
        </ErrorBoundary>
      </aside>
    </div>
  );
}

export default DashboardLayout;

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

  static getDerivedStateFromError(error) {
    return { error };
  }

  componentDidCatch(error, info) {
    // Registrar en servicio de análisis
    analytics.track('component_error', {
      error: error.message,
      component: this.props.nombreComponente,
      timestamp: Date.now()
    });
  }

  render() {
    if (this.state.error) {
      if (this.props.fallback) {
        return this.props.fallback;
      }
      return (
        <div className="error-boundary-fallback">
          <h4>⚠️ Error en {this.props.nombreComponente}</h4>
          <p>Este componente encontró un problema.</p>
          <button onClick={() => this.setState({ error: null })}>
            Reintentar
          </button>
        </div>
      );
    }
    return this.props.children;
  }
}

export default DashboardErrorBoundary;

Conclusión

Los Error Boundaries son una herramienta fundamental en el arsenal de cualquier desarrollador React profesional. No solo protegen tu aplicación de fallos inesperados, sino que también mejoran significativamente la experiencia del usuario al proporcionar interfaces de recuperación elegantes.

En la próxima lección, exploraremos patrones adicionales de manejo de errores en React y cómo combinarlos con técnicas de testing para asegurar aplicaciones más robustas. ¡Sigue practicando!

Ejemplo moderno de ErrorBoundary

React mantiene los Error Boundaries como una responsabilidad de componentes de clase. Podés usarlos dentro de una app con componentes funcionales envolviendo secciones sensibles como dashboards, widgets, formularios complejos o paneles de terceros.

import React from "react";

type Props = { children: React.ReactNode };
type State = { hasError: boolean };

export class ErrorBoundary extends React.Component<Props, State> {
  state: State = { hasError: false };

  static getDerivedStateFromError() {
    return { hasError: true };
  }

  componentDidCatch(error: Error, info: React.ErrorInfo) {
    console.error("Error capturado por ErrorBoundary", error, info.componentStack);
  }

  render() {
    if (this.state.hasError) {
      return <section role="alert">No pudimos cargar esta sección.</section>;
    }

    return this.props.children;
  }
}

Qué errores no captura

• Errores dentro de event handlers, donde conviene usar try/catch.
• Errores asíncronos fuera del render, como setTimeout o callbacks externos.
• Errores del propio ErrorBoundary.
• Errores del servidor si estás renderizando fuera del cliente.

Referencia oficial: React docs sobre Error Boundaries.

Checklist para implementar un ErrorBoundary sin romper UX

• Ubicalo alrededor de zonas críticas: dashboards, widgets externos, editores, reportes o pantallas con mucha lógica.
• No lo uses para event handlers: esos errores se manejan con try/catch dentro del evento.
• Mostrá una UI de fallback útil: explicá qué pasó y ofrecé reintentar, volver o contactar soporte.
• Registrá el error: usá componentDidCatch(error, info) para enviar el stack a Sentry, logs internos o tu backend.
• Probalo manualmente: creá un componente que lance un error y verificá que no caiga toda la app.

De ErrorBoundary a habilidad laboral

Saber explicar un ErrorBoundary en React sirve para entrevistas frontend porque demuestra criterio de resiliencia, no solo sintaxis. Convertí esta lección en evidencia agregando a tu portfolio una pantalla que falla de forma controlada, muestra fallback UI y registra el error.

Conectá esta habilidad con la ruta de Desarrollador Frontend, revisá rutas de empleo y ofrecé servicios de auditoría React, manejo de errores o hardening de interfaces desde el marketplace de profesionales.

ErrorBoundary vs try/catch en React

Un ErrorBoundary no es un reemplazo general de try/catch. React lo usa para errores que aparecen durante el renderizado de componentes hijos. En cambio, try/catch sigue siendo útil en eventos, promesas, llamadas a APIs o funciones que ejecutás manualmente.

Referencia oficial: la documentación de React indica que los Error Boundaries no capturan event handlers, SSR, errores asíncronos ni errores del propio boundary. El lint oficial también advierte que un try/catch alrededor de JSX no captura errores de render de hijos.