El manejo de errores es una de esas cosas que todo desarrollador de JavaScript encuentra, pero no todos profundizan en dominarlo. Si has estado confiando en simples declaraciones de intento... captura, es hora de mejorar tu juego. Esta publicación lo guiará desde el manejo básico de errores hasta la creación de errores personalizados, haciendo que su código sea más resistente y más fácil de depurar.

1. Lo básico: intentar... atrapar

Comencemos con el intento clásico...captura:

try {
  const data = JSON.parse('{"name": "John"}');
  console.log(data.age.toUpperCase()); // This will cause an error
} catch (error) {
  console.error("Something went wrong:", error);
}

Esto es simple y efectivo. El bloque try le permite ejecutar código que podría generar un error y el bloque catch lo captura, lo que le permite manejarlo con elegancia.

Sin embargo, a medida que su aplicación crece, confiar únicamente en esto puede generar mensajes de error menos informativos, lo que hace que la depuración sea una pesadilla. Aquí es donde brilla el manejo de errores personalizado.

2. Comprender los tipos de errores nativos

JavaScript viene con tipos de errores integrados, como:

• Error: el objeto de error genérico.
• TypeError: se produce cuando una variable no es del tipo esperado.
• SyntaxError: se produce cuando el código contiene un error de sintaxis.
• ReferenceError: se produce al hacer referencia a una variable inexistente.

Ejemplo:

try {
  let result = myUndefinedFunction();
} catch (error) {
  if (error instanceof ReferenceError) {
    console.error("ReferenceError detected:", error.message);
  } else {
    console.error("Unexpected error:", error);
  }
}

Al utilizar estos tipos, puede comenzar a crear rutas de manejo de errores más descriptivas. Pero, ¿qué sucede si desea definir errores específicos de la lógica de su aplicación? Ahí es donde entran los errores personalizados.

3. Crear errores personalizados

¿Por qué errores personalizados?

Los errores personalizados ayudan a identificar problemas específicos dentro de su código, lo que hace que sea mucho más fácil de depurar. Por ejemplo, si está creando una API, es posible que desee diferenciar entre ValidationError, AuthenticationError o DatabaseError.

Cómo crear errores personalizados

Creemos un ValidationError como ejemplo:

class ValidationError extends Error {
  constructor(message) {
    super(message);
    this.name = "ValidationError";
  }
}

try {
  const age = -5;
  if (age 



Al extender la clase Error, podemos crear un ValidationError más significativo. Este enfoque brinda claridad sobre la naturaleza del problema, lo que facilita la depuración y hace que el código sea más limpio.


  
  
  4. Enriquecer los errores personalizados con más información


¿Por qué limitarse a un mensaje personalizado? Enriquezcamos nuestro error personalizado con propiedades adicionales como errorCode o statusCode.



class HttpError extends Error {
  constructor(statusCode, message) {
    super(message);
    this.name = "HttpError";
    this.statusCode = statusCode;
  }
}

try {
  const response = { status: 404 };
  if (response.status === 404) {
    throw new HttpError(404, "Resource not found");
  }
} catch (error) {
  if (error instanceof HttpError) {
    console.error(`Error ${error.statusCode}: ${error.message}`);
  } else {
    console.error("Unexpected error:", error);
  }
}




De esta manera, puedes capturar más contexto sobre el error, lo que facilita actuar o iniciar sesión de manera efectiva.


  
  
  5. Creación de una estrategia global de manejo de errores


A medida que su aplicación crezca, querrá una forma centralizada de manejar los errores. Un enfoque es crear una utilidad de manejo de errores que maneje diferentes tipos de errores.



function handleError(error) {
  if (error instanceof ValidationError) {
    console.error("Validation failed:", error.message);
  } else if (error instanceof HttpError) {
    console.error(`HTTP error (${error.statusCode}):`, error.message);
  } else {
    console.error("An unexpected error occurred:", error);
  }
}

try {
  throw new HttpError(500, "Internal Server Error");
} catch (error) {
  handleError(error);
}




Este manejo de errores centralizado ayuda a mantener su código SECO (no se repita) y garantiza un procesamiento de errores consistente en toda su aplicación.


  
  
  6. Aprovechar finalmente la limpieza


A menudo, es posible que necesites realizar tareas de limpieza, como cerrar una conexión de base de datos o borrar tiempos de espera. Ahí es donde finalmente resulta útil:



try {
  // Attempt to execute code
} catch (error) {
  // Handle errors
} finally {
  console.log("This will always execute, whether an error occurred or not.");
}




El uso de finalmente garantiza que este bloque se ejecute independientemente de si se produjo un error o no, lo que lo hace ideal para operaciones de limpieza.


  
  
  7. Integración con servicios de registro


Para aplicaciones de producción, es esencial registrar errores. Servicios como Sentry, LogRocket o Datadog pueden capturar errores con seguimientos completos de la pila, lo que facilita mucho la resolución de problemas.

Ejemplo:



import * as Sentry from '@sentry/browser';

Sentry.init({ dsn: 'YOUR_SENTRY_DSN' });

try {
  // Your code that might throw an error
} catch (error) {
  Sentry.captureException(error);
  handleError(error);
}




Esta integración proporciona una mejor visibilidad de los problemas y le ayuda a monitorear el estado de su aplicación en tiempo real.


  
  
  Pensamientos finales


Al ir más allá de los conceptos básicos de try...catch e incorporar errores personalizados, se crea un código JavaScript más fácil de mantener, legible y robusto. La implementación de estas prácticas no solo facilitará la depuración, sino que también mejorará la confiabilidad general de su aplicación.


  
  
  ¿Qué sigue?

• Experimenta con errores personalizados en tu proyecto actual.
• Implementar un controlador de errores centralizado.
• Integre servicios de registro de errores en su aplicación.

¡Cuéntame cómo manejas los errores en tus proyectos o si tienes algún consejo o truco interesante para compartir!

¿Te gustó esta publicación? ¡Sígueme para obtener más consejos y trucos de JavaScript!