Handling Async Errors With try/catch in JavaScript

// This:
async function example() {
  try {
    const data = await fetchData(); // If fetchData() rejects...
    process(data);
  } catch (err) {
    // ...the rejection reason lands here as 'err'
    console.error(err.message);
  }
}
 
// Is equivalent to:
function example() {
  return fetchData()
    .then((data) => process(data))
    .catch((err) => {
      console.error(err.message);
    });
}

async function loadUser(id) {
  try {
    const user = await fetchUser(id);
    return user;
  } catch (error) {
    console.error("Failed to load user:", error.message);
    return null;
  }
}

async function loadProfile(userId) {
  try {
    const user = await fetchUser(userId);       // If this rejects...
    const profile = await fetchProfile(user.id); // ...this never runs
    const settings = await fetchSettings(userId); // ...nor does this
    return { user, profile, settings };
  } catch (error) {
    // We get here from whichever await rejected
    // But we don't know WHICH one without extra context
    console.error("Profile load failed:", error.message);
    return null;
  }
}

async function loadProfileRobust(userId) {
  // Critical: must succeed
  let user;
  try {
    user = await fetchUser(userId);
  } catch (error) {
    throw new Error("User not found", { cause: error });
  }
 
  // Optional: fail gracefully with defaults
  let profile = {};
  try {
    profile = await fetchProfile(user.id);
  } catch {
    console.warn("Profile unavailable, using defaults");
  }
 
  return { user, profile };
}

// WRONG: try/catch does NOT catch this
async function example() {
  try {
    setTimeout(() => {
      throw new Error("Inside setTimeout"); // Uncaught! Not caught by try/catch
    }, 100);
  } catch (err) {
    console.log("Caught:", err); // Never runs
  }
}
 
// WRONG: try/catch does NOT catch Promise rejections without await
async function example2() {
  try {
    fetchData(); // No await — rejection is unhandled
    doOtherStuff();
  } catch (err) {
    console.log("Caught:", err); // Never runs for fetchData rejection
  }
}

// Promise.all: try/catch catches the first rejection
async function loadAll(ids) {
  try {
    const users = await Promise.all(
      ids.map((id) => fetchUser(id))
    );
    return users;
  } catch (err) {
    // Caught the FIRST rejection from any fetchUser call
    console.error("Batch load failed:", err.message);
    return [];
  }
}
 
// Promise.allSettled: no rejection reaches try/catch — all outcomes are in the array
async function loadAllSafe(ids) {
  const results = await Promise.allSettled(  // Never rejects
    ids.map((id) => fetchUser(id))
  );
 
  const failed = results.filter((r) => r.status === "rejected");
  if (failed.length > 0) {
    console.warn(`${failed.length} users failed to load`);
  }
 
  return results
    .filter((r) => r.status === "fulfilled")
    .map((r) => r.value);
}

async function step1() {
  throw new Error("step1 failed");
}
 
async function step2() {
  await step1(); // step1 rejects → throws here
  // Never reaches here
}
 
async function main() {
  try {
    await step2(); // step2 rejects → throws here
  } catch (err) {
    console.error("Caught at top level:", err.message); // "step1 failed"
  }
}

// Generic async error boundary
async function safeRun(asyncFn, fallback = null, errorHandler = console.error) {
  try {
    return await asyncFn();
  } catch (err) {
    errorHandler(err);
    return typeof fallback === "function" ? fallback(err) : fallback;
  }
}
 
// Usage
const user = await safeRun(
  () => fetchUser(id),
  null,
  (err) => Sentry.captureException(err)
);
 
// If fetchUser rejects: user = null, error is sent to Sentry
// If fetchUser resolves: user = the actual user object

// Version A: return (no await)
async function getDataA() {
  try {
    return fetchData(); // Returns the Promise directly
    // If fetchData rejects AFTER this function returns, try/catch does NOT catch it
  } catch (err) {
    console.log("Caught:", err); // May NOT catch fetchData rejection
  }
}
 
// Version B: return await
async function getDataB() {
  try {
    return await fetchData(); // Awaits the Promise inside the try block
    // If fetchData rejects, it throws HERE → caught by CATCH
  } catch (err) {
    console.log("Caught:", err); // WILL catch fetchData rejection
  }
}

async function withErrorLogging(label, asyncFn) {
  const start = performance.now();
  try {
    const result = await asyncFn();
    const duration = performance.now() - start;
    console.log(`[${label}] completed in ${duration.toFixed(1)}ms`);
    return result;
  } catch (err) {
    const duration = performance.now() - start;
    console.error(`[${label}] failed after ${duration.toFixed(1)}ms:`, err.message);
    throw err; // Always rethrow — this is logging, not recovery
  }
}
 
// Usage
const user = await withErrorLogging("fetchUser", () => fetchUser(id));