[Opcional] Si no tienes acceso al servidor que aloja el script, puedes considerar la posibilidad de utilizar un proxy para retransmitir tu petici\u00f3n al servidor y devolverla al cliente con las cabeceras correctas.<\/li>\n<\/ol>\nUna vez que puedas acceder a los detalles del error, podr\u00e1s ponerte manos a la obra para solucionar el problema, que probablemente estar\u00e1 relacionado con la biblioteca de terceros o con la red.<\/p>\n
C\u00f3mo Identificar y Prevenir Errores en JavaScript<\/h2>\n Aunque los errores comentados anteriormente son los m\u00e1s comunes y frecuentes en JavaScript con los que te encontrar\u00e1s, basarse en algunos ejemplos nunca es suficiente. Es vital entender c\u00f3mo detectar y prevenir cualquier tipo de error en una aplicaci\u00f3n JavaScript mientras la desarrollas. A continuaci\u00f3n te explicamos c\u00f3mo puedes manejar los errores en JavaScript.<\/p>\n
Lanzar y Atrapar Errores Manualmente<\/h3>\n La forma m\u00e1s fundamental de manejar los errores lanzados manualmente o por el entorno de ejecuci\u00f3n es atraparlos. Como la mayor\u00eda de los lenguajes, JavaScript ofrece un conjunto de palabras clave para manejar los errores. Es esencial que conozcas cada una de ellas en profundidad antes de ponerte a gestionar errores en tu aplicaci\u00f3n JavaScript.<\/p>\n
throw<\/h4>\n La primera y m\u00e1s b\u00e1sica palabra clave del conjunto es throw<\/code>. Como es evidente, la palabra clave throw se utiliza para lanzar errores y crear excepciones en el entorno de ejecuci\u00f3n de JavaScript de forma manual. Ya hemos hablado de esto anteriormente en este art\u00edculo, y aqu\u00ed est\u00e1 la esencia del significado de esta palabra clave:<\/p>\n\nPuedes hacer throw<\/code> a cualquier cosa, incluyendo n\u00fameros, cadenas y objetos Error<\/code>.<\/li>\nSin embargo, no es aconsejable lanzar tipos de datos primitivos como cadenas y n\u00fameros, ya que no llevan informaci\u00f3n de depuraci\u00f3n sobre los errores.<\/li>\n Ejemplo throw TypeError(\"Please provide a string\")<\/code><\/li>\n<\/ul>\ntry<\/h4>\n La palabra clave try<\/code> se usa para indicar que un bloque de c\u00f3digo puede lanzar una excepci\u00f3n. Su sintaxis es:<\/p>\ntry {\n \/\/ error-prone code here\n}<\/code><\/pre>\nEs importante tener en cuenta que un bloque catch<\/code> debe seguir siempre al bloque try<\/code> para manejar los errores con eficacia.<\/p>\ncatch<\/h4>\n La palabra clave catch<\/code> se usa para crear un bloque catch. Este bloque de c\u00f3digo se encarga de gestionar los errores que el bloque try<\/code> atrapa. Esta es su sintaxis:<\/p>\ncatch (exception) {\n \/\/ code to handle the exception here\n}<\/code><\/pre>\nY as\u00ed es como se implementan los bloques try<\/code> y catch<\/code> juntos:<\/p>\ntry {\n \/\/ business logic code\n} catch (exception) {\n \/\/ error handling code\n}<\/code><\/pre>\nA diferencia de C++ o Java, en JavaScript no puedes a\u00f1adir varios bloques catch<\/code> a un bloque try<\/code>. Esto significa que no puedes hacer esto:<\/p>\ntry {\n \/\/ business logic code\n} catch (exception) {\n if (exception instanceof TypeError) {\n \/\/ do something\n }\n} catch (exception) {\n if (exception instanceof RangeError) {\n \/\/ do something\n }\n}<\/code><\/pre>\nEn su lugar, puedes utilizar una sentencia if...else<\/code> o una sentencia switch case dentro del bloque catch \u00fanico para manejar todos los posibles casos de error. El aspecto ser\u00eda el siguiente:<\/p>\ntry {\n \/\/ business logic code\n} catch (exception) {\n if (exception instanceof TypeError) {\n \/\/ do something\n } else if (exception instanceof RangeError) {\n \/\/ do something else\n }\n}<\/code><\/pre>\nfinally<\/h4>\n La palabra clave finally<\/code> se usa para definir un bloque de c\u00f3digo que se ejecuta despu\u00e9s de gestionar un error. Este bloque se ejecuta despu\u00e9s de los bloques try y catch.<\/p>\nAdem\u00e1s, el bloque finally se ejecutar\u00e1 independientemente del resultado de los otros dos bloques. Esto significa que aunque el bloque catch no pueda manejar el error por completo o se lance un error en el bloque catch, el int\u00e9rprete ejecutar\u00e1 el c\u00f3digo en el bloque finally antes de que el programa se bloquee.<\/p>\n
Para que se considere v\u00e1lido, el bloque try en JavaScript debe ir seguido de un bloque catch o de un bloque finally. Sin ninguno de ellos, el int\u00e9rprete lanzar\u00e1 un SyntaxError. Por lo tanto, aseg\u00farate de seguir tus bloques try con al menos uno de ellos cuando manejes los errores.<\/p>\n
Maneja los Errores Globalmente con el M\u00e9todo onerror()<\/h3>\n El m\u00e9todo onerror()<\/code> est\u00e1 disponible para todos los elementos HTML para manejar cualquier error que pueda ocurrir con ellos. Por ejemplo, si una etiqueta img<\/code> no puede encontrar la imagen cuya URL se especifica, dispara su m\u00e9todo onerror para permitir al usuario manejar el error.<\/p>\nLo normal es que proporciones otra URL de imagen en la llamada onerror para qu\u00e9 la etiqueta img<\/code> pueda recurrir a ella. As\u00ed es como puedes hacerlo mediante JavaScript:<\/p>\nconst image = document.querySelector(\"img\")\n\nimage.onerror = (event) => {\n console.log(\"Error occurred: \" + event)\n}<\/code><\/pre>\nSin embargo, puedes utilizar esta funci\u00f3n para crear un mecanismo global de gesti\u00f3n de errores para tu aplicaci\u00f3n. As\u00ed es como puedes hacerlo:<\/p>\n
window.onerror = (event) => {\n console.log(\"Error occurred: \" + event)\n}<\/code><\/pre>\nCon este manejador de eventos, puedes deshacerte de los m\u00faltiples bloques try...catch<\/code> que hay en tu c\u00f3digo y centralizar el manejo de errores de tu aplicaci\u00f3n de forma similar al manejo de eventos. Puedes adjuntar varios manejadores de errores a la ventana para mantener el principio de responsabilidad \u00fanica de los principios de dise\u00f1o SOLID. El int\u00e9rprete recorrer\u00e1 todos los manejadores hasta llegar al apropiado.<\/p>\nPasar los Errores Mediante Devoluciones de Llamada<\/h3>\n Mientras que las funciones simples y lineales permiten que el manejo de errores siga siendo sencillo, las devoluciones de llamada pueden complicar el asunto.<\/p>\n
Considera el siguiente fragmento de c\u00f3digo:<\/p>\n
const calculateCube = (number, callback) => {\n setTimeout(() => {\n const cube = number * number * number\n callback(cube)\n }, 1000)\n}\n\nconst callback = result => console.log(result)\n\ncalculateCube(4, callback)<\/code><\/pre>\nLa funci\u00f3n anterior demuestra una condici\u00f3n as\u00edncrona en la que una funci\u00f3n se toma un tiempo para procesar las operaciones y devuelve el resultado m\u00e1s tarde con la ayuda de una devoluci\u00f3n de llamada.<\/p>\n
Si intentas introducir una cadena en lugar de 4 en la llamada a la funci\u00f3n, obtendr\u00e1s como resultado NaN<\/code>.<\/p>\nEsto debe manejarse adecuadamente. He aqu\u00ed c\u00f3mo hacerlo:<\/p>\n
const calculateCube = (number, callback) => {\n\n setTimeout(() => {\n if (typeof number !== \"number\")\n throw new Error(\"Numeric argument is expected\")\n\n const cube = number * number * number\n callback(cube)\n }, 1000)\n}\n\nconst callback = result => console.log(result)\n\ntry {\n calculateCube(4, callback)\n} catch (e) { console.log(e) }<\/code><\/pre>\nEsto deber\u00eda resolver el problema idealmente. Sin embargo, si intentas pasar una cadena a la llamada de la funci\u00f3n, recibir\u00e1s esto:<\/p>\nEjemplo de error con un argumento equivocado.<\/figcaption><\/figure>\nAunque hayas implementado un bloque try-catch al llamar a la funci\u00f3n, sigue diciendo que el error es uncaught. El error se lanza despu\u00e9s de que se haya ejecutado el bloque catch debido al retardo del tiempo de espera.<\/p>\n
Esto puede ocurrir r\u00e1pidamente en las llamadas a la red, donde se producen retrasos inesperados. Es necesario que cubras estos casos mientras desarrollas tu aplicaci\u00f3n.<\/p>\n
A continuaci\u00f3n te explicamos c\u00f3mo puedes manejar los errores correctamente en las devoluciones de llamada:<\/p>\n
const calculateCube = (number, callback) => {\n\n setTimeout(() => {\n if (typeof number !== \"number\") {\n callback(new TypeError(\"Numeric argument is expected\"))\n return\n }\n const cube = number * number * number\n callback(null, cube)\n }, 2000)\n}\n\nconst callback = (error, result) => {\n if (error !== null) {\n console.log(error)\n return\n }\n console.log(result)\n}\n\ntry {\n calculateCube('hey', callback)\n} catch (e) {\n console.log(e)\n}<\/code><\/pre>\nAhora, la salida en la consola ser\u00e1:<\/p>\nEjemplo de TypeError con argumento ilegal.<\/figcaption><\/figure>\nEsto indica que el error se ha gestionado adecuadamente.<\/p>\n
Manejar los Errores en las Promesas<\/h3>\n La mayor\u00eda de la gente tiende a preferir las promesas para manejar las actividades as\u00edncronas. Las promesas tienen otra ventaja: una promesa rechazada no termina tu script. Sin embargo, tienes que implementar un bloque catch para gestionar los errores en las promesas. Para entenderlo mejor, reescribamos la funci\u00f3n calculateCube()<\/code> utilizando promesas:<\/p>\nconst delay = ms => new Promise(res => setTimeout(res, ms));\n\nconst calculateCube = async (number) => {\n if (typeof number !== \"number\")\n throw Error(\"Numeric argument is expected\")\n await delay(5000)\n const cube = number * number * number\n return cube\n}\n\ntry {\n calculateCube(4).then(r => console.log(r))\n} catch (e) { console.log(e) }<\/code><\/pre>\nEl tiempo de espera del c\u00f3digo anterior se ha aislado en la funci\u00f3n delay<\/code> para que se entienda. Si intentas introducir una cadena en lugar de 4, la salida que obtendr\u00e1s ser\u00e1 similar a esta<\/p>\nEjemplo de TypeError con un argumento ilegal en Promise.<\/figcaption><\/figure>\nDe nuevo, esto se debe a que Promise<\/code> lanza el error despu\u00e9s de que todo lo dem\u00e1s haya terminado de ejecutarse. La soluci\u00f3n a este problema es sencilla. Basta con a\u00f1adir una llamada a catch()<\/code> a la cadena de la promesa, de la siguiente manera:<\/p>\ncalculateCube(\"hey\")\n.then(r => console.log(r))\n.catch(e => console.log(e))<\/code><\/pre>\nAhora la salida ser\u00e1:<\/p>\nEjemplo de TypeError con argumento ilegal<\/figcaption><\/figure>\nPuedes observar lo f\u00e1cil que es manejar errores con promesas. Adem\u00e1s, puedes encadenar un bloque finally()<\/code> y la llamada a la promesa para a\u00f1adir c\u00f3digo que se ejecutar\u00e1 una vez finalizada la gesti\u00f3n de errores.<\/p>\nAlternativamente, tambi\u00e9n puedes manejar los errores en las promesas utilizando la t\u00e9cnica tradicional de try-catch-finally. As\u00ed es como se ver\u00eda tu llamada a la promesa en ese caso:<\/p>\n
try {\n let result = await calculateCube(\"hey\")\n console.log(result)\n} catch (e) {\n console.log(e)\n} finally {\n console.log('Finally executed\")\n}<\/code><\/pre>\n
![\"The](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/11\/type-error-output-numeric.png\")