Error Boundaries y Suspense

Sin Error Boundaries, si cualquier componente lanza un error durante el render, React desmonta todo el árbol y el usuario ve una pantalla completamente en blanco. Error Boundary es el equivalente de try/catch para el árbol de componentes: captura el error antes de que destruya la app y muestra un mensaje amigable en su lugar.

Es como tener compartimentos estancos en un barco: si uno se inunda, solo ese compartimento falla, el resto del barco sigue flotando.

Error Boundaries deben ser componentes de clase porque los hooks no pueden reemplazar todavía a getDerivedStateFromError ni a componentDidCatch.

En la práctica, creas una clase ErrorBoundary una sola vez en tu proyecto y la usas como wrapper en múltiples partes estratégicas de la UI: secciones independientes que no deben afectarse entre sí si una falla. componentDidCatch es también el lugar ideal para reportar errores a servicios como Sentry o Datadog, capturando el error automáticamente en producción.

import { Component, Suspense, lazy, useState } from "react";

// Error Boundary - debe ser clase (aún en 2024)
class ErrorBoundary extends Component {
  state = { tieneError: false, error: null };

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

  componentDidCatch(error, info) {
    console.error("Error capturado:", error, info);
    // Reportar a Sentry, etc.
  }

  render() {
    if (this.state.tieneError) {
      return (
        <div className="error-boundary">
          <h2>Algo salió mal</h2>
          <p>{this.state.error?.message}</p>
          <button onClick={() => this.setState({ tieneError: false })}>
            Reintentar
          </button>
        </div>
      );
    }
    return this.props.children;
  }
}

// Uso de Error Boundary
const ComponentePesado = lazy(() => import("./ComponentePesado"));

function App() {
  return (
    <ErrorBoundary>
      <Suspense fallback={<p>Cargando componente...</p>}>
        <ComponentePesado />
      </Suspense>
    </ErrorBoundary>
  );
}

// Patrón: Error Boundary por sección
function Dashboard() {
  return (
    <div>
      <ErrorBoundary>
        <GraficaVentas />
      </ErrorBoundary>
      <ErrorBoundary>
        <TablaUsuarios />
      </ErrorBoundary>
    </div>
  );
}