How to Fix Uncaught in Promise Error in JavaScript

The error Uncaught (in promise) in your browser console means a Promise was rejected but nothing handled the rejection. It often appears with an actual error message and points to unhandled async failures. Here’s how to fix every variant.

What This Error Means

When a Promise rejects (fails), you must handle it with .catch() or a try/catch (with async/await). If you don’t, JavaScript reports “Uncaught (in promise)” — an async error slipped through with no handler. Unlike synchronous errors, unhandled promise rejections don’t crash the page but signal a bug.

Cause 1: Missing .catch() on a Promise Chain

// 🐛 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));

Cause 2: async/await Without 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;
  }
}

Cause 3: Calling an async Function Without Handling Its Rejection

// 🐛 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);
  }
}

Cause 4: Forgetting to Return/Await in a Chain

// 🐛 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));
}

Cause 5: Event Handlers with async Callbacks

// 🐛 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);
  }
});

Global Handler (Safety Net)

// 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 and Error Handling

// 🐛 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);
});

Frequently Asked Questions

Q: Does an unhandled rejection crash my app?
A: In browsers, no — the page keeps running, but you get the console error and the failed operation silently didn’t complete. In Node.js, unhandled rejections can crash the process (in modern versions). Either way, it’s a bug to fix, not ignore.

Q: Where exactly do I put the .catch()?
A: At the end of the promise chain, so it catches errors from any preceding step. With async/await, wrap the awaited calls in a try/catch. The key is that every async operation has a handler somewhere.

Q: Is the global unhandledrejection handler a proper fix?
A: No — it’s a safety net for logging, not a substitute for handling errors where they occur. Use it to catch and report anything you missed, but fix the actual unhandled rejections at their source.

Q: Why does it work sometimes but not others?
A: The rejection only occurs when the promise actually fails (network error, HTTP error, thrown exception). It works when everything succeeds and errors only when something fails — which is exactly when you need the missing error handling.

Q: Should I use .catch() or try/catch?
A: Use try/catch with async/await (cleaner, reads top-to-bottom). Use .catch() with promise chains (.then). Both handle rejections — pick based on which style you’re using. Don’t mix them awkwardly in the same function.

Conclusion

“Uncaught (in promise)” means an async operation failed with no error handler. The fix is always to handle the rejection: add .catch() to promise chains, wrap await calls in try/catch, and handle rejections at the call site of async functions. Add a global unhandledrejection handler as a logging safety net, but fix the actual unhandled rejections at their source. Every async operation in your code should have error handling somewhere — that’s the reliable way to eliminate these errors and build robust applications.