Manejo de errores en JavaScript y mecanografiado
Siempre que ocurre un error en tiempo de ejecución, se "lanza" en Javascript y TypeScript, como es el caso en la mayoría de los lenguajes de programación. Los errores lanzados no manejados provocarán un bloqueo de su aplicación o servicio, por lo tanto, a la peor experiencia de usuario posible. Si ocurre un error, cualquier progreso no guardado se pierde y los usuarios podrían iniciar un proceso largo (por ejemplo, si un usuario se estaba inscribiendo en una plataforma proporcionando mucha información) de nuevo. El resultado es que lo más probable es que esos usuarios nunca vuelvan a utilizar su producto, ya que se ha perdido la confianza.
Para manejar estos casos, se puede "detectar" un error. Para detectar errores en Javascript y TypeScript, simplemente envuelva su código en un bloque de "prueba", seguido de un bloque de "captura".
async function getData(){
try {
// Call a dummy async 'fetch'-functoin
const result = await fetch();
return { result };
} catch(error) {
return { error };
}
}
// ... later in your code ....
const { result, error } = await getData();
if (error){
// ... handle error case.
}
// Access the results.
El resultado es que el error no se propagará por todo el sistema, lo que conduce al bloqueo, sino que se manejará directamente en el ámbito de su código. La aplicación o el servicio no fallará y se puede aplicar una estrategia de mitigación para procesar el error.
Manejo especial con el bloque "finalmente"
Como paso adicional para manejar errores, Javascript y Typecript proporcionan una palabra clave adicional "finalmente". Tal bloque "finalmente" ejecuta cualquier código dentro de su alcance después de que tanto el bloque "intentar" como el bloque "atrapar" se hayan ejecutado (si ocurrió un error).
// This function is absolutely save
// to call. It fetches some data and
// optionally catches a potential error.
//
// After everything's done, a 'finally'
// sends the error to our backend for logs,
// if there was any.
async function getData(){
// In this case, we store the result
// and error in mutable variables,
// then return both.
let result: Result;
let error: Error;
try {
// Call a dummy async 'fetch'-function
result = await fetch();
} catch(e) {
error = e;
} finally {
// After the whole try/catch has been
// processed, we can log the error.
if(error){
await trackErrorInCloud(error);
}
}
return { result, error };
}
// ... same as before ...
¡Pero espera hay mas! ¿Sabía que el bloque "finalmente" se ejecuta incluso si devuelve un resultado en el bloque "intentar" o "atrapar"? He aquí un ejemplo de lo que quiero decir con eso.
// Same as the example before, but
// now we directly return from within
// each code block. And this is where
// a side effect can happen.
async function getData(){
try {
const result = await fetch();
return { result };
} catch(error) {
return { error }
} finally {
//
// WATCH OUT!
//
// Just for demo purpose, but this
// line of code will override both
// the return in 'try' as well as 'catch'!
//
// Returning inside of 'finally' is therefore
// dangerous and will lead to hard-to-debug
// issues.
return { finally: true };
}
}
// data === { finally: true }
const data = await getData();
// Here's a better use case for
// finally.
async function getData(){
let error: Error;
try {
const result = await fetch();
return { result };
} catch(e) {
error = e;
return { error }
} finally {
// No return in finally,
// so it's safe to use.
if(error){
await logInCloud()
}
}
}
// if no error === { result: ... }
// if error === { error: ... }
const data = await getData();
Resumen
Como ha visto, manejar errores en Javascript y Typecript es bastante fácil y evita un bloqueo completo de su aplicación. Es bueno saber el manejo especial de la devolución de resultados en los bloques "probar" y "atrapar" cuando se usa el bloque "finalmente", pero no debe abusarse para evitar implementar su código en un estilo anti-patrón.
