Como corrigir erro de promessa não detectado em JavaScript

O erroNão pego (em promessa) no console do seu navegador significa que uma promessa foi rejeitada, mas nada resolveu a rejeição. Muitas vezes aparece com uma mensagem de erro real e aponta para falhas assíncronas não tratadas. Veja como corrigir todas as variantes.

O que esse erro significa

Quando uma promessa é rejeitada (falha), você deve lidar com isso com.catch() ou um try/catch (com async/await). Caso contrário, o JavaScript reportará “Não capturado (em promessa)” – um erro assíncrono ocorreu sem nenhum manipulador. Ao contrário dos erros síncronos, as rejeições de promessas não tratadas não travam a página, mas sinalizam um bug.

Causa 1: .catch() ausente em uma cadeia de promessas

// 🐛 No .catch() — if fetch fails, rejection is unhandled
fetch('/api/data')
  .then(res => res.json())
  .then(data => console.log(data));
  // Missing .catch() → "Uncaught (in promise)" if it fails

// ✅ Always add .catch()
fetch('/api/data')
  .then(res => res.json())
  .then(data => console.log(data))
  .catch(err => console.error('Fetch failed:', err));

Causa 2: async/await Sem try/catch

// 🐛 await can reject, and there's no try/catch
async function loadData() {
  const res = await fetch('/api/data');   // rejects if network fails
  const data = await res.json();
  return data;
}
loadData();   // "Uncaught (in promise)" if fetch rejects

// ✅ Wrap in try/catch
async function loadData() {
  try {
    const res = await fetch('/api/data');
    if (!res.ok) throw new Error(`HTTP ${res.status}`);
    return await res.json();
  } catch (err) {
    console.error('Load failed:', err);
    return null;
  }
}

Causa 3: Chamando uma função assíncrona sem lidar com sua rejeição

// 🐛 async function rejects, caller doesn't handle it
async function saveData() {
  throw new Error('Save failed');
}

saveData();   // "Uncaught (in promise): Error: Save failed"

// ✅ Handle at the call site
saveData().catch(err => console.error(err));

// ✅ Or in an async context
async function main() {
  try {
    await saveData();
  } catch (err) {
    console.error(err);
  }
}

Causa 4: Esquecer de retornar/esperar em uma corrente

// 🐛 Nested promise not returned — its rejection escapes the chain
function process() {
  return fetch('/api/step1')
    .then(res => {
      fetch('/api/step2');   // ❌ not returned — rejection unhandled
    });
}

// ✅ Return the inner promise so the chain handles it
function process() {
  return fetch('/api/step1')
    .then(res => {
      return fetch('/api/step2');   // returned — chain catches its errors
    })
    .catch(err => console.error(err));
}

Causa 5: manipuladores de eventos com retornos de chamada assíncronos

// 🐛 async event handler with no error handling
button.addEventListener('click', async () => {
  const data = await fetchData();   // if this rejects, unhandled
  render(data);
});

// ✅ Handle errors inside the async handler
button.addEventListener('click', async () => {
  try {
    const data = await fetchData();
    render(data);
  } catch (err) {
    showError('Could not load data');
    console.error(err);
  }
});

Manipulador Global (Rede de Segurança)

// Catch any unhandled rejections globally (last resort, not a fix)
window.addEventListener('unhandledrejection', (event) => {
  console.error('Unhandled rejection:', event.reason);
  event.preventDefault();   // prevents the default console error
  // Log to your error tracking service
  reportError(event.reason);
});

// In Node.js:
process.on('unhandledRejection', (reason, promise) => {
  console.error('Unhandled Rejection:', reason);
  // In production, log and possibly exit gracefully
});

Promise.all e tratamento de erros

// 🐛 Promise.all rejects if ANY promise rejects — needs a catch
const results = await Promise.all([fetchA(), fetchB(), fetchC()]);
// If fetchB rejects, the whole thing rejects — handle it

// ✅ With try/catch
try {
  const results = await Promise.all([fetchA(), fetchB(), fetchC()]);
} catch (err) {
  console.error('One of the requests failed:', err);
}

// ✅ Or use allSettled to get all results regardless of failures
const results = await Promise.allSettled([fetchA(), fetchB(), fetchC()]);
results.forEach(r => {
  if (r.status === 'fulfilled') use(r.value);
  else console.error('Failed:', r.reason);
});

Perguntas Frequentes

P: Uma rejeição não tratada trava meu aplicativo?
R: Nos navegadores, não — a página continua em execução, mas você recebe o erro do console e a operação com falha não foi concluída silenciosamente. No Node.js, rejeições não tratadas podem travar o processo (em versões modernas). De qualquer forma, é um bug a ser corrigido, não ignorado.

P: Onde exatamente coloco o .catch()?
R: No final da cadeia de promessas, ele detecta erros de qualquer etapa anterior. Com async/await, envolva as chamadas aguardadas em um try/catch. A chave é que toda operação assíncrona possui um manipulador em algum lugar.

P: O manipulador global unhandledrejection é uma solução adequada?
R: Não — é uma rede de segurança para o registro em log, e não um substituto para o tratamento de erros onde eles ocorrem. Use-o para capturar e relatar qualquer coisa que você tenha perdido, mas corrija as rejeições reais não tratadas em sua origem.

P: Por que funciona algumas vezes, mas outras não?
R: A rejeição ocorre apenas quando a promessa realmente falha (erro de rede, erro HTTP, exceção lançada). Funciona quando tudo dá certo e dá erro apenas quando algo falha – que é exatamente quando você precisa do tratamento de erros ausente.

P: Devo usar .catch() ou try/catch?
R: Use try/catch com async/await (mais limpo, lê de cima para baixo). Use .catch() com cadeias de promessas (.then). Ambos lidam com rejeições – escolha com base no estilo que você está usando. Não os misture de maneira estranha na mesma função.

Conclusão

“Não capturado (prometido)” significa que uma operação assíncrona falhou sem nenhum manipulador de erros. A solução é sempre lidar com a rejeição:adicionar.catch() prometer correntes, embrulharawait chama em try/catch e lida com rejeições no local de chamada de funções assíncronas. Adicione um globalunhandledrejection manipulador como uma rede de segurança de registro, mas corrige as rejeições reais não tratadas em sua origem. Cada operação assíncrona em seu código deve ter tratamento de erros em algum lugar — essa é a maneira confiável de eliminar esses erros e construir aplicativos robustos.