Cómo manejar el error boundary en React

En el desarrollo de aplicaciones modernas con React, garantizar una experiencia de usuario fluida es fundamental. Los errores inesperados pueden romper la aplicación y dejar a los usuarios con una pésima impresión.

Para mitigar estos riesgos, React ofrece una solución robusta: los error boundaries. Quédate leyendo este blog y te explicaremos cómo manejar el error boundary en React, su importancia y las mejores prácticas para implementarlos.

¿Qué es un error boundary en React?

Un error boundary es un componente de React que detecta errores de JavaScript en su árbol de componentes secundarios durante:

• El ciclo de renderizado.
• Los métodos del ciclo de vida.
• Los constructores de componentes.

Cuando se detecta un error, el boundary evita que toda la aplicación se bloquee y permite mostrar un mensaje de error personalizado o realizar una acción específica, como registrar el error.

Ejemplo sencillo de 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 mostrar la interfaz de repuesto
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // Puedes registrar el error en un servicio de monitoreo
    console.error('Error capturado:', error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      return <h1>Algo salió mal.</h1>;
    }

    return this.props.children;
  }
}

En este ejemplo, el componente ErrorBoundary detecta errores en sus componentes secundarios y muestra un mensaje de respaldo en caso de fallo.

¿Por qué deberías usar error boundary en React?

Implementar un error boundary en React es esencial por varias razones:

• Mejora la experiencia de usuario: Evita que un error aislado derrumbe toda la aplicación.
• Facilita el monitoreo de errores: Permite registrar errores en servicios como Sentry o LogRocket.
• Permite personalizar la respuesta ante errores: Puedes mostrar mensajes amigables o sugerencias para los usuarios.
• Facilita el mantenimiento del código: Los errores son más fáciles de identificar y corregir.

Cómo implementar un error boundary paso a paso

1. Crear el componente ErrorBoundary

Define un componente de clase que implemente los métodos getDerivedStateFromError y componentDidCatch. Estos son necesarios para detectar y gestionar errores.

2. Envolver componentes susceptibles a fallos

<ErrorBoundary>
  <MiComponenteVulnerable />
</ErrorBoundary>

3. Mostrar una interfaz personalizada

render() {
  if (this.state.hasError) {
    return (
      <div className="error-message">
        <h2>Oops! Algo salió mal.</h2>
        <button onClick={() => window.location.reload()}>Recargar</button>
      </div>
    );
  }
  return this.props.children;
}

4. Integrar con servicios de monitoreo

componentDidCatch(error, errorInfo) {
  logErrorToService(error, errorInfo);
}

Mejores prácticas al usar error boundary en React

• Ubica los boundaries de manera estratégica: No envuelvas toda la aplicación. Envuélvelos alrededor de componentes específicos que puedan fallar.
• Ofrece mensajes amigables: Evita términos técnicos en los mensajes para el usuario final.
• Registra todos los errores: Usa herramientas como Sentry para registrar errores y analizarlos.
• Permite una acción de recuperación: Ofrece opciones como volver a cargar la página o regresar a la página de inicio.

Limitaciones de los error boundaries en React

Es importante recordar que los error boundaries no pueden capturar errores en los siguientes casos:

• Errores asincrónicos (como en setTimeout o Promise).
• Errores fuera del árbol de componentes de React.
• Errores de eventos controlados por React.
• Errores en el propio error boundary.

Para estos casos, se recomienda usar funciones globales como window.onerror o window.addEventListener('unhandledrejection') para capturar errores fuera del ámbito de React.

Manejar un error boundary en React es una práctica esencial para cualquier desarrollador que busque crear aplicaciones robustas y confiables. Al implementar correctamente esta funcionalidad, puedes proteger la experiencia de usuario, facilitar el monitoreo de errores y mejorar el mantenimiento del código.

No subestimes su poder: un buen manejo de errores puede marcar la diferencia entre una aplicación mediocre y una verdaderamente profesional.

Te recomendamos en video