Fix JavaScript Promise Rejection (Unhandled) Error (2025 Guide)

Fix Promise Rejection (Unhandled) Error in JavaScript - 2025 Guide

Posted on: March 12, 2025

If you’ve seen an "Unhandled Promise Rejection" warning in your JavaScript console, it means a Promise was rejected but not properly handled. This can lead to silent bugs—let’s fix it in this 2025 guide.

What Causes "Promise Rejection (Unhandled)"?

This error occurs when a Promise is rejected, but there’s no .catch() to handle the rejection. Common causes include:

• Missing .catch(): Forgetting to handle rejections in a Promise chain.
• Async/Await without Try-Catch: Not handling errors in async functions.
• Event Listeners: Unhandled rejections in event-driven code.

Here’s an interactive example (open your browser console with F12 to see the error):

In this example, the Promise is rejected, but there’s no .catch(), so you’ll see an "Unhandled Promise Rejection" warning.

How to Fix It: 3 Solutions

Let’s resolve this error with practical steps:

(Diagram: Developer runs Promise, gets rejection, adds error handling, fixes issue.)

Solution 1: Add a .catch() Handler

Always add a .catch() to handle Promise rejections:

// Wrong
const promise = new Promise((resolve, reject) => {
  reject("Something went wrong!");
});
promise.then(result => console.log(result)); // Unhandled Promise Rejection

// Fixed
const promise2 = new Promise((resolve, reject) => {
  reject("Something went wrong!");
});
promise2
  .then(result => console.log(result))
  .catch(err => console.error("Handled Error:", err));

A .catch() ensures rejections are caught and logged.

Solution 2: Use Try-Catch with Async/Await

Wrap await calls in a try-catch block:

// Wrong
async function fetchData() {
  const response = await fetch('https://invalid-url');
  const data = await response.json();
  return data;
}
fetchData(); // Unhandled Promise Rejection

// Fixed
async function fetchDataFixed() {
  try {
    const response = await fetch('https://invalid-url');
    const data = await response.json();
    return data;
  } catch (err) {
    console.error("Handled Error:", err);
    return null; // Fallback
  }
}
fetchDataFixed();

try-catch catches Promise rejections in async functions.

Solution 3: Use Global Rejection Handlers

Add a global handler to catch unhandled rejections:

// Global handler
window.addEventListener('unhandledrejection', event => {
  console.warn('Unhandled Rejection:', event.reason);
});

// Example Promise
const promise = new Promise((resolve, reject) => {
  reject("Global catch test!");
});
promise.then(result => console.log(result));

The unhandledrejection event catches any unhandled Promise rejections globally.

Quick Checklist

• Does every Promise chain have a .catch()?
• Are async/await calls wrapped in try-catch?
• Do you need a global handler for unhandled rejections?

Conclusion

An "Unhandled Promise Rejection" can lead to hidden bugs, but with proper error handling, you’ll keep your app stable. These 2025 solutions will get you sorted fast. Got another JavaScript error to tackle? Let us know in the comments!