JavaScript Error Handling Patterns

Written by Swapnil RajaPublished 24 Aug 2026

Good error handling is about deciding where a failure should be dealt with.

Wrapping everything in try catch is not error handling.

The useful question is who can actually do something about it.

Example

javascript

function parseUser(text) {
  try {
    return JSON.parse(text);
  } catch (error) {
    return null;
  }
}

console.log(parseUser("not json"));
console.log(parseUser('{"name":"Ada"}').name);

PreviousJavaScript Custom Errors NextJavaScript Debugging

Example

javascript

function area(width, height) {
  if (typeof width !== "number" || typeof height !== "number") {
    throw new Error("width and height must be numbers");
  }
  return width * height;
}

let message;
try {
  area("4", 5);
} catch (error) {
  message = error.message;
}

console.log(message);

Example

javascript

function loadSettings(text) {
  try {
    return JSON.parse(text);
  } catch (error) {
    throw new Error("settings file is not valid JSON");
  }
}

let message;
try {
  loadSettings("nope");
} catch (error) {
  message = error.message;
}

console.log(message);

Example

javascript

function step(n) {
  if (n === 2) throw new Error("step two failed");
  return "step " + n;
}

function runAll() {
  const done = [];
  for (const n of [1, 2, 3]) {
    done.push(step(n));
  }
  return done;
}

let message;
try {
  runAll();
} catch (error) {
  message = "stopped because " + error.message;
}

console.log(message);

Complete Example

html

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript Error Handling Patterns</title>
</head>
<body>

  <h1>Error Handling Patterns</h1>

  <input id="text" value="not json">
  <button id="load">Load</button>

  <p id="out"></p>

  <script>
    function loadSettings(text) {
      try {
        return JSON.parse(text);
      } catch (error) {
        throw new Error("settings are not valid JSON");
      }
    }

    document.getElementById("load").addEventListener("click", function () {
      const out = document.getElementById("out");
      try {
        const settings = loadSettings(document.getElementById("text").value);
        out.textContent = "Loaded " + Object.keys(settings).length + " settings";
      } catch (error) {
        out.textContent = "Could not load: " + error.message;
      }
    });
  </script>

</body>
</html>

JavaScript Error Handling Patterns

Example

Where to Handle

Syntax

Fail Fast

Example

Guard Clauses

Example

Do Not Catch What You Cannot Fix

Example

Adding Context When Rethrowing

Example

Handling at the Boundary

Example

Complete Example

Try It Yourself

Important Points

Conclusion