Skip to content
NeuralSkills
Depuracion

Arquitecto de Error Boundaries

Disena error boundaries y estrategias de fallback que previenen fallos en cascada y mejoran la experiencia de usuario.

Avanzado Gratis Publicado: 15 de abril de 2026
Herramientas Compatibles claude-codechatgptgeminicopilotcursorwindsurfuniversal

El Problema

Cuando un componente crashea, toda la pagina se pone blanca. Cuando una llamada API falla, todo el feature se rompe. Cuando un microservicio esta caido, los requests fallan en cascada por todo el sistema. Las aplicaciones sin error boundaries son castillos de naipes — un fallo derriba todo. Disenar error boundaries adecuados no es solo atrapar errores, es decidir que deberia ver el usuario cuando las cosas salen mal, que deberia seguir funcionando y como recuperarse con gracia.

El Prompt

Eres un experto en ingenieria de resiliencia. Disena una arquitectura de error boundaries para mi aplicacion:

TIPO DE APLICACION: [SPA / SSR / servidor API / microservicios]
FRAMEWORK: [React/Vue/Next.js/Express/etc.]
FLUJOS CRITICOS: [lista los caminos criticos del usuario]
MANEJO DE ERRORES ACTUAL: [describe que pasa ahora cuando ocurren errores]

Disena la arquitectura de error boundaries:
1. **Catalogo de Modos de Fallo**: Para cada flujo critico, lista cada fallo posible.
2. **Estrategia de Ubicacion de Boundaries**: Donde deben colocarse? Define zonas: nivel de pagina, feature, componente, datos.
3. **Matriz de Diseno de Fallback**: Para cada zona, define el fallback apropiado: boton de retry, datos cacheados, UI degradada, skeleton, redirect o pagina de error completa.
4. **Estrategias de Recuperacion**: Para cada modo de fallo, define el camino de recuperacion.
5. **Pipeline de Reporte de Errores**: Disena el flujo de captura de errores: que se loggea, a donde va, que dispara alerta vs logging silencioso.
6. **Codigo de Implementacion**: Proporciona el componente error boundary, el wrapper HOC o hook y los componentes de fallback UI.

Ejemplo de Salida

Jerarquia de Boundaries:
  Nivel App: atrapa crashes fatales → muestra "Algo salio mal" + boton de refrescar + reporte a Sentry
  Nivel Ruta: atrapa crashes de componente de pagina → muestra pagina de error para esa ruta, navegacion sigue funcionando
  Nivel Feature: atrapa crashes de widgets (chat, notificaciones) → oculta widget + muestra badge "No disponible"
  Nivel Datos: atrapa fallos de API → muestra datos cacheados con banner "Ultima actualizacion hace 5min"

Matriz de Recuperacion:
  API Timeout → auto-retry 3x con backoff exponencial (1s, 2s, 4s), luego datos cacheados
  Red offline → indicador offline + servir desde cache de Service Worker
  Auth expirado → renovacion silenciosa de token, si falla → redirect a login con URL de retorno

Cuando Usar

Usa este skill al construir la arquitectura de manejo de errores de una nueva aplicacion, cuando los usuarios reportan pantallas blancas, al mejorar la resiliencia de un flujo critico, o al disenar manejo de errores para comunicacion entre microservicios.

Tips Pro

  • Los error boundaries deben ser granulares, no globales — un solo boundary a nivel de app atrapa todo pero da una UX terrible. Envuelve cada feature independiente en su propio boundary.
  • Siempre incluye contexto en los reportes de error — el mensaje de error solo es inutil. Incluye: ruta del arbol de componentes, ultimas 5 acciones del usuario, URL actual y estado relevante.
  • Disena la UI de fallback ANTES del happy path — si los fallbacks se disenan al final, seran un afterthought.
  • Prueba tus error boundaries explicitamente — escribe tests que fuercen crashes de componentes y verifican que aparece el fallback correcto.