# 🛡️ Manejo de Errores: Cómo Hacer que tu Código Sea Más Robusto

**URL:** <https://www.yodev.dev/t/manejo-de-errores-como-hacer-que-tu-codigo-sea-mas-robusto/163>\
**Category:** Desarrollo\
**Tags:** junior-devs\
**Created:** [19 Julio, 2025 23:10 UTC](https://www.yodev.dev/t/manejo-de-errores-como-hacer-que-tu-codigo-sea-mas-robusto/163 "2025-07-19T23:10:15Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![Grego](https://yyz1.discourse-cdn.com/flex009/user_avatar/www.yodev.dev/grego/32/649_2.png) [@Grego](https://www.yodev.dev/u/Grego)\
**Post date:** [19 Julio, 2025 23:10 UTC](https://www.yodev.dev/t/manejo-de-errores-como-hacer-que-tu-codigo-sea-mas-robusto/163/1 "2025-07-19T23:10:15Z")

</div>

¡Hola desarrolladores junior! 👋

Uno de los aspectos que más diferencia a un desarrollador junior de uno más experimentado es cómo maneja los errores. Aprender a anticipar, capturar y manejar errores hará que tu código sea mucho más confiable y profesional.

## 🎯 ¿Por Qué es Importante Manejar Errores?

Imagina que tu aplicación se rompe cada vez que un usuario escribe un email inválido o cuando una API no responde. ¡Sería muy frustrante! El manejo adecuado de errores mejora la experiencia del usuario y facilita el debugging.

## 🚨 Tipos Comunes de Errores

### 1. Errores de Sintaxis

```javascript
// ❌ Error de sintaxis - falta cerrar paréntesis
function saludar(nombre {
    return `Hola ${nombre}`;
}

// ✅ Sintaxis correcta
function saludar(nombre) {
    return `Hola ${nombre}`;
}

```

### 2. Errores de Referencia

```javascript
// ❌ Variable no definida
console.log(usuarioNombre); // ReferenceError

// ✅ Verificar antes de usar
const usuarioNombre = "Ana";
console.log(usuarioNombre);

```

### 3. Errores de Tipo

```javascript
// ❌ Intentar llamar un método en null/undefined
const usuario = null;
const nombre = usuario.nombre; // TypeError

// ✅ Verificación defensiva
const nombre = usuario?.nombre || 'Usuario desconocido';

```

## 🛠 Try-Catch: Tu Mejor Amigo

### Uso Básico

```javascript
try {
    // Código que podría fallar
    const datos = JSON.parse(jsonString);
    console.log('Datos parseados:', datos);
} catch (error) {
    // Qué hacer si algo sale mal
    console.error('Error al parsear JSON:', error.message);
    // Mostrar mensaje amigable al usuario
    mostrarMensaje('Hubo un problema al procesar los datos');
}

```

### Con Finally

```javascript
function cargarDatos() {
    mostrarIndicadorCarga(true);
    
    try {
        const datos = obtenerDatosDelServidor();
        mostrarDatos(datos);
    } catch (error) {
        mostrarMensajeError('No se pudieron cargar los datos');
    } finally {
        // Esto SIEMPRE se ejecuta
        mostrarIndicadorCarga(false);
    }
}

```

## 🌐 Manejo de Errores en APIs

### Fetch con Manejo Completo

```javascript
async function obtenerUsuario(id) {
    try {
        mostrarCargando(true);
        
        const response = await fetch(`/api/usuarios/${id}`);
        
        // Verificar si la respuesta es exitosa
        if (!response.ok) {
            if (response.status === 404) {
                throw new Error('Usuario no encontrado');
            } else if (response.status === 500) {
                throw new Error('Error del servidor');
            } else {
                throw new Error(`Error: ${response.status}`);
            }
        }
        
        const usuario = await response.json();
        return usuario;
        
    } catch (error) {
        console.error('Error al obtener usuario:', error);
        
        // Mostrar mensaje específico según el error
        if (error.message.includes('Failed to fetch')) {
            mostrarError('Sin conexión a internet');
        } else {
            mostrarError(error.message);
        }
        
        return null;
    } finally {
        mostrarCargando(false);
    }
}

```

### Manejo de Timeouts

```javascript
function fetchConTimeout(url, tiempoLimite = 5000) {
    return Promise.race([
        fetch(url),
        new Promise((_, reject) =>
            setTimeout(() => reject(new Error('Timeout')), tiempoLimite)
        )
    ]);
}

// Uso
try {
    const response = await fetchConTimeout('/api/datos', 3000);
    const datos = await response.json();
} catch (error) {
    if (error.message === 'Timeout') {
        mostrarError('La solicitud tardó demasiado tiempo');
    } else {
        mostrarError('Error al cargar datos');
    }
}

```

## 📝 Validación de Formularios

### Validación Robusta

```javascript
function validarFormularioRegistro(datos) {
    const errores = [];
    
    // Validar email
    if (!datos.email || !datos.email.trim()) {
        errores.push('El email es requerido');
    } else if (!esEmailValido(datos.email)) {
        errores.push('El email no tiene un formato válido');
    }
    
    // Validar contraseña
    if (!datos.password) {
        errores.push('La contraseña es requerida');
    } else if (datos.password.length < 6) {
        errores.push('La contraseña debe tener al menos 6 caracteres');
    }
    
    // Validar edad
    if (!datos.edad || isNaN(datos.edad)) {
        errores.push('La edad debe ser un número válido');
    } else if (datos.edad < 18) {
        errores.push('Debes ser mayor de 18 años');
    }
    
    return {
        esValido: errores.length === 0,
        errores: errores
    };
}

function esEmailValido(email) {
    const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    return regex.test(email);
}

// Uso en formulario
document.getElementById('formulario').addEventListener('submit', function(e) {
    e.preventDefault();
    
    const datos = {
        email: document.getElementById('email').value,
        password: document.getElementById('password').value,
        edad: parseInt(document.getElementById('edad').value)
    };
    
    const validacion = validarFormularioRegistro(datos);
    
    if (validacion.esValido) {
        enviarFormulario(datos);
    } else {
        mostrarErrores(validacion.errores);
    }
});

```

## 🎨 Mostrar Errores de Forma Amigable

### Funciones Utilitarias para UI

```javascript
function mostrarError(mensaje, tipo = 'error') {
    const contenedor = document.getElementById('mensajes');
    
    const div = document.createElement('div');
    div.className = `mensaje ${tipo}`;
    div.textContent = mensaje;
    
    contenedor.appendChild(div);
    
    // Remover después de 5 segundos
    setTimeout(() => {
        div.remove();
    }, 5000);
}

function mostrarCargando(mostrar) {
    const indicador = document.getElementById('cargando');
    indicador.style.display = mostrar ? 'block' : 'none';
}

function limpiarErrores() {
    const errores = document.querySelectorAll('.mensaje.error');
    errores.forEach(error => error.remove());
}

```

### CSS para Mensajes

```css
.mensaje {
    padding: 12px;
    margin: 8px 0;
    border-radius: 4px;
    font-weight: 500;
}

.mensaje.error {
    background-color: #fee;
    color: #c53030;
    border: 1px solid #fed7d7;
}

.mensaje.exito {
    background-color: #f0fff4;
    color: #38a169;
    border: 1px solid #c6f6d5;
}

.mensaje.advertencia {
    background-color: #fffbf0;
    color: #d69e2e;
    border: 1px solid #feebc8;
}

```

## 🔍 Logging para Debugging

### Sistema de Logs Básico

```javascript
const Logger = {
    info: (mensaje, datos = null) => {
        console.log(`ℹ️ [INFO] ${mensaje}`, datos);
    },
    
    error: (mensaje, error = null) => {
        console.error(`❌ [ERROR] ${mensaje}`, error);
        // En producción, enviar a servicio de logs
    },
    
    warn: (mensaje, datos = null) => {
        console.warn(`⚠️ [WARN] ${mensaje}`, datos);
    },
    
    debug: (mensaje, datos = null) => {
        if (window.location.hostname === 'localhost') {
            console.log(`🐛 [DEBUG] ${mensaje}`, datos);
        }
    }
};

// Uso
try {
    Logger.info('Iniciando carga de usuarios');
    const usuarios = await cargarUsuarios();
    Logger.info('Usuarios cargados exitosamente', { cantidad: usuarios.length });
} catch (error) {
    Logger.error('Error al cargar usuarios', error);
}

```

## 💡 Mejores Prácticas

### 1. Sé Específico con los Errores

```javascript
// ❌ Error genérico
throw new Error('Algo salió mal');

// ✅ Error específico
throw new Error('El email ya está registrado en el sistema');

```

### 2. No Ignores los Errores

```javascript
// ❌ Ignorar errores silenciosamente
try {
    operacionRiesgosa();
} catch (error) {
    // No hacer nada es malo
}

// ✅ Manejar apropiadamente
try {
    operacionRiesgosa();
} catch (error) {
    Logger.error('Error en operación riesgosa', error);
    mostrarMensajeAlUsuario('No se pudo completar la operación');
}

```

### 3. Usa Error Boundaries en React

```javascript
class ErrorBoundary extends React.Component {
    constructor(props) {
        super(props);
        this.state = { hasError: false };
    }
    
    static getDerivedStateFromError(error) {
        return { hasError: true };
    }
    
    componentDidCatch(error, errorInfo) {
        Logger.error('Error capturado por boundary', { error, errorInfo });
    }
    
    render() {
        if (this.state.hasError) {
            return <h2>Algo salió mal. Por favor, recarga la página.</h2>;
        }
        
        return this.props.children;
    }
}

```

## 🎯 Ejercicio Práctico

Crea una función que:

1. Haga una petición a una API
2. Maneje diferentes tipos de errores (red, 404, 500, etc.)
3. Muestre mensajes apropiados al usuario
4. Registre errores para debugging

¡Intenta implementarlo y comparte tu código en los comentarios!

## 📚 Resumen

- **Siempre anticipa** qué puede salir mal
- **Usa try-catch** para operaciones riesgosas
- **Valida datos** antes de procesarlos
- **Muestra mensajes claros** al usuario
- **Registra errores** para debugging
- **No ignores errores** nunca

El manejo de errores puede parecer tedioso al principio, pero es lo que separa aplicaciones amateur de aplicaciones profesionales. ¡Practiquen estas técnicas y verán la diferencia!

¿Qué tipo de errores les han causado más problemas? ¿Tienen alguna situación específica donde no saben cómo manejar un error? ¡Compartan sus experiencias!

#juniordev #ErrorHandling #bestpractices #javascript #webdev #LearningToCode