"Uncaught (in promise)": why your async error disappears from the console

Something fails somewhere in your async code, and instead of a clean stack trace you get this in the console:

It’s not a bug in the browser and it’s not a different kind of error — it’s the exact same TypeError you’d get synchronously, just reported differently because nothing was listening for it. Understanding why that happens is the key to fixing it reliably.

What “unhandled rejection” actually means

A Promise can settle in one of two ways: it resolves, or it rejects. If code calls .catch() (or an await inside a try/catch) on that promise, the rejection is “handled.” If nothing does, by the time the JavaScript engine notices the promise was rejected and nobody ever attached a handler, it reports it as an unhandled rejection — that’s exactly what “Uncaught (in promise)” means.

fetch("/api/data"); // no .then, no .catch — if this rejects, nothing catches it

This is different from a plain synchronous throw, which crashes immediately at the point it happens. A promise rejection can sit “unhandled” for a while — the engine has to wait a tick to see whether you were ever going to add a .catch() — which is part of why it shows up as its own distinct kind of error in the console.

Why a try/catch around the call sometimes doesn’t help

This is the part that trips people up the most:

try {
  fetchData(); // fetchData is an async function, called without await
} catch (error) {
  console.error(error); // never runs
}

async function fetchData() {
  const res = await fetch("/api/data");
  return res.json();
}

fetchData() returns a promise immediately — the try/catch around it only catches errors thrown synchronously while calling fetchData, not errors that happen later, asynchronously, inside it. Without await in front of the call, the try block has already finished by the time the promise could reject.

try {
  await fetchData(); // now the try/catch actually waits for it and can catch the rejection
} catch (error) {
  console.error(error);
}

The rule to remember: try/catch only catches a promise’s rejection if you await that promise (or otherwise chain a .catch() onto it) — wrapping the call alone isn’t enough.

Catching rejections with .then()/.catch()

If you’re not using async/await, the equivalent is attaching .catch() directly to the promise chain:

fetchData()
  .then((data) => render(data))
  .catch((error) => console.error("Failed to load data:", error));

A .catch() at the end of the chain catches a rejection from any step before it — the initial fetchData() call or any .then() in between — which is one reason chained .then()/.catch() is often easier to reason about than several separate try/catch blocks scattered through async code.

The global safety net: unhandledrejection

For cases you genuinely can’t predict (a fire-and-forget async call somewhere deep in a library, for example), the browser gives you a global event as a last resort:

window.addEventListener("unhandledrejection", (event) => {
  console.error("Unhandled promise rejection:", event.reason);
  // event.preventDefault() stops it from also logging to the console as an error
});

FAQ

Conclusion

“Uncaught (in promise)” isn’t a special category of bug — it’s the console telling you a rejected promise never got a .catch() or an await inside a try/catch. The fix is always the same: make sure every promise you create or call is either awaited inside a try/catch, chained with .catch(), or deliberately monitored globally as a last resort, not left to fail silently.

References

• unhandledrejection event – MDN

• try…catch – MDN