🚨 How to Handle Unhandled Exceptions & Unhandled Promise Rejections in JavaScript and React

One of the biggest differences between a demo app and a production app is error handling.

A good application doesn't just work when everything is fine—it fails gracefully when something goes wrong.

🧠 1️⃣ What is an Unhandled Exception?

An unhandled exception is an error that is thrown but never caught.

Example:

function divide(a, b) {

  if (b === 0) {

    throw new Error("Cannot divide by zero");

  }

  return a / b;

}



divide(10, 0); // ❌ Uncaught Error

Since there's no try...catch, the application may crash or stop executing that code path.

✅ Handle It with try...catch

try {

  divide(10, 0);

} catch (error) {

  console.error(error.message);

}

✔ Prevents the app from crashing unexpectedly.

🧠 2️⃣ What is an Unhandled Promise Rejection?

When a Promise rejects and no .catch() (or try...catch with await) handles it.

fetch("/api/users")

  .then(res => res.json());



// ❌ No .catch()

Or:

async function getUsers() {

  const res = await fetch("/api/users");

  return res.json();

}



// ❌ No try...catch

✅ Handle Async Errors Properly

async function getUsers() {

  try {

    const res = await fetch("/api/users");



    if (!res.ok) {

      throw new Error("Failed to fetch users");

    }



    return await res.json();

  } catch (error) {

    console.error(error);

  }

}

⚛️ 3️⃣ Handling Errors in React

React Error Boundaries catch:

✔ Rendering errors

✔ Lifecycle errors

✔ Constructor errors

Example:

<ErrorBoundary>

  <Dashboard />

</ErrorBoundary>

🚨 Error Boundaries DO NOT Catch

❌ Event handler errors

<button onClick={() => {

  throw new Error("Boom");

}} />

❌ Async errors

setTimeout(() => {

  throw new Error("Boom");

}, 1000);

❌ Promise rejections

You must handle these yourself.

🌐 4️⃣ Global Error Handling (Browser)

You can listen for uncaught JavaScript errors:

window.addEventListener("error", (event) => {

  console.error("Unhandled Exception:", event.error);

});

Useful for:

• Logging


• Monitoring


• Crash reporting

🌐 5️⃣ Global Promise Rejection Handling

Handle promises that nobody caught:

window.addEventListener("unhandledrejection", (event) => {

  console.error("Unhandled Promise:", event.reason);

});

This is commonly used to send errors to monitoring tools.

📊 6️⃣ Log Errors to Monitoring Services

In production, don't just use:

console.error(error);

Use tools like:

• Sentry


• Bugsnag


• Datadog

These provide:

✔ Stack traces

✔ User sessions

✔ Browser info

✔ Release tracking

🚨 Common Mistakes

❌ Empty catch blocks

try {

  // code

} catch {}

👉 Silently ignores errors.

❌ Swallowing errors

catch (error) {

  // do nothing

}

Always log or handle them appropriately.

❌ Assuming fetch() throws for HTTP errors

const res = await fetch("/users");

A 404 or 500 does not throw. You should check:

if (!res.ok) {

  throw new Error("Request failed");

}

💡 Senior-Level Insight

A good error-handling strategy has multiple layers:

• 
  Local handling: try...catch for recoverable operations.


• 
  Component handling: Error Boundaries for UI rendering errors.


• 
  Global handling: window.onerror and window.onunhandledrejection.


• 
  Monitoring: Send errors to a centralized service instead of relying on console.error.

The goal isn't to hide errors—it's to capture them, recover when possible, and give users a graceful experience.

🎯 Interview One-Liner

Handle synchronous exceptions using try...catch, asynchronous errors using .catch() or try...catch with async/await, use React Error Boundaries for rendering errors, and implement global error listeners and monitoring tools to capture uncaught exceptions and promise rejections in production.

JavaScript #ReactJS #Frontend #ErrorHandling #WebDevelopment #InterviewPrep #EngineeringMindset #SoftwareEngineering