8.5 Manejo de errores entre frontend y backend

1. Identifica los tipos de errores comunes

Los errores en una app web pueden ocurrir en distintas etapas del flujo. Detectar su origen y tipo permite aplicar la solución adecuada de forma más eficiente.

Errores del cliente:

1. Datos incompletos o mal formateados.
2. Peticiones a rutas inexistentes (/api/tareaas).
3. Problemas de red o conexión.

Errores del servidor:

1. Excepciones no capturadas (KeyError, TypeError).
2. Fallos al consultar o escribir en la base de datos.
3. Respuestas sin datos esperados.

Errores de comunicación:

1. Incompatibilidad en el formato de datos enviados o recibidos.
2. Falta de cabeceras adecuadas (Content-Type).
3. CORS u otras restricciones del navegador.

2. Comunica fallos con claridad: errores + códigos HTTP

Una API bien diseñada no solo devuelve datos exitosos, también informa con precisión cuándo y por qué algo falla. Esto se logra combinando un código de estado HTTP adecuado con un mensaje claro en JSON.

Estructura recomendada en el backend (Flask):

if not datos.get("title"):
    return jsonify({ "error": "El título es obligatorio" }), 400

Ejemplos comunes de códigos:

1. 400: Datos inválidos o incompletos.
2. 404: Recurso no encontrado.
3. 422: Entidad procesable pero con errores lógicos.
4. 500: Error inesperado en el servidor.

En el frontend con Axios:

axios.post("/api/tareas", datos)
  .then(res => actualizarVista(res.data))
  .catch(err => mostrarError(err.response.data.error));

3. Registra errores sin comprometer al usuario

El logging ayuda a detectar errores sin afectar al usuario. Aunque no se muestren, deben registrarse para facilitar su análisis y corrección. En Flask, puedes usar el módulo logging de Python para guardar eventos y errores relevantes:

import logging
logging.basicConfig(level=logging.INFO)
try:
    nueva = Tarea.create(datos["title"], "pendiente", categoria.id)
except Exception as e:
    logging.error(f"Error al crear tarea: {e}")
    return jsonify({"error": "Error interno del servidor"}), 500

Ventajas de registrar errores:

1. Facilita la depuración durante el desarrollo.
2. Permite auditar fallos en producción sin afectar al usuario.
3. Ayuda a identificar patrones o errores recurrentes.

Evita mostrar mensajes técnicos al cliente: lo ideal es responder con un mensaje genérico y guardar el detalle en los registros del servidor.

4. Maneja excepciones para evitar caídas

Usar try...except permite responder de forma controlada y mantener la aplicación en funcionamiento.

Ejemplo en Flask:

@app.route("/api/tareas", methods=["POST"])
def crear_tarea():
    try:
        datos = request.get_json()
        titulo = datos["title"]  # puede lanzar KeyError
        categoria = Categoria.get_or_create(datos["category"])
        nueva = Tarea(titulo, "pendiente", categoria.id)
        return jsonify(nueva.__dict__), 201
    except KeyError:
        return jsonify({"error": "Falta el título o la categoría"}), 400
    except Exception as e:
        logging.error(f"Error inesperado: {e}")
        return jsonify({"error": "Error interno"}), 500

Beneficios:

1. Se evitan errores 500 por fallos no capturados.
2. El usuario recibe retroalimentación clara.
3. Los errores quedan registrados para su análisis.

5. Valida datos para prevenir fallos antes de tiempo

Antes de procesar información, es clave validar los datos recibidos para evitar errores y asegurar su integridad. Las validaciones más comunes en una API:

1. Campos obligatorios (title, category) deben existir.
2. Tipos correctos (texto, entero, booleano).
3. Reglas de negocio (título no vacío, categoría válida).

Ejemplo en Flask:

datos = request.get_json()
if not datos.get("title"):
    return jsonify({"error": "El título es obligatorio"}), 400

Validar desde el inicio permite:

1. Evitar errores que escalen.
2. Informar al usuario con claridad.
3. Mantener datos consistentes en la base.

6. Prueba cómo se comporta tu app ante errores

Además de verificar que todo funcione, hay que probar cómo responde la app ante fallos. Esto garantiza mensajes claros y un sistema robusto. Técnicas para probar errores:

Con Postman o curl:

1. Omitir campos requeridos (title, category).
2. Usar métodos incorrectos (PUT en vez de POST).
3. Llamar rutas inválidas (/api/tareaas).

Con DevTools:

1. Simular fallos de red.
2. Ver respuestas en pestaña Network (HTTP, JSON).

Desde el frontend:

1. Enviar formularios vacíos.
2. Capturar errores con .catch() y mostrar alertas.

Así se asegura que:

1. El backend responde con claridad.
2. El frontend gestiona errores sin romperse.
3. Se detectan fallos antes de llegar al usuario.

7. Conclusión y Recursos Útiles

Una app robusta no solo funciona bien cuando todo va bien: también actúa correctamente cuando algo falla.

El manejo de errores mejora la estabilidad y la experiencia del usuario. Implica prevenir fallos, detectarlos a tiempo y comunicarlos de forma clara y útil.

Recursos útiles:

1. Python Logging
2. HTTP Status Codes
3. Postman
4. Flask Error Handling