Erros de JavaScript Tente Catch Throw

Índice

    Mostrar índice

jogar e tentar...pegar...finalmente

A instrução try define um bloco de código a ser executado (para tentar).

A instrução catch define um bloco de código para lidar com qualquer erro.

A instrução finally define um bloco de código para ser executado independentemente do resultado.

A instrução throw define um erro personalizado.

Erros vão acontecer!

Ao executar o código JavaScript, diferentes erros podem ocorrer.

Os erros podem ser erros de codificação cometidos pelo programador, erros devido a erros entrada e outras coisas imprevisíveis.

Exemplo

Neste exemplo, escrevemos incorretamente "alert" como "adddlert" para produzir deliberadamente um erro:

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

Experimente você mesmo →

<!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 um erro e executa o pegar código para lidar com isso.

try ... catch

A instrução try permite definir um bloco de código a ser testado em busca de erros enquanto está sendo executado.

A instrução catch permite definir um bloco de código para ser executado, se ocorrer um erro no bloco try.

As instruções JavaScript try e catch venha em pares:

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

JavaScript lança erros

Quando ocorre um erro, o JavaScript irá normalmente para e gera uma mensagem de erro.

O termo técnico para isso é: JavaScript lançará um exceção (lança um erro).

Na verdade, o JavaScript criará um objeto Error com duas propriedades: nome e mensagem.

A instrução throw

A instrução throw permite criar um erro personalizado.

Tecnicamente você pode lançar uma exceção (lançar um erro).

A exceção pode ser uma String JavaScript, um Número, um Booleano ou um Objeto:

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

Se você usar throw junto com tente e catch, você pode controlar o programa fluir e gerar mensagens de erro personalizadas.

Exemplo de validação de entrada

Este exemplo examina a entrada. Se o valor estiver errado, uma exceção (err) é lançada.

A exceção (err) é capturada pela instrução catch e uma mensagem de erro personalizada é exibida:

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

Experimente você mesmo →

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

Validação HTML

O código acima é apenas um exemplo.

Os navegadores modernos geralmente usam uma combinação de JavaScript e HTML integrado validação, usando regras de validação predefinidas definidas em atributos HTML:

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

Você pode ler mais sobre validação de formulários em um capítulo posterior deste tutorial.

A declaração finalmente

A instrução finally permite executar o código, depois de tentar e pegar, independentemente do resultado:

Sintaxe

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
}

Exemplo

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 = "";
    }
}

Experimente você mesmo →

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

O objeto de erro

JavaScript possui um objeto de erro integrado que fornece informações de erro quando ocorre um erro.

O objeto de erro fornece duas propriedades úteis: nome e mensagem.

Propriedades do objeto de erro

name

Define ou retorna um nome de erro

message

Define ou retorna uma mensagem de erro (uma string)

Valores de nome de erro

Seis valores diferentes podem ser retornados pela propriedade do nome do erro:

EvalError

Ocorreu um erro na função eval()

RangeError

Ocorreu um número "fora do intervalo"

ReferenceError

Ocorreu uma referência ilegal

SyntaxError

Ocorreu um erro de sintaxe

TypeError

Ocorreu um erro de tipo

URIError

Ocorreu um erro em encodeURI()

Os seis valores diferentes são descritos abaixo.

Erro de avaliação

Um EvalError indica um erro na função eval().

Versões mais recentes de JavaScript não lançam EvalError. Use SyntaxError em vez disso.

Erro de intervalo

Um RangeError será lançado se você usar um número que esteja fora a gama de valores legais.

Por exemplo: Você não pode definir o número de dígitos significativos de um número como 500.

Exemplo

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

Experimente você mesmo →

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

Erro de referência

Um ReferenceError é lançado se você usar (referência) uma variável que não foi declarado:

Exemplo

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

Experimente você mesmo →

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

Erro de sintaxe

Um SyntaxError será lançado se você tentar avaliar o código com um erro de sintaxe.

Exemplo

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

Experimente você mesmo →

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

Erro de tipo

Um TypeError será lançado se você usar um valor que esteja fora do gama de tipos esperados:

Exemplo

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

Experimente você mesmo →

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

Erro de URI (Identificador Uniforme de Recursos)

Um URIError será lançado se você usar caracteres ilegais em uma função URI:

Exemplo

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

Experimente você mesmo →

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

Propriedades de objeto de erro não padrão

Mozilla e Microsoft definem algumas propriedades de objeto de erro não padrão:

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

Não use essas propriedades em sites públicos. Eles não funcionarão em todos os navegadores.

Referência de erro completa

Para uma referência completa do objeto Error, vá para nosso Complete Referência de erro de JavaScript.