Manejo de errores en JavaScript

- Andrés Cruz

In english

Manejo de errores en JavaScript

Cuando hacemos una aplicación, siempre encontraremos errores. ¿Es por nuestros errores al hacer el código o por errores de entrada del usuario? Una buena aplicación creará un mensaje de error como una opción cuando se ejecute el código porque nos facilitará el manejo de los errores que ocurran.

Cómo manejar los mensajes de error para evitar fallas. Muy bien, vayamos directamente al tutorial.

Try and Catch

Para manejar los errores de JavaScript, use try and catch. Escribir el código try-catch para manejar el error es así:

try {
    // code
} catch (error) {
    // error handling
}

En el código anterior, hemos creado el código, el primer código de prueba es para brindar una oportunidad para que el código de prueba sea capturado y manejado por el bloque de código de captura. Mientras tanto, si no hay ningún error en el código, se ignorará el bloque catch.

try {
    console.log("first blok try");
    console.log("last blok try");
} catch (error) {
    console.log("No error occurs, then this code is ignored");
}
 
/* output
first blok try
last blok try
*/

El código del bloque try anterior no devolverá un error, por lo que el código del bloque catch se ignorará y no se ejecutará. El siguiente es un ejemplo de código que genera un error:

try {
    console.log("First blok try");   // (1)
    errorCode;                      // (2)
    console.log("Last blok try");  // (3)
} catch (error) {
    console.log("An error occurred!");  // (4)
}
 
/* output
First blok try
An error occurred!
*/

La línea de código (2) producirá un error. Se detendrá la ejecución del código dentro del bloque de prueba, por lo que la línea de código (3) no se ejecutará. Luego, el código continuará hasta la línea (4) o el bloque catch.

Ahora considere el bloque catch. Hay catch tiene un parámetro llamado error (el nombre de la variable se puede cambiar). Una variable de error es un objeto que almacena información detallada sobre el error que ocurrió.

El objeto de error tiene varias propiedades principales, a saber:

  • name: El nombre del error que ocurrió.
  • message: Mensaje sobre los detalles del error.

pila: Información sobre la secuencia de eventos que causaron el error. Generalmente se usa para la depuración porque contiene información sobre qué línea causó el error.

Ahora intentemos modificar el código y mostrar la propiedad de error anterior.

try {
    console.log("First blok try");   // (1)
    errorCode;                      // (2)
    console.log("Last blok try");  // (3)
} catch (error) {
    console.log(error.name);
    console.log(error.message);
    console.log(error.stack);
}
 
/* output
Awal blok try
ReferenceError
errorCode is not defined
ReferenceError: errorCode is not defined
    at file:///home/dicoding/Playground/javascript/CoffeeMachine/error.js:3:5
    at ModuleJob.run (internal/modules/esm/module_job.js:152:23)
    at async Loader.import (internal/modules/esm/loader.js:166:24)
    at async Object.loadESM (internal/process/esm_loader.js:68:5)
*/

De la información anterior, podemos saber que el error que aparece es ReferenceError porque errorCode se considera una variable o valor indefinido.

try-catch-finally

Además de intentar y atrapar, hay un bloque más en el mecanismo de manejo de errores en JavaScript, a saber, finalmente. El bloque finalmente seguirá ejecutándose independientemente del resultado del bloque try-catch.

try {
    console.log("First blok try");
    console.log("Last blok try");
} catch (error) {
    console.log("This line is ignored");
} finally {
    console.log("Will still be executed");
}
 
/* output
First blok try
Last blok try
Will still be executed
*/

Throwing Errors

Ahora vamos a tratar con un caso más común. Tenga en cuenta el siguiente código:

let json = '{ "name": "Johon", "age": 20 }';
 
try {
    let user = JSON.parse(json);
 
    console.log(user.name);
    console.log(user.age);
} catch (error) {
    console.log(error.name);
    console.log(error.message);
}

En el código anterior, la función JSON.parse analizará o convertirá la variable JSON (String) en un objeto. Nos encontraremos con muchos escenarios como el anterior cuando hagamos solicitudes a la API.

Ejecute el código anterior en su editor de texto. La aplicación debería funcionar sin problemas y sin causar errores.

Entonces, ¿qué sucede si la cadena JSON no coincide con el formato del objeto JavaScript?

try {
    let user = JSON.parse(json);
 
    console.log(user.name);
    console.log(user.age);
} catch (error) {
    console.log(error.name);
    console.log(error.message);
}
 
 
/* output
SyntaxError
Unexpected token b in JSON at position 2
*/

Si el JSON no coincide con el formato, JSON.parse generará un error. El bloque catch detectará el error y se ejecutará el código que contiene.

https://javascript.plainenglish.io/javascript-error-handling-3ec6729ad83e

Andrés Cruz

Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter

Andrés Cruz En Udemy

Acepto recibir anuncios de interes sobre este Blog.

!Cursos desde!

10$

En Udemy

Quedan 3d 21:32!


Udemy

!Cursos desde!

4$

En Academia

Ver los cursos

!Libros desde!

1$

Ver los libros
¡Hazte afiliado en Gumroad!