Frontend Academy · Lección

Límites de errores

Implemente límites de errores basados en clases con componentDidCatch y getDerivedStateFromError para evitar que errores de renderizado no capturados bloqueen toda la aplicación.

Límites de errores es una lección gratuita de Frontend Academy en CoddyKit. Esta es la lección 4 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Frontend Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Frontend Academy incluye 4 lecciones en total.

¿Por qué usar límites de error?

De forma predeterminada, un error no capturado durante la representación, en un método del ciclo de vida o en un constructor bloquea todo el árbol de React. Los límites de error capturan estos errores en un subárbol y permiten representar una alternativa en su lugar.

Solo componentes de clase

Los límites de error deben ser componentes de clase, incluso en 2026: todavía no existe un equivalente basado en hooks. El hook useErrorBoundary está disponible en bibliotecas como react-error-boundary.

getDerivedStateFromError

Método estático que se invoca cuando un descendiente lanza un error. Devuelve una actualización de estado que activa la representación alternativa.

class ErrorBoundary extends React.Component {
  state = { hasError: false };

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

  render() {
    if (this.state.hasError) {
      return <h1>Something went wrong.</h1>;
    }
    return this.props.children;
  }
}

componentDidCatch para registrar errores

Use componentDidCatch para registrar el error en un servicio como Sentry o Datadog; recibe tanto el error como la pila de componentes de React.

componentDidCatch(error, errorInfo) {
  Sentry.captureException(error, {
    contexts: { react: { componentStack: errorInfo.componentStack } }
  });
}

Envolver la raíz de la aplicación

Envuelva la aplicación App de nivel superior en un límite de error para evitar la pantalla blanca de la muerte.

<ErrorBoundary fallback={<GlobalErrorPage />}>
  <App />
</ErrorBoundary>

Límites granulares por ruta o widget

Un límite global es lo mínimo. Añada límites por ruta para que un error en una sección no deje en blanco toda la aplicación.

<Routes>
  <Route path="/" element={<Home />} />
  <Route path="/dashboard" element={
    <ErrorBoundary fallback={<DashboardError />}>
      <Dashboard />
    </ErrorBoundary>
  } />
</Routes>

Qué NO capturan los límites de error

Los límites NO capturan: errores en controladores de eventos, código asíncrono (setTimeout, promesas), errores lanzados durante SSR ni errores en el propio límite. Use try/catch en estos casos.

Errores en controladores de eventos

Envuelva los controladores de eventos en try/catch y llame a una función manual reportError.

function Button() {
  function onClick() {
    try {
      riskyOperation();
    } catch (err) {
      reportError(err);
      toast.error('Something went wrong');
    }
  }
  return <button onClick={onClick}>Click</button>;
}

Biblioteca react-error-boundary

El paquete comunitario react-error-boundary ofrece una API compatible con componentes funcionales y admite el restablecimiento.

import { ErrorBoundary } from 'react-error-boundary';

<ErrorBoundary
  fallbackRender={({ error, resetErrorBoundary }) => (
    <div>
      <p>Error: {error.message}</p>
      <button onClick={resetErrorBoundary}>Try again</button>
    </div>
  )}
  onReset={() => refetch()}
>
  <DataView />
</ErrorBoundary>

Restablecimiento al recuperarse

Proporcione una forma de recuperarse, como un botón de reintento o un cambio de ruta. El límite debe restablecer su estado para dejar de mostrar el fallback.

class ErrorBoundary extends React.Component {
  state = { hasError: false };
  static getDerivedStateFromError() { return { hasError: true }; }
  reset = () => this.setState({ hasError: false });
  render() {
    if (this.state.hasError) {
      return <button onClick={this.reset}>Retry</button>;
    }
    return this.props.children;
  }
}

Desarrollo frente a producción

En desarrollo, React sigue mostrando la superposición roja de errores incluso con un límite; es intencional. En producción, solo se muestra el fallback del límite.

Prácticas recomendadas

1) Límite global en la raíz de la aplicación. 2) Límites por ruta. 3) Límites granulares alrededor de widgets independientes. 4) Registre siempre los errores en un servicio de seguimiento. 5) Muestre acciones de recuperación (reintentar, volver al inicio). 6) No oculte los errores silenciosamente.

Comprobación rápida

¿Qué tipos de errores NO capturan los límites de error de React?

Resumen: límites de error

Componente de clase con static getDerivedStateFromError + componentDidCatch. Envuelve un subárbol para capturar errores ocurridos durante el renderizado. No captura errores en controladores de eventos, código asíncrono ni SSR. Coloque un límite global en la raíz de la aplicación, además de límites por ruta y por widget. Registre los errores en Sentry. Ofrezca una acción de recuperación. La biblioteca react-error-boundary proporciona una API más sencilla.

Preguntas frecuentes

¿La lección «Límites de errores» es gratis?

Sí — el texto completo de «Límites de errores» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Frontend Academy, actualiza a CoddyKit PRO. El curso de Frontend Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Límites de errores»?

Implemente límites de errores basados en clases con componentDidCatch y getDerivedStateFromError para evitar que errores de renderizado no capturados bloqueen toda la aplicación. Practicas Frontend Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar Frontend Academy?

No se requiere experiencia previa. Frontend Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 4.

¿Cuánto tiempo toma la lección «Límites de errores»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de Frontend Academy?

Sí. Cada lección de Frontend Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

← Volver a Frontend Academy