Límites de Error — Captura errores de renderizado en el árbol de componentes y muestra interfaz alternativa

import { Component, type ErrorInfo, type ReactNode } from "react";
 
class ErrorBoundary extends Component<
  { children: ReactNode; fallback: ReactNode },
  { hasError: boolean }
> {
  state = { hasError: false };
 
  static getDerivedStateFromError(): { hasError: boolean } {
    return { hasError: true };
  }
 
  componentDidCatch(error: Error, info: ErrorInfo) {
    console.error("ErrorBoundary caught:", error, info.componentStack);
  }
 
  render() {
    if (this.state.hasError) return this.props.fallback;
    return this.props.children;
  }
}
 
// Uso
<ErrorBoundary fallback={<p>Algo salió mal.</p>}>
  <RiskyComponent />
</ErrorBoundary>

import {
  Component,
  useState,
  useCallback,
  type ErrorInfo,
  type ReactNode,
} from "react";
 
// --- Límite de error completo con recuperación ---
 
interface ErrorBoundaryProps {
  children: ReactNode;
  fallback?: ReactNode;
  onError?: (error: Error, info: ErrorInfo) => void;
  renderFallback?: (props: {
    error: Error;
    reset: () => void;
  }) => ReactNode;
  resetKeys?: unknown[];
}
 
interface ErrorBoundaryState {
  error: Error | null;
}
 
class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
  state: ErrorBoundaryState = { error: null };
 
  static getDerivedStateFromError(error: Error): ErrorBoundaryState {
    return { error };
  }
 
  componentDidCatch(error: Error, info: ErrorInfo) {
    this.props.onError?.(error, info);
  }
 
  componentDidUpdate(prevProps: ErrorBoundaryProps) {
    if (this.state.error && prevProps.resetKeys !== this.props.resetKeys) {
      // Si resetKeys cambió, intenta recuperación
      const changed = this.props.resetKeys?.some(
        (key, i) => key !== prevProps.resetKeys?.[i]
      );
      if (changed) this.reset();
    }
  }
 
  reset = () => {
    this.setState({ error: null });
  };
 
  render() {
    const { error } = this.state;
    const { children, fallback, renderFallback } = this.props;
 
    if (error) {
      if (renderFallback) {
        return renderFallback({ error, reset: this.reset });
      }
      return fallback ?? <p>Algo salió mal.</p>;
    }
 
    return children;
  }
}
 
// --- Uso con interfaz de recuperación ---
 
function UserProfile({ userId }: { userId: string }) {
  return (
    <ErrorBoundary
      resetKeys={[userId]}
      onError={(error) => {
        // Reporta al servicio de seguimiento de errores
        reportToSentry(error);
      }}
      renderFallback={({ error, reset }) => (
        <div className="p-6 bg-red-50 rounded-lg text-center">
          <h3 className="text-red-800 font-semibold">No se pudo cargar el perfil</h3>
          <p className="text-red-600 mt-2">{error.message}</p>
          <button
            onClick={reset}
            className="mt-4 px-4 py-2 bg-red-600 text-white rounded hover:bg-red-700"
          >
            Intentar de Nuevo
          </button>
        </div>
      )}
    >
      <ProfileContent userId={userId} />
    </ErrorBoundary>
  );
}
 
// --- Límites de error granular por sección ---
 
function DashboardPage() {
  return (
    <div className="grid grid-cols-2 gap-4">
      <ErrorBoundary fallback={<WidgetError name="Revenue" />}>
        <RevenueChart />
      </ErrorBoundary>
      <ErrorBoundary fallback={<WidgetError name="Users" />}>
        <UserStats />
      </ErrorBoundary>
      <ErrorBoundary fallback={<WidgetError name="Activity" />}>
        <ActivityFeed />
      </ErrorBoundary>
    </div>
  );
}
 
function WidgetError({ name }: { name: string }) {
  return (
    <div className="p-4 border border-red-200 rounded bg-red-50 text-red-700">
      El widget {name} no se pudo cargar.
    </div>
  );
}

// Con react-error-boundary (librería popular)
import { ErrorBoundary } from "react-error-boundary";
 
function App() {
  return (
    <ErrorBoundary
      FallbackComponent={ErrorFallback}
      onReset={() => queryClient.invalidateQueries()}
      resetKeys={[routeKey]}
    >
      <AppContent />
    </ErrorBoundary>
  );
}
 
function ErrorFallback({
  error,
  resetErrorBoundary,
}: {
  error: Error;
  resetErrorBoundary: () => void;
}) {
  return (
    <div role="alert">
      <p>Error: {error.message}</p>
      <button onClick={resetErrorBoundary}>Reintentar</button>
    </div>
  );
}

// El límite a nivel de página captura todo
<ErrorBoundary fallback={<FullPageError />}>
  <Layout>
    {/* Los límites a nivel de sección aíslan fallos */}
    <ErrorBoundary fallback={<SectionError />}>
      <Sidebar />
    </ErrorBoundary>
    <ErrorBoundary fallback={<SectionError />}>
      <MainContent />
    </ErrorBoundary>
  </Layout>
</ErrorBoundary>

// Ejemplo de producción: Next.js error.tsx con registro, reintentos y recarga completa de página alternativa
// Archivo: app/error.tsx
'use client';
 
import { useEffect } from 'react';
 
export default function Error({
  error,
  reset,
}: {
  error: Error & { digest?: string };
  reset: () => void;
}) {
  useEffect(() => {
    // Registra al servicio de seguimiento de errores externo
    console.error('Application error:', error);
    // reportToSentry(error);
  }, [error]);
 
  return (
    <div className="flex min-h-screen items-center justify-center">
      <div className="text-center space-y-4">
        <h2 className="text-2xl font-bold">Algo salió mal</h2>
        {error.digest && (
          <p className="text-sm text-gray-500">ID del Error: {error.digest}</p>
        )}
        <div className="flex gap-3 justify-center">
          <button
            onClick={reset}
            className="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700"
          >
            Intentar de nuevo
          </button>
          <button
            onClick={() => window.location.href = '/'}
            className="px-4 py-2 border rounded hover:bg-gray-50"
          >
            Ir a inicio
          </button>
        </div>
      </div>
    </div>
  );
}