Error Boundary — qué es, componente de React Native y manejo de errores

Qué es Error Boundary

Error Boundary es un mecanismo de React para la degradación gradual durante errores de renderizado. Introducido en React 16 (2017) como un componente envoltorio que implementa uno de dos métodos del ciclo de vida: static getDerivedStateFromError o componentDidCatch. Error Boundary permite mostrar al usuario un mensaje significativo en lugar de una pantalla blanca vacía o un bloqueo completo de la aplicación.

Cómo surgió Error Boundary

Antes de React 16, cualquier error no manejado en render provocaba un bloqueo completo de la aplicación con desmontaje de todo el árbol DOM. En aplicaciones web, esto significaba una pantalla blanca vacía; en React Native, un bloqueo completo con regreso a la pantalla de inicio. El equipo de React introdujo Error Boundary como un análogo del bloque catch para UI declarativa, tomando prestado el concepto del enfoque “let it crash” del lenguaje Erlang.

Importancia para React Native

En React Native, la ausencia de Error Boundary significa un bloqueo completo de la aplicación ante cualquier error de renderizado. El usuario pierde toda su sesión actual sin posibilidad de recuperación. Error Boundary en React Native es críticamente importante porque las aplicaciones móviles no se recargan como páginas web — la sesión del usuario se pierde irremediablemente y el usuario tiene que empezar de nuevo desde cero.

Cómo funciona Error Boundary en React Native

Error Boundary funciona a nivel del árbol de React. Cuando un componente hijo lanza un error en render o en el ciclo de vida, React no desmonta todo el árbol, sino que pasa el control al Error Boundary más cercano en la jerarquía. El Boundary llama a getDerivedStateFromError, establece state.hasError = true y renderiza la interfaz alternativa en lugar de la rama de componentes rota.

import React, { Component, ErrorInfo, ReactNode } from "react"

interface Props {
    children: ReactNode
    fallback?: ReactNode
}

interface State {
    hasError: boolean
    error?: Error
}

class ErrorBoundary extends Component<Props, State> {
    constructor(props: Props) {
        super(props)
        this.state = { hasError: false }
    }

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

    componentDidCatch(error: Error, info: ErrorInfo) {
        console.error("Caught by boundary:", error)
        Crashlytics.recordException(error)
    }

    render() {
        if (this.state.hasError) {
            return this.props.fallback || <FallbackUI />
        }
        return this.props.children
    }
}

getDerivedStateFromError establece el estado para renderizar la interfaz alternativa — es un método estático llamado durante la fase de renderizado antes de confirmar los cambios. componentDidCatch se ejecuta en la fase de confirmación y está destinado a efectos secundarios: registro, envío de informes de errores a Crashlytics, análisis. Los dos métodos separan la responsabilidad entre la gestión del estado de la UI y los efectos secundarios.

Creación del componente Error Boundary

Para crear un Error Boundary, es necesario implementar un componente de clase con los métodos getDerivedStateFromError y/o componentDidCatch. Los componentes funcionales no pueden ser Error Boundary — React soporta esta funcionalidad solo para componentes de clase porque se requiere acceso a los métodos del ciclo de vida. La librería react-error-boundary proporciona una implementación lista con una API basada en hooks para mayor comodidad.

// Ejemplo de uso de Error Boundary en React Native
import { ErrorBoundary } from "react-error-boundary"

const FallbackComponent = ({ error, resetError }: FallbackProps) => (
    <View style={styles.container}>
        <Text>Algo salió mal</Text>
        <Text>{error.message}</Text>
        <Button title="Reintentar" onPress={resetError} />
    </View>
)

const App = () => (
    <SafeAreaView>
        <ErrorBoundary FallbackComponent={<FallbackComponent />}>
            <UserProfile userId={"123"} />
        </ErrorBoundary>
        <BottomNavigation />
    </SafeAreaView>
)

Niveles de envoltura — Error Boundary se puede colocar en diferentes niveles de la jerarquía. Un Boundary global en la raíz de la aplicación mostrará la interfaz alternativa ante cualquier error, pero la navegación se conservará. Varios Boundaries a nivel de pantalla permiten aislar errores: si una pantalla se rompe, las demás continúan funcionando de forma independiente. react-error-boundary simplifica el mecanismo de reinicio mediante el hook useErrorBoundary, permitiendo restablecer el estado sin recargar. Para proyectos típicos, un esquema de tres niveles de Boundary se considera óptimo para aplicaciones React Native.

Restablecimiento del estado de Error Boundary

Después de que ocurre un error, el usuario puede hacer clic en el botón “Reintentar”, que restablece hasError a false y vuelve a renderizar el árbol hijo. El mecanismo de reinicio es importante para restaurar la funcionalidad de la aplicación sin recargar. En react-error-boundary se utiliza el callback onReset, que puede limpiar la caché, volver a solicitar datos o actualizar el estado en niveles superiores del árbol.

Limitaciones de Error Boundary

Error Boundary no captura errores asíncronos — errores en setTimeout, setInterval, Promise, async/await. React no puede interceptar errores fuera del ciclo de renderizado y los hooks del ciclo de vida porque se ejecutan en contextos de ejecución diferentes. Para errores asíncronos, se requiere un try-catch separado en los manejadores o un manejador global de eventos unhandledrejection.

Manejadores de eventos

Los errores en onClick, onChange y otros manejadores de eventos no son capturados por Error Boundary porque se ejecutan fuera del renderizado de React. El manejo de errores para manejadores de eventos debe estar dentro del propio manejador usando try-catch. La librería react-error-boundary proporciona el hook useErrorHandler para lanzar errores desde manejadores de eventos al Boundary más cercano.

Renderizado del lado del servidor y Next.js

Error Boundary no funciona en el lado del servidor en Next.js o Gatsby. Los métodos getDerivedStateFromError y componentDidCatch no se llaman durante SSR porque los métodos del ciclo de vida solo están disponibles en el navegador. Para errores del servidor, se requiere una estrategia separada: try-catch en getServerSideProps, páginas de respaldo error.js (Next.js 13+), o middleware global.

Capa nativa de React Native

En React Native, Error Boundary no previene bloqueos a nivel de módulos nativos. Un bloqueo nativo (segfault, out-of-memory, excepción nativa) ocurre a nivel de Objective-C o Java y no alcanza la capa de JavaScript. Para bloqueos nativos, se requiere Crashlytics NDK (Android) o KSCrash (iOS). Error Boundary solo protege la capa de JavaScript de una aplicación React Native.

Mejores prácticas de Error Boundary

Coloque Error Boundary en los límites de los módulos lógicos: un Boundary por pantalla, uno por widget de terceros, uno por formulario complejo. Esto aísla los errores y permite al usuario continuar trabajando en otras partes de la aplicación. Un Boundary raíz debe estar siempre presente — para errores críticos en componentes comunes de navegación o proveedores. Cada Boundary es responsable de su propio fragmento de interfaz y no afecta a los componentes vecinos cuando ocurre un error.

Registro y monitoreo

Siempre pase el error a Crashlytics o Sentry a través de componentDidCatch. Añada contexto: nombre de la pantalla, userId, versión de la aplicación, parámetros de navegación. En Sentry, las breadcrumbs están disponibles — una secuencia de acciones del usuario que llevaron al error. Para analizar la frecuencia de errores no fatales, use los paneles de Crashlytics con agrupación por issue.

Interfaz alternativa (Fallback UI)

No use un fallback simple — cree una interfaz significativa. Conjunto recomendado para React Native: mensaje de error (amigable para el usuario, no técnico), un botón de “Reintentar”, un enlace al soporte o chat. Evite una Vista vacía — el usuario pensará que la aplicación se ha bloqueado por completo y la cerrará. El fallback debe estar integrado en el diseño general de la aplicación.

Pruebas de Error Boundary

Pruebe cada Error Boundary usando React Testing Library o React Native Testing Library. Cree un componente disparador que lance un error al renderizar y verifique que se muestre la interfaz alternativa. Para pruebas de integración, use storybook con diferentes estados de Error Boundary: normal, error, estado posterior al reinicio. Las pruebas automatizadas de Boundary garantizan que cuando el componente cambie, la interfaz alternativa continúe funcionando correctamente en producción. La cobertura de pruebas para cada Boundary debe ser un requisito obligatorio de revisión de código para proyectos React Native.