# Step 1 — Understand Promise Rejections

• Promise → an object representing a future value

• Rejected Promise → something went wrong in the asynchronous operation

• Common causes:

  • Network request fails

  • API returns an error

  • Exceptions in async functions

Example error in console:

Uncaught (in promise) Error: Failed to fetch

## Step 2 — Always Use .catch()

Attach a .catch() to every promise to handle errors:

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error fetching data:', error));

• Without .catch(), errors become unhandled promise rejections

• .catch() ensures the error is logged or handled gracefully

## Step 3 — Use async/await With Try/Catch

When using async/await, wrap the code in try/catch:

async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    if (!response.ok) throw new Error(`HTTP error! Status: ${response.status}`);
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Async fetch error:', error);
  }
}

fetchData();

• Prevents unhandled rejections

• Makes code easier to read

## Step 4 — Global Handling for Unhandled Rejections

For safety, catch any unhandled promise rejections globally:

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

• Useful in larger applications

• Logs unexpected promise failures

## Step 5 — Check the Source of Error

• Use browser dev tools → Console → Network tab

• Common sources:

  • Fetch or XHR failures

  • API returning non-2xx HTTP status

  • JSON parsing errors

  • Custom logic throwing errors inside .then() or async functions

## Step 6 — Validate API Responses

Always validate before processing data:

fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) throw new Error(`Server error: ${response.status}`);
    return response.json();
  })
  .then(data => {
    if (!data || !data.items) throw new Error('Invalid data structure');
    console.log(data.items);
  })
  .catch(error => console.error('Promise rejection:', error));

• Prevents unexpected errors from breaking the app

## Step 7 — Use Promise.allSettled for Multiple Promises

When handling multiple promises, avoid unhandled rejections by using allSettled:

const promises = [
  fetch('/api/data1'),
  fetch('/api/data2')
];

Promise.allSettled(promises).then(results => {
  results.forEach((result, index) => {
    if (result.status === 'fulfilled') {
      console.log(`Promise ${index} success:`, result.value);
    } else {
      console.error(`Promise ${index} failed:`, result.reason);
    }
  });
});

• Ensures one failed promise does not break others

## Step 8 — Beginner-Friendly Checklist

## Conclusion

JavaScript promise rejection errors are common, but beginners can handle them by:

• Attaching .catch() to all promises

• Using try/catch with async/await

• Validating API responses

• Handling multiple promises carefully

• Adding global unhandled rejection listeners

Following these steps ensures your asynchronous JavaScript code is more reliable and less prone to silent failures.