Erros de JavaScript e como corrigi-los

O JavaScript pode ser um pesadelo para depurar: Alguns erros que ele apresenta podem ser muito difíceis de entender no início, e os números de linha fornecidos nem sempre são úteis. Não seria útil ter uma lista onde o senhor pudesse procurar para descobrir o que eles significam e como corrigi-los? Aqui está!

Abaixo está uma lista de erros estranhos em JavaScript. Navegadores diferentes podem fornecer mensagens diferentes para o mesmo erro, portanto, há vários exemplos diferentes quando aplicável.

Como ler erros?

Antes da lista, vamos examinar rapidamente a estrutura de uma mensagem de erro. Compreender a estrutura ajuda a entender os erros, e o senhor terá menos problemas se encontrar algum erro não listado aqui.

Um erro típico do Chrome é o seguinte:

Uncaught TypeError: undefined is not a function

A estrutura do erro é a seguinte:

1. TypeError não detectado: Essa parte da mensagem geralmente não é muito útil. Uncaught significa que o erro não foi detectado em um catch e que o TypeError é o nome do erro.
2. undefined não é uma função: Esta é a parte da mensagem. Com as mensagens de erro, o senhor deve lê-las literalmente. Por exemplo, nesse caso, isso significa literalmente que o código tentou usar undefined como se fosse uma função.

Outros navegadores baseados em webkit, como o Safari, apresentam erros em um formato semelhante ao do Chrome. Os erros do Firefox são semelhantes, mas nem sempre incluem a primeira parte, e as versões recentes do Internet Explorer também apresentam erros mais simples do que o Chrome – mas, nesse caso, mais simples nem sempre significa melhor.

Agora vamos aos erros reais.

TypeError não detectado: undefined não é uma função

Erros relacionados: number não é uma função, object não é uma função, string não é uma função, Unhandled Error: ‘foo’ não é uma função, Function Expected

Ocorre quando o senhor tenta chamar um valor como uma função, sendo que o valor não é uma função. Por exemplo:

var foo = undefined;
foo();

Esse erro geralmente ocorre se o senhor estiver tentando chamar uma função em um objeto, mas digitou o nome errado.

var x = document.getElementByID('foo');

Como as propriedades do objeto que não existem são undefined por padrão, o procedimento acima resultaria nesse erro.

As outras variações, como “number is not a function”, ocorrem quando se tenta chamar um número como se fosse uma função.

Como corrigir esse erro: Verifique se o nome da função está correto. Com esse erro, o número da linha geralmente aponta para o local correto.

Uncaught ReferenceError: Lado esquerdo inválido na atribuição

Erros relacionados: Exceção não detectada: ReferenceError: Não é possível atribuir a ‘functionCall()’, Uncaught exception: ReferenceError: Não é possível atribuir a ‘this’

Causado pela tentativa de atribuir um valor a algo que não pode ser atribuído.

O exemplo mais comum desse erro é com cláusulas if:

if(doSomething() = 'somevalue')

Nesse exemplo, o programador usou acidentalmente um único sinal de igual em vez de dois. A mensagem “left-hand side in assignment” (lado esquerdo na atribuição) se refere à parte do lado esquerdo do sinal de igual, portanto, como o senhor pode ver no exemplo acima, o lado esquerdo contém algo que não pode ser atribuído, o que leva ao erro.

Como corrigir esse erro: Certifique-se de que o senhor não está tentando atribuir valores aos resultados da função ou ao this palavra-chave.

TypeError não capturado: Conversão de estrutura circular em JSON

Erros relacionados: Exceção não detectada: TypeError: JSON.stringify: Not an acyclic Object, TypeError: cyclic object value, Circular reference in value argument not supported

Sempre causada por uma referência circular em um objeto, que é então passada para o JSON.stringify.

var a = { };
var b = { a: a };
a.b = b;
JSON.stringify(a);

Porque ambos a e b no exemplo acima têm uma referência um ao outro, o objeto resultante não pode ser convertido em JSON.

Como corrigir esse erro: Remova as referências circulares, como no exemplo, de todos os objetos que o senhor deseja converter em JSON.

Token inesperado ;

Erros relacionados: Esperado ), falta ) após a lista de argumentos

O interpretador JavaScript esperava algo, mas não estava lá. Normalmente, isso é causado por parênteses ou colchetes incompatíveis.

O token nesse erro pode variar – ele pode dizer “Unexpected token ]” ou “Esperado {” etc.

Como corrigir esse erro: Às vezes, o número da linha com esse erro não aponta para o local correto, o que dificulta a correção.

• Um erro com o [ ] { } ( ) geralmente é causado por um par incompatível. Verifique se todos os seus parênteses e colchetes têm um par correspondente. Nesse caso, o número da linha geralmente aponta para outra coisa que não o caractere problemático
• O / inesperado está relacionado a expressões regulares. O número da linha para isso geralmente está correto.
• O ; inesperado geralmente é causado por um ; dentro de um objeto ou literal de matriz, ou dentro da lista de argumentos de uma chamada de função. O número da linha geralmente também estará correto nesse caso

Uncaught SyntaxError: Token inesperado ILLEGAL

Erros relacionados: Literal de string não terminado, terminador de linha inválido

Um literal de string está sem a aspa de fechamento.

Como corrigir esse erro: Certifique-se de que todas as cadeias de caracteres tenham a aspa de fechamento correta.

Uncaught TypeError: Não é possível ler a propriedade ‘foo’ de null, Uncaught TypeError: Não é possível ler a propriedade ‘foo’ de undefined

Erros relacionados: TypeError: someVal is null, Unable to get property ‘foo’ of undefined or null reference

Tentando ler null ou undefined como se fosse um objeto. Por exemplo:

var someVal = null;
console.log(someVal.foo);

Como corrigir esse erro: Geralmente causado por erros de digitação. Verifique se as variáveis usadas perto do número da linha apontado pelo erro estão nomeadas corretamente.

Uncaught TypeError: Não é possível definir a propriedade ‘foo’ de null, Uncaught TypeError: Não é possível definir a propriedade ‘foo’ de undefined

Erros relacionados: TypeError: someVal is undefined, Unable to set property ‘foo’ of undefined or null reference

Tentando escrever null ou undefined como se fosse um objeto. Por exemplo:

var someVal = null;
someVal.foo = 1;

Como corrigir esse erro: Isso também é geralmente causado por erros de digitação. Verifique os nomes das variáveis próximas à linha para a qual o erro aponta.

Uncaught RangeError: Tamanho máximo da pilha de chamadas excedido

Erros relacionados: Exceção não detectada: RangeError: Profundidade máxima de recursão excedida, muita recursão, estouro de pilha

Geralmente causado por um bug na lógica do programa, causando chamadas de função recursivas infinitas.

Como corrigir esse erro: Verifique se há erros em funções recursivas que possam fazer com que elas continuem recursando para sempre.

Uncaught URIError: URI malformado

Erros relacionados: URIError: sequência de URI malformada

Causada por uma chamada de decodeURIComponent inválida.

Como corrigir esse erro: Verifique se o decodeURIComponent no número da linha do erro recebe a entrada correta.

XMLHttpRequest não pode carregar http://some/url/. Nenhum cabeçalho “Access-Control-Allow-Origin” está presente no recurso solicitado

Erros relacionados: Solicitação de origem cruzada bloqueada: A política de mesma origem não permite a leitura do recurso remoto em http://some/url/

Esse erro é sempre causado pelo uso de XMLHttpRequest.

Como corrigir esse erro: Verifique se o URL da solicitação está correto e se respeita o política de mesma origem. Uma boa maneira de encontrar o código ofensivo é observar o URL na mensagem de erro e localizá-lo em seu código.

InvalidStateError: Foi feita uma tentativa de usar um objeto que não é, ou não é mais, utilizável

Erros relacionados: InvalidStateError, código de exceção DOME 11

Significa que o código chamou uma função que o senhor não deveria chamar no estado atual. Ocorre normalmente com XMLHttpRequestao tentar chamar funções nele antes de estar pronto.

var xhr = new XMLHttpRequest();
xhr.setRequestHeader('Some-Header', 'val');

Nesse caso, o senhor receberia o erro porque o setRequestHeader só pode ser chamada depois de chamar o xhr.open.

Como corrigir esse erro: Observe o código na linha apontada pelo erro e verifique se ele é executado no momento correto ou adicione as chamadas necessárias antes dele (como xhr.open)

Conclusão

O JavaScript tem alguns dos erros mais inúteis que já vi, com exceção do famoso Expected T_PAAMAYIM_NEKUDOTAYIM do PHP. Com mais familiaridade, os erros começam a fazer mais sentido. Os navegadores modernos também ajudam, pois não apresentam mais os erros completamente inúteis que costumavam apresentar.

Qual foi o erro mais confuso que o senhor já viu? Compartilhe a frustração nos comentários!

O senhor deseja saber mais sobre esses erros e como evitá-los? Detectar problemas no JavaScript automaticamente com o ESLint.