Errores de JavaScript: lanzar y tratar de detectar

  • La instrucción try te permite probar un bloque de código en busca de errores.
  • La declaración catch te permite manejar el error.
  • La sentencia throw te permite crear errores personalizados.
  • La sentencia finally te permite ejecutar código, después de intentar y capturar, independientemente del resultado.

¡Se producirán errores!

Al ejecutar código JavaScript, pueden ocurrir diferentes errores.

Los errores pueden ser errores de codificación cometidos por el programador, errores debidos a una entrada incorrecta y otras cosas imprevisibles.

Ejm

En este ejemplo, hemos escrito alert como adddlert para producir deliberadamente un error:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Error Handling</h2>

<p>This example demonstrates how to use <b>catch</b> to diplay an error.</p>

<p id="demo"></p>

<script>
try {
adddlert("Welcome guest!");
}
catch(err) {
document.getElementById("demo").innerHTML = err.message;
}
</script>

</body>
</html>

JavaScript detecta adddlert como un error y ejecuta el código de captura para manejarlo.

Javascript try y catch

La instrucción try te permite definir un bloque de código para que se pruebe en busca de errores mientras se ejecuta.

La declaración catch te permite definir un bloque de código que se ejecutará, si ocurre un error en el bloque try.

Las declaraciones de JavaScript que intentan capturar vienen en pares:

try {
Bloque de código para probar
}
catch(err) {
  Bloque de código para manejar errores

JavaScript Lanzar Errores

Cuando ocurre un error, JavaScript normalmente se detiene y genera un mensaje de error. El término técnico para esto es: JavaScript lanzará una excepción (lanzará un error). JavaScript realmente creará un objeto Error con dos propiedades: nombre y mensaje.

La declaración throw

La sentencia throw te permite crear un error personalizado. Técnicamente, puedes lanzar una excepción (lanzar un error). La excepción puede ser una cadena de JavaScript, un número, un booleano o un objeto:

Ejm

throw "Too big";    // throw a text
throw 500;          // throw a number

Si usas throw junto con try y catch, puedes controlar el flujo del programa y generar mensajes de error personalizados.

Ejemplo de validación de entrada

Este ejemplo examina la entrada. Si el valor es incorrecto, se lanza una excepción (err). La excepción (err) es detectada por la declaración catch y se muestra un mensaje de error personalizado:

Ejm

<!DOCTYPE html>
<html>
<body>

<p>Please input a number between 5 and 10:</p>

<input id="demo" type="text">
<button type="button" onclick="myFunction()">Test Input</button>
<p id="p01"></p>

<script>
function myFunction() {
var message, x;
message = document.getElementById("p01");
message.innerHTML = "";
x = document.getElementById("demo").value;
try { 
if(x == "") throw "empty";
if(isNaN(x)) throw "not a number";
x = Number(x);
if(x < 5) throw "too low";
if(x > 10) throw "too high";
}
catch(err) {
message.innerHTML = "Input is " + err;
}
}
</script>

</body>
</html>

Validación HTML

El código anterior es solo un ejemplo. Los navegadores modernos a menudo usarán una combinación de JavaScript y validación HTML incorporada, usando reglas de validación predefinidas definidas en atributos HTML.

Ejm

<input id="demo" type="number" min="5" max="10" step="1">

La última declaración

La sentencia finalmente te permite ejecutar código, después de intentar y capturar, independientemente del resultado:

Ejm

try {
  Block of code to try
}
catch(err) {
  Block of code to handle errors
}
finally {
  Block of code to be executed regardless of the try / catch result
}

Ejm

<!DOCTYPE html>
<html>
<body>

<p>Please input a number between 5 and 10:</p>

<input id="demo" type="text">
<button type="button" onclick="myFunction()">Test Input</button>

<p id="p01"></p>

<script>
function myFunction() {
var message, x;
message = document.getElementById("p01");
message.innerHTML = "";
x = document.getElementById("demo").value;
try { 
if(x == "") throw "is empty";
if(isNaN(x)) throw "is not a number";
x = Number(x);
if(x > 10) throw "is too high";
if(x < 5) throw "is too low";
}
catch(err) {
message.innerHTML = "Input " + err;
}
finally {
document.getElementById("demo").value = "";
}
}
</script>

</body>
</html>

El objeto Error

JavaScript tiene un objeto de error incorporado que proporciona información de error cuando ocurre un error.

El objeto de error proporciona dos propiedades útiles: nombre y mensaje.

Propiedades del objeto Error

Propiedad Descripción
name Establece o devuelve un nombre de error
message Establece o devuelve un mensaje de error (una cadena)

 

Propiedad del nombre Error

La propiedad de nombre de error puede devolver seis valores diferentes.

Nombre de Error Descripción
EvalError Ha ocurrido un error en la función eval()
RangeError Se ha producido un número “fuera de rango”
ReferenceError Ha ocurrido una referencia ilegal
SyntaxError Un error de sintaxis ha ocurrido
TypeError Ha ocurrido un error de tipo
URIError Se produjo un error en encodeURI()

Los diferentes nombres son descritos

EvalError

Un EvalError indica un error en la función eval(). Las versiones más nuevas de JavaScript no arrojan EvalError. Utilice SyntaxError en su lugar.

RangeError

Se lanza un RangeError si usas un número que está fuera del rango de valores legales. Por ejemplo. no puedes establecer el número de dígitos significativos de un número en 500.

Ejm

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Errors</h2>

<p>You cannot set the number of significant digits of a number to 500:</p>

<p id="demo">

<script>
var num = 1;
try {
num.toPrecision(500);
}
catch(err) {
document.getElementById("demo").innerHTML = err.name;
}
</script>

</body>
</html>

ReferenceError

Se lanza un ReferenceError si usas (referencias) una variable que no ha sido declarada:

Ejm

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Errors</h2>

<p>You cannot use the value of a non-existing variable:</p>

<p id="demo"></p>

<script>
var x;
try {
x = y + 1;
}
catch(err) {
document.getElementById("demo").innerHTML = err.name;
}
</script>

</body>
</html>

SyntaxError

Se produce SyntaxError si intentas evaluar el código con un error de sintaxis.

Ejm

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Errors</h2>

<p>You cannot evaluate code that contains a syntax error:</p>

<p id="demo"></p>

<script>
try {
eval("alert('Hello)");
}
catch(err) {
document.getElementById("demo").innerHTML = err.name;
}
</script>

</body>
</html>

TypeError

Se lanza un TypeError si usas un valor que está fuera del rango de tipos esperados.

Ejm

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Errors</h2>

<p>You cannot convert a number to upper case:</p>

<p id="demo"></p>

<script>
var num = 1;
try {
num.toUpperCase();
}
catch(err) {
document.getElementById("demo").innerHTML = err.name;
}
</script>

</body>
</html>

Error de URI (Identificador uniforme de recursos)

Se lanza un URIError si usas caracteres ilegales en una función URI.

Ejm

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Errors</h2>

<p>Some characters cannot be decoded with decodeURI():</p>

<p id="demo"></p>

<script>
try {
decodeURI("%%%");
}
catch(err) {
document.getElementById("demo").innerHTML = err.name;
}
</script>

</body>
</html>

Propiedades de objeto de error no estándar

Mozilla y Microsoft definen algunas propiedades de objetos de error no estándar.

  • fileName (Mozilla)
  • lineNumber (Mozilla)
  • columnNumber (Mozilla)
  • stack (Mozilla)
  • description (Microsoft)
  • number (Microsoft)

No utilices estas propiedades en sitios web públicos. No funcionarán en todos los navegadores