Volver al inicio
Lección 11

🛡️ Manejo de Errores (try/catch)

Aprende a manejar errores de forma profesional para que tu aplicación no se rompa inesperadamente. Controla los errores y brinda una mejor experiencia al usuario.

1. ¿Qué son los errores?

Los errores son problemas que ocurren durante la ejecución del código y que pueden detener tu programa. Pueden ser causados por:

  • • Código mal escrito (errores de sintaxis)
  • • Usar variables que no existen
  • • Intentar hacer operaciones imposibles (dividir entre undefined)
  • • Datos incorrectos del usuario
  • • Problemas de red o servidor

Sin manejo de errores:

sin-manejo-errores.jsjavascript
1const datos = '{"nombre": "Ana", edad: 25}'; // ❌ JSON inválido
2 
3// Esto rompe el programa
4const usuario = JSON.parse(datos);
5console.log(usuario.nombre);
6 
7// ❌ Error: Unexpected token e in JSON at position 18
8// El código se detiene aquí y no continúa
9console.log('Este mensaje nunca se muestra');

❌ Problema:

Cuando ocurre un error sin control, todo el programa se detiene y el usuario ve una página rota. ¡Mala experiencia!

2. try/catch - Capturar errores

try/catch te permite "intentar" ejecutar código y "capturar" el error si algo sale mal, sin romper el programa.

Sintaxis:

1try {
2  // Código que puede fallar
3} catch (error) {
4  // Qué hacer si hay error
5}

Ejemplo básico:

con-try-catch.jsjavascript
1const datos = '{"nombre": "Ana", edad: 25}'; // JSON inválido
2 
3try {
4  // Intenta parsear el JSON
5  const usuario = JSON.parse(datos);
6  console.log(usuario.nombre);
7} catch (error) {
8  // Si hay error, muestra un mensaje amigable
9  console.log('❌ Error al procesar los datos');
10  console.log('Detalles:', error.message);
11}
12 
13// ✅ El programa continúa normalmente
14console.log('El programa sigue funcionando');

✅ Ventaja:

Con try/catch, el programa no se rompe. Puedes mostrar un mensaje amigable al usuario y continuar con otras operaciones.

3. El objeto error

Cuando ocurre un error, JavaScript crea un objeto de error con información útil:

Propiedades útiles:

  • error.message - Descripción del error
  • error.name - Tipo de error
  • error.stack - Rastro completo

Tipos comunes:

  • SyntaxError - Sintaxis incorrecta
  • ReferenceError - Variable no existe
  • TypeError - Tipo incorrecto
  • RangeError - Valor fuera de rango
objeto-error.jsjavascript
1try {
2  const resultado = funcionQueNoExiste();
3} catch (error) {
4  console.log('Nombre del error:', error.name);
5  // 'ReferenceError'
6 
7  console.log('Mensaje:', error.message);
8  // 'funcionQueNoExiste is not defined'
9 
10  console.log('Error completo:', error);
11  // Muestra todo el objeto de error
12}

4. finally - Siempre se ejecuta

El bloque finally se ejecuta siempre, haya error o no. Útil para limpiar recursos.

finally.jsjavascript
1function procesarArchivo() {
2  console.log('📂 Abriendo archivo...');
3 
4  try {
5    // Intentar leer el archivo
6    const datos = JSON.parse(archivoInvalido);
7    console.log('✅ Datos procesados');
8  } catch (error) {
9    console.log('❌ Error:', error.message);
10  } finally {
11    // Se ejecuta SIEMPRE (haya error o no)
12    console.log('🔒 Cerrando archivo...');
13  }
14}
15 
16procesarArchivo();
17// Salida:
18// 📂 Abriendo archivo...
19// ❌ Error: archivoInvalido is not defined
20// 🔒 Cerrando archivo...

💡 Casos de uso de finally:

  • • Cerrar conexiones a bases de datos
  • • Ocultar indicadores de carga
  • • Liberar recursos
  • • Limpiar estados temporales

5. throw - Lanzar errores personalizados

Puedes crear tus propios errores con throw para validar datos o condiciones.

throw-ejemplo.jsjavascript
1function dividir(a, b) {
2  if (b === 0) {
3    throw new Error('No se puede dividir entre cero');
4  }
5  return a / b;
6}
7 
8// Ejemplo 1: División válida
9try {
10  const resultado = dividir(10, 2);
11  console.log('Resultado:', resultado);
12  // Resultado: 5
13} catch (error) {
14  console.log('❌ Error:', error.message);
15}
16 
17// Ejemplo 2: División inválida
18try {
19  const resultado = dividir(10, 0);
20  console.log('Resultado:', resultado);
21} catch (error) {
22  console.log('❌ Error:', error.message);
23  // ❌ Error: No se puede dividir entre cero
24}

💡 ¿Cuándo usar throw?

  • • Validar formularios (edad, email, contraseñas)
  • • Verificar que los datos sean del tipo correcto
  • • Prevenir operaciones imposibles (como dividir entre 0)

📝 Ejercicio práctico

Procesar JSON de forma segura

Crea un código que intente parsear un JSON y maneje el error si el JSON es inválido.

Pasos:

  1. Crea una variable con un JSON inválido (ej: sin comillas en las claves)
  2. Usa try/catch para intentar parsearlo
  3. Si funciona, muestra los datos
  4. Si falla, muestra un mensaje de error
Ver solución
ejercicio.jsjavascript
1// JSON inválido (sin comillas en las claves)
2const jsonInvalido = '{nombre: "Ana", edad: 25}';
3 
4try {
5  const usuario = JSON.parse(jsonInvalido);
6  console.log('Usuario:', usuario);
7} catch (error) {
8  console.log('❌ Error al parsear JSON');
9  console.log('Detalle:', error.message);
10}
11 
12// JSON válido
13const jsonValido = '{"nombre": "Luis", "edad": 30}';
14 
15try {
16  const usuario = JSON.parse(jsonValido);
17  console.log('✅ Usuario cargado:', usuario.nombre);
18} catch (error) {
19  console.log('❌ Error al parsear JSON');
20}

💡 Nota: Practicaremos más try/catch cuando veamos Fetch API y llamadas a servidores.

📚 Resumen

try/catch

Captura errores para que el programa no se rompa

try { ... } catch(e) { ... }

finally

Se ejecuta siempre (con o sin error)

finally { cleanup() }

throw

Lanza un error personalizado

throw new Error('mensaje')

error.message

Descripción del error

catch(error) { error.message }
Anterior: JSON Siguiente: Asincronía