Compreendendo os Tipos e Mensagens de Erros em JavaScript

Todo desenvolvedor JavaScript já encarou uma mensagem de erro vermelha no console, se perguntando o que deu errado. Compreender esses tipos de erro não é apenas sobre corrigir código quebrado—é sobre escrever aplicações mais confiáveis e depurar problemas mais rapidamente. Quando você sabe o que cada erro significa e por que ele ocorre, você se transforma de depuração reativa para prevenção proativa de erros.

O Que São Erros JavaScript?

Erros JavaScript são objetos que representam problemas durante a execução do código. Cada erro contém uma propriedade name identificando seu tipo e uma propriedade message descrevendo o que deu errado. Esses não são falhas aleatórias—são feedback estruturado sobre problemas específicos no seu código.

Os Oito Tipos de Erros Nativos

SyntaxError: Quebrando as Regras

Um SyntaxError ocorre quando o JavaScript não consegue analisar seu código devido a sintaxe inválida. O interpretador para antes mesmo da execução começar.

// Missing closing parenthesis
console.log("Hello World");
// SyntaxError: missing ) after argument list

// Invalid JSON parsing
JSON.parse("{'invalid': 'json'}");
// SyntaxError: Unexpected token ' in JSON at position 1

Causas comuns incluem colchetes faltando, strings não fechadas ou JSON malformado. Esses erros impedem que seu código execute completamente.

ReferenceError: Usando o Indefinido

Um ReferenceError acontece quando você tenta acessar uma variável que não existe no escopo atual.

console.log(userName);
// ReferenceError: userName is not defined

function greet() {
  let message = "Hello";
}
greet();
console.log(message);
// ReferenceError: message is not defined

Isso normalmente resulta de erros de digitação, acesso a variáveis antes da declaração ou confusão de escopo.

TypeError: Operações de Tipo Incorreto

Um TypeError ocorre quando você realiza uma operação em um tipo incompatível—como chamar uma não-função ou acessar propriedades em null ou undefined.

const num = 42;
num();
// TypeError: num is not a function

const user = null;
console.log(user.name);
// TypeError: Cannot read properties of null (reading 'name')

Esses estão entre os erros de tempo de execução mais comuns em aplicações JavaScript.

RangeError: Fora dos Limites

Um RangeError sinaliza que um valor excede seu intervalo permitido.

const arr = new Array(-1);
// RangeError: Invalid array length

const num = 1;
num.toPrecision(101);
// RangeError: toPrecision() argument must be between 1 and 100

Fique atento a esses ao trabalhar com construtores de array, métodos numéricos ou funções recursivas que excedem a pilha de chamadas.

URIError: URIs Malformadas

Um URIError aparece quando funções de codificação ou decodificação de URI recebem parâmetros inválidos.

decodeURIComponent('%');
// URIError: URI malformed

encodeURI('\uD800');
// URIError: URI malformed

Esses erros surgem ao manipular URLs com caracteres especiais ou codificação percentual incompleta.

EvalError: Problemas com eval()

Embora EvalError exista na especificação, o JavaScript moderno não o lança. Ele permanece para compatibilidade retroativa. Problemas históricos com eval() disparariam esse tipo de erro.

AggregateError: Múltiplas Falhas

Um AggregateError agrupa múltiplos erros em um único objeto, particularmente útil com Promise.any().

Promise.any([
  Promise.reject(new Error("First failure")),
  Promise.reject(new Error("Second failure"))
]).catch(err => {
  console.log(err instanceof AggregateError); // true
  console.log(err.errors); // Array of individual errors
});

InternalError: Limites do Motor

Um InternalError (não-padrão, específico do Firefox) ocorre quando o motor JavaScript atinge limites internos.

function recursiveFunction() {
  recursiveFunction();
}
recursiveFunction();
// InternalError: too much recursion (Firefox)
// RangeError: Maximum call stack size exceeded (Chrome)

Tratamento de Exceções com try…catch

JavaScript fornece tratamento de exceções estruturado através das instruções try, catch, finally e throw.

try {
  // Code that might throw an error
  const data = JSON.parse(userInput);
  processData(data);
} catch (error) {
  if (error instanceof SyntaxError) {
    console.error("Invalid JSON format:", error.message);
  } else if (error instanceof TypeError) {
    console.error("Data processing error:", error.message);
  } else {
    // Re-throw unknown errors
    throw error;
  }
} finally {
  // Cleanup code runs regardless
  closeConnections();
}

A instrução throw cria erros personalizados:

function validateAge(age) {
  if (age < 0) {
    throw new RangeError("Age cannot be negative");
  }
  if (typeof age !== 'number') {
    throw new TypeError("Age must be a number");
  }
  return age;
}

Melhores Práticas para Tratamento de Erros

Use tipos de erro específicos ao lançar erros personalizados. Em vez de objetos Error genéricos, lance TypeError para problemas de tipo ou RangeError para violações de limites.

Trate erros no nível apropriado. Não envolva cada função em try-catch. Trate erros onde você pode responder significativamente a eles.

Preserve o contexto do erro ao relançar:

try {
  riskyOperation();
} catch (error) {
  // Add context without losing original stack trace
  error.message = `Failed during user ${userId} operation: ${error.message}`;
  throw error;
}

Crie classes de erro personalizadas para problemas específicos do domínio:

class ValidationError extends Error {
  constructor(field, value) {
    super(`Invalid value for ${field}: ${value}`);
    this.name = 'ValidationError';
    this.field = field;
    this.value = value;
  }
}

Depurando Erros JavaScript Efetivamente

Navegadores modernos fornecem excelentes ferramentas de depuração. O stack trace mostra o caminho de execução que levou a um erro. Use breakpoints para pausar a execução antes que erros ocorram. As mensagens de erro do console frequentemente incluem o número exato da linha e o arquivo.

Para aplicações em produção, implemente manipuladores de erros globais:

window.addEventListener('error', (event) => {
  console.error('Global error:', event.error);
  // Send to error tracking service
});

window.addEventListener('unhandledrejection', (event) => {
  console.error('Unhandled promise rejection:', event.reason);
});

Conclusão

Compreender os tipos de erro do JavaScript transforma a depuração de adivinhação em resolução sistemática de problemas. Cada tipo de erro—de SyntaxError a AggregateError—diz exatamente o que deu errado e onde procurar. Combinado com tratamento de exceções adequado usando blocos try-catch e mensagens de erro significativas, você pode construir aplicações que falham graciosamente e fornecem feedback claro quando problemas surgem. A chave não é evitar todos os erros—é tratá-los inteligentemente quando ocorrem.

Perguntas Frequentes

Complete picture for complete understanding

Capture every clue your frontend is leaving so you can instantly get to the root cause of any issue with OpenReplay — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data.

Check our GitHub repo and join the thousands of developers in our community.