How to Use Try Catch in JavaScript

Use try...catch when code might fail and your app should recover gracefully instead of crashing. This is especially useful for API calls, JSON parsing, local storage, and risky user-provided input.

What you’ll build or solve

You’ll learn how to use try...catch in JavaScript to handle errors safely. You’ll also know how to log useful errors and provide fallback behavior.

When this approach works best

This approach is the right choice when failure is possible and the rest of the app should keep working.

Common real-world scenarios include:

• API requests
• JSON parsing
• Local storage access
• Optional browser APIs
• Third-party integrations

This is a bad idea when you use it to hide bugs silently. Always handle the error meaningfully.

Prerequisites

You only need:

• A JavaScript file or browser console
• Basic functions and async knowledge

Step-by-step instructions

Step 1: Wrap risky code in try and handle failures in catch

Place code that may fail inside try.

try {
  const settings = JSON.parse(rawSettings);
  console.log(settings);
} catch (error) {
  console.error("Invalid settings JSON", error);
}

The catch block runs only if an error is thrown.

This pattern works especially well with async/await.

async function loadUser() {
  try {
    const response = await fetch("/api/user");
    const user = await response.json();
    console.log(user);
  } catch (error) {
    console.error("Failed to load user", error);
  }
}

Add fallback behavior when possible.

catch (error) {
  showErrorMessage();
}

What to look for:

• Put risky code inside try
• catch receives the error object
• Great for recovery and fallback UI
• Works well with async flows
• Do not swallow errors silently

Examples you can copy

Safe JSON parse

try {
  const user = JSON.parse(data);
} catch (error) {
  console.error(error);
}

Safe API request

try {
  const response = await fetch("/api/stats");
} catch (error) {
  showRetryBanner();
}

Local storage fallback

try {
  const saved = JSON.parse(localStorage.getItem("prefs"));
} catch (error) {
  useDefaults();
}

Common mistakes and how to fix them

Mistake 1: Wrapping code that cannot throw

What the reader might do:

try {
  const total = 5 + 5;
}

Why it breaks: unnecessary try...catch adds noise.

Corrected approach:

Use it only around risky operations.

Mistake 2: Catching but doing nothing

What the reader might do:

catch (error) {}

Why it breaks: failures disappear and become harder to debug.

Corrected approach:

Log the error or show fallback UI.

Mistake 3: Forgetting async code still needs await

What the reader might do:

try {
  fetch("/api/user");
}

Why it breaks: promise rejections may escape the block.

Corrected approach:

const response = await fetch("/api/user");

Troubleshooting

If async errors still escape, confirm the promise is awaited.

If failures vanish silently, add logging inside catch.

If the code becomes noisy, wrap only the risky lines.

If recovery is possible, provide a fallback state.

Quick recap

• Use try for risky code
• Use catch for graceful recovery
• Great for APIs and parsing
• Always log or handle failures
• Await async calls inside try