coastdigitalgroup/coastai-skills

Sistema de Errores y Estado del Sistema

Propósito

El Sistema de Errores y Estado del Sistema proporciona una metodología para diseñar los "caminos infelices" de un sitio web: los momentos en los que algo sale mal a nivel de sistema. A diferencia de la validación a nivel de formulario o los banners contextuales, este sistema maneja estados que afectan a páginas completas o a todo el sitio. Garantiza que los fallos se comuniquen con claridad, empatía y una "salida" clara, evitando la frustración del usuario y el abandono durante problemas técnicos.

Casos de Uso

• 404 No Encontrado: Cuando un usuario navega a una URL que no existe.
• 500 Error del Servidor: Cuando un fallo crítico del backend impide que se cargue una página.
• Modo de Mantenimiento: Cuando un sitio se desconecta intencionalmente para realizar actualizaciones.
• Estados Sin Conexión: Cuando un usuario pierde la conectividad en una aplicación web.
• Acceso Denegado (403): Cuando un usuario no tiene permiso para ver un recurso específico.

Cuándo NO Usar

• Validación de Formularios: Usar sistema-de-diseno-de-formularios para errores a nivel de campo.
• Notificaciones Contextuales: Usar sistema-de-banners-y-alertas para actualizaciones no bloqueantes o errores menores.
• Listas Vacías: Usar sistema-de-estado-vacio cuando una página se carga correctamente pero no contiene datos.
• Estados de Carga: Usar sistema-de-estado-esqueleto para la obtención estándar de contenido.

Entradas

1. Tipo de Error: ¿Es un error de cliente (4xx), error de servidor (5xx) o estado del sistema (Mantenimiento)?
2. Contexto Técnico: ¿Puede el sistema explicar por qué falló sin filtrar datos sensibles?
3. Rutas de Recuperación: ¿Cuáles son los siguientes pasos más probables para el usuario?
4. Tono de Marca: ¿La voz de la marca es humorística, profesional o estrictamente técnica?
5. Restricciones del Sistema: ¿El estado sin conexión necesita admitir acciones específicas 'local-first'?

Salidas

1. Anatomía de la Página de Estado: Un diseño definido para el mensaje de error, el ancla visual y las acciones de recuperación.
2. Jerarquía de Mensajes: Estándares para el titular (qué sucedió) y la descripción (qué hacer a continuación).
3. Plan de Recuperación: Un mapa de enlaces, entradas de búsqueda o recursos de ayuda adaptados al error específico.
4. Especificación de UI Sin Conexión: Reglas sobre cómo cambia la interfaz cuando se pierde la conectividad.

Flujo de Trabajo

1. Categorizar la Gravedad del Fallo

Determinar el impacto del error:

• Bajo (404/403): Localizado en una URL. El sitio está sano. Centrarse en la Redirección.
• Alto (500): Afecta a todo el sistema o a páginas completas. El sitio tiene dificultades. Centrarse en la Tranquilidad y el Soporte.
• Sistémico (Mantenimiento): Tiempo de inactividad intencional. Centrarse en la Gestión de Expectativas (ej., "De vuelta a las 2 PM").
• Conectividad (Sin Conexión): Fallo ambiental. Centrarse en la Preservación del Estado (ej., "Cambios guardados localmente").

2. Establecer la Ruta de Recuperación

Cada página de error debe tener una "Salida":

• El Botón "Inicio": El requisito mínimo absoluto.
• Sugerencias Inteligentes: Para errores 404, proporcionar enlaces a páginas populares o una barra de búsqueda.
• El Desencadenante "Actualizar": Para errores 5xx, proporcionar una forma prominente de reintentar la solicitud.
• Enlaces de Soporte: Para problemas persistentes, proporcionar una ruta directa a un centro de ayuda o página de estado.

3. Diseñar la Anatomía Visual

Aplicar sistema-de-jerarquia-visual a la vista de error:

• Ancla Visual: Usar una ilustración o un icono alineado con la marca para suavizar el impacto del fallo.
• Titular Claro: Usar un titular "humano" (ej., "No podemos encontrar esa página") en lugar de solo el código de estado ("Error 404").
• Metadatos Sutiles: Mantener los códigos técnicos (ej., ID de Error: 12345) pequeños y de bajo contraste, destinados a los equipos de soporte en lugar de al usuario.

4. Aplicar la Regla de Mensajería "Primero lo Humano"

Evitar la jerga técnica que aleja a los usuarios:

• Malo: "500 Error Interno del Servidor: Conexión reiniciada por el par."
• Bueno: "Algo salió mal en nuestro lado. Estamos trabajando para solucionarlo ahora."
• Malo: "404 Recurso no localizado."
• Bueno: "Parece que esta página tomó un desvío."

5. Planificar para la Adaptación Responsiva

• Página Completa vs. Modal: Decidir si el error debe ocupar todo el viewport (estándar para 404/500) o aparecer como un banner fijo (común para estados Sin Conexión).
• Diseño Centrado: Centrar el contenido suele ser lo mejor para las páginas de error, ya que minimiza el esfuerzo de escaneo y enfatiza la "Pausa" en el recorrido del usuario.

Reglas de Decisión

• La Regla del "Camino Directo": Nunca permitir que una página de error sea un callejón sin salida. Si no hay sugerencias específicas, incluir siempre una opción "Volver a Inicio" y "Búsqueda".
• Búsqueda en 404: Si un sitio tiene más de 100 páginas, la página 404 DEBE incluir una barra de búsqueda.
• Transparencia en Mantenimiento: Si está en modo de mantenimiento, proporcionar siempre una hora estimada de regreso o un enlace a una página de estado.
• Persistencia Sin Conexión: Cuando no haya conexión, "atenuar" visualmente o deshabilitar las acciones no funcionales (ej., botones "Enviar") para evitar la pérdida de datos.

Restricciones

• Accesibilidad: Las páginas de error deben mantener la navegación global y el pie de página del sitio (cuando sea posible) para proporcionar una orientación familiar. Para cambios de estado dinámicos (como pasar a estar desconectado), usar una región aria-live="assertive" para anunciar el cambio inmediatamente.
• Capacidad de Respuesta: Las páginas de error deben ser lo más resilientes posible. Evitar activos pesados que podrían no cargarse si el sistema ya tiene dificultades.
• Identidad de Marca: Las páginas de error deben verse como parte del sitio, no como una página genérica del navegador o del servidor.

Patrones de Fallo Comunes

• El "Callejón Sin Salida": Una página 404 sin enlaces, que obliga al usuario a usar el botón de retroceso del navegador o a irse.
• El "Muro de Jerga": Mostrar trazas de pila o errores de base de datos sin procesar que confunden a los usuarios y potencialmente filtran información de seguridad.
• El "Juego de Culpas": Mensajes que implican que el usuario hizo algo mal (ej., "Ingresaste una URL no válida") en lugar de asumir la responsabilidad por el fallo de descubrimiento.
• Falta de Coherencia de Estilo: Una página de error que utiliza fuentes/colores diferentes al resto del sitio, lo que la hace parecer rota o maliciosa.

Criterios de Validación

• Cada estado de error (404, 500, etc.) tiene un titular claro y legible por humanos.
• Al menos una acción de recuperación principal (ej., "Volver a Inicio") está presente.
• Para páginas 404, se proporciona una barra de búsqueda o enlaces populares para el descubrimiento.
• Los metadatos técnicos (IDs de Error) están presentes pero subordinados en la jerarquía.
• Los cambios de conectividad (Sin Conexión) se anuncian a través de regiones ARIA live.
• El estilo visual se mantiene consistente con el sistema de marca/diseño principal.
• Las páginas de mantenimiento proporcionan un enlace de "Regreso Esperado" o "Página de Estado".