How to Handle Promise Rejections in JavaScript

// Rejection via reject()
const p1 = new Promise((resolve, reject) => {
  reject(new Error("Something went wrong"));
});
 
// Rejection via thrown error inside executor
const p2 = new Promise(() => {
  throw new Error("Thrown in executor");
});
 
// Rejection propagated from .then() handler
const p3 = Promise.resolve(1)
  .then((n) => {
    if (n < 10) throw new Error("Too small");
    return n;
  });

fetch("https://api.example.com/data")
  .then((response) => response.json())
  .then((data) => processData(data))
  .catch((error) => {
    // Handles any rejection from fetch, response.json(), or processData
    console.error("Request failed:", error.message);
  });

Promise.reject(new Error("network error"))
  .catch((err) => {
    console.error(err.message); // "network error"
    return "default value";    // Recovered! Chain continues
  })
  .then((value) => {
    console.log(value);        // "default value"
  });

fetch(url)
  .then((res) => {
    if (!res.ok) throw new Error(`HTTP ${res.status}`);
    return res.json();
  })
  .catch((err) => {
    if (err.message.startsWith("HTTP 5")) {
      // Server error: log but re-throw (cannot recover here)
      logError(err);
      throw err;
    }
    // Other errors: swallow and return fallback
    return fallbackData;
  })
  .then((data) => renderUI(data));

async function loadDashboard(userId) {
  try {
    const user = await fetchUser(userId);
    const stats = await fetchStats(user.id);
    const posts = await fetchRecentPosts(user.id);
    renderDashboard({ user, stats, posts });
  } catch (error) {
    // Catches rejection from ANY of the three fetch calls above
    showErrorMessage(error.message);
  }
}

async function initApp() {
  // Config failure: fatal, cannot continue
  let config;
  try {
    config = await loadConfig();
  } catch (err) {
    console.error("Cannot load config, aborting:", err);
    process.exit(1);
  }
 
  // Auth failure: redirect to login
  let user;
  try {
    user = await authenticateUser();
  } catch (err) {
    redirectToLogin();
    return;
  }
 
  // Data failure: show stale or default data
  let data;
  try {
    data = await fetchDashboardData(user.id);
  } catch (err) {
    console.warn("Using cached data:", err.message);
    data = loadCachedData();
  }
 
  renderApp(config, user, data);
}

// Helper: returns [error, result] tuple
async function attempt(promise) {
  try {
    const result = await promise;
    return [null, result];
  } catch (err) {
    return [err, null];
  }
}
 
// Usage:
async function getUser(id) {
  const [err, user] = await attempt(fetchUser(id));
  if (err) {
    console.error("Failed to fetch user:", err.message);
    return null;
  }
  return user;
}

fetchPrimaryData()
  .then(
    (data) => processData(data),
    (err) => {
      // Only handles rejection from fetchPrimaryData
      // Does NOT catch errors thrown by processData
      return fallbackData;
    }
  )
  .then((result) => saveResult(result))
  .catch((err) => handleFinalError(err)); // Catches processData and saveResult errors

// Browser: global unhandled rejection handler
window.addEventListener("unhandledrejection", (event) => {
  console.error("Unhandled rejection:", event.reason);
  event.preventDefault(); // Suppress default console warning in some browsers
 
  // In production: send to error tracking
  Sentry.captureException(event.reason);
});
 
// Node.js: process-level handler
process.on("unhandledRejection", (reason, promise) => {
  console.error("Unhandled Rejection at:", promise, "reason:", reason);
  // In production: log and potentially exit
  process.exit(1);
});

// This fires unhandledrejection (no .catch())
Promise.reject(new Error("oops"));
 
// This does NOT fire unhandledrejection (has .catch())
Promise.reject(new Error("oops")).catch(() => {});
 
// This does NOT fire — .catch() attached eventually (within same microtask tick)
const p = Promise.reject(new Error("oops"));
p.catch(() => {}); // Attaching .catch() synchronously prevents the unhandled event

window.addEventListener("rejectionhandled", (event) => {
  console.log("Promise rejection was handled after the fact:", event.reason);
});

// One bad step stops the chain
Promise.resolve()
  .then(() => stepA())         // If this rejects...
  .then(() => stepB())         // ...this is skipped
  .then(() => stepC())         // ...and this
  .catch((err) => handleError(err)); // Only this runs

// Run all steps but collect errors
async function runAllSteps(items) {
  const results = [];
  const errors = [];
 
  for (const item of items) {
    try {
      const result = await processItem(item);
      results.push({ item, result, success: true });
    } catch (err) {
      errors.push({ item, error: err.message, success: false });
    }
  }
 
  return { results, errors };
}

async function fetchWithRetry(url, maxAttempts = 3) {
  let lastError;
 
  for (let attempt = 1; attempt <= maxAttempts; attempt++) {
    try {
      const response = await fetch(url);
      if (!response.ok) throw new Error(`HTTP ${response.status}`);
      return await response.json();
    } catch (err) {
      lastError = err;
      if (attempt < maxAttempts) {
        const delay = attempt * 1000; // Incremental backoff
        console.warn(`Attempt ${attempt} failed, retrying in ${delay}ms...`);
        await new Promise((resolve) => setTimeout(resolve, delay));
      }
    }
  }
 
  throw new Error(`All ${maxAttempts} attempts failed: ${lastError.message}`);
}

const ids = [1, 2, 3, 4, 5];
 
// Promise.all: one failure cancels all
try {
  const users = await Promise.all(ids.map((id) => fetchUser(id)));
  // All or nothing
} catch (err) {
  console.error("At least one user fetch failed:", err);
}
 
// Promise.allSettled: get results from all, handle errors individually
const results = await Promise.allSettled(ids.map((id) => fetchUser(id)));
const succeeded = results.filter((r) => r.status === "fulfilled").map((r) => r.value);
const failed = results.filter((r) => r.status === "rejected").map((r) => r.reason);
 
console.log(`${succeeded.length} succeeded, ${failed.length} failed`);