Errores de JavaScript al intentar capturar y lanzar

Tabla de contenido

    Mostrar tabla de contenidos

lanzar y intentar... atrapar...finalmente

La declaración try define un bloque de código para ejecutar (para probar).

La instrucción catch define un bloque de código para manejar cualquier error.

La declaración finally define un bloque de código para ejecutar independientemente del resultado.

La declaración throw define un error personalizado.

¡Ocurrirán errores!

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

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

Ejemplo

En este ejemplo, escribimos mal "alerta" como "adddlert" para producir un error deliberadamente:

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

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Error Handling</h2>

<p>How to use <b>catch</b> to display 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.

try ... catch

La instrucción try le permite definir un bloque de código que se Se prueba en busca de errores mientras se ejecuta.

La instrucción catch le permite definir un bloque de código para ejecutarse si se produce un error en el bloque try.

Las declaraciones de JavaScript try y catch vienen en parejas:

try {
    Block of code to try
}
catch(err) {
    Block of code to handle errors
}

JavaScript arroja 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á un excepción (arroja un error).

JavaScript realmente creará un objeto de error con dos propiedades: nombre y mensaje.

La declaración throw

La instrucción throw le 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:

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

Si usa throw junto con try y catch, puedes controlar el programa fluir 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:

<!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() {
  const message = document.getElementById("p01");
  message.innerHTML = "";
  let x = document.getElementById("demo").value;
  
try { 
    if(x.trim() == "") 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>

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript try catch</h2>

<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() {
  const message = document.getElementById("p01");
  message.innerHTML = "";
  let x = document.getElementById("demo").value;
  try { 
    if(x.trim() == "")  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 sólo un ejemplo.

Los navegadores modernos suelen utilizar una combinación de JavaScript y HTML integrado. validación, utilizando reglas de validación predefinidas definidas en atributos HTML:

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

Puede leer más sobre la validación de formularios en un capítulo posterior de este tutorial.

La declaración finally

La instrucción finally le permite ejecutar código, después de intentarlo y captura, independientemente del resultado:

Sintaxis

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
}

Ejemplo

function myFunction() {
  const message = document.getElementById("p01");
  message.innerHTML = "";
  let x = document.getElementById("demo").value;
  
try { 
    
if(x.trim() == "") 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 = "Error: " + 
err + ".";
  }
  finally {
    document.getElementById("demo").value = "";
    }
}

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript try catch</h2>

<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() {
  const message = document.getElementById("p01");
  message.innerHTML = "";
  let x = document.getElementById("demo").value;
  try { 
    if(x.trim() == "")  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 de error

JavaScript tiene un objeto de error integrado que proporciona información de error cuando se produce un error.

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

Propiedades del objeto de error

name

Establece o devuelve un nombre de error

message

Establece o devuelve un mensaje de error (una cadena)

Valores de nombre de error

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

EvalError

Ha ocurrido un error en la función eval()

RangeError

Se ha producido un número "fuera de rango"

ReferenceError

Se ha producido una referencia ilegal.

SyntaxError

Se ha producido un error de sintaxis.

TypeError

Se ha producido un error de tipo.

URIError

Se ha producido un error en encodeURI()

Los seis valores diferentes se describen a continuación.

Error de evaluación

Un EvalError indica un error en la función eval().

Las versiones más recientes de JavaScript no arrojan EvalError. Utilice SyntaxError en su lugar.

Error de rango

Se genera un RangeError si usa un número que está fuera la gama de valores legales.

Por ejemplo: no puede establecer el número de dígitos significativos de un número en 500.

Ejemplo

let num = 1;
try {
    num.toPrecision(500);   // A number cannot have 500 significant digits
}
catch(err) {
    document.getElementById("demo").innerHTML = err.name;
}

Pruébelo usted mismo →

<!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>
let num = 1;
try {
  num.toPrecision(500);
}
catch(err) {
  document.getElementById("demo").innerHTML = err.name;
}
</script>

</body>
</html>

Error de referencia

Se genera un ReferenceError si usa (referencia) una variable que no ha sido declarado:

Ejemplo

let x = 5;
try {
  x = y + 1;   // y cannot be used (referenced)
}
catch(err) {
    document.getElementById("demo").innerHTML = err.name;
}

Pruébelo usted mismo →

<!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>
let x = 5;
try {
  x = y + 1;
}
catch(err) {
  document.getElementById("demo").innerHTML = err.name;
}
</script>

</body>
</html>

Error de sintaxis

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

Ejemplo

try {
  eval("alert('Hello)");   // Missing ' will produce an error
}
catch(err) {
  document.getElementById("demo").innerHTML = err.name;
}

Pruébelo usted mismo →

<!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>

Error de tecleado

Se genera un TypeError si utiliza un valor que está fuera del gama de tipos esperados:

Ejemplo

let num = 1;
try {
  num.toUpperCase();   // You cannot convert a number to upper case
}
catch(err) {
  document.getElementById("demo").innerHTML = err.name;
}

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Errors</h2>

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

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

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

</body>
</html>

Error de URI (identificador uniforme de recursos)

Se genera un URIError si utiliza caracteres ilegales en una función URI:

Ejemplo

try {
    decodeURI("%%%");   // You cannot URI decode percent signs
}
catch(err) {
  document.getElementById("demo").innerHTML = err.name;
}

Pruébelo usted mismo →

<!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 utilice estas propiedades en sitios web públicos. No funcionarán en todos los navegadores.

Referencia completa de errores

Para obtener una referencia completa del objeto Error, vaya a nuestro Completo Referencia de errores de JavaScript.