JavaScript Error Handling Cheat Sheet: try/catch, throw, Types & finally

Synchronous failures throw; asynchronous ones reject promises. Use try/catch around await and around JSON.parse. Throw Error (or a subclass) with a message you can log. Show users a safe sentence; keep stack traces in logs, not in the DOM.

This JavaScript cheat sheet is written for people searching for a fast, accurate reference: students, junior developers, and teams shipping production software. Pin it, copy the snippets, and come back when syntax slips.

Quick reference

• try/catch: Catches throws in that block. Does not catch errors in leftover promise chains without await.
• finally: Runs on success or failure. Good for clearTimeout and unlocking UI.
• throw: throw new Error("HTTP 404"). Throwing strings works but loses stack conventions.
• Types: TypeError, RangeError, SyntaxError (from parse). Custom: class HttpError extends Error {}.
• cause: new Error("Save failed", { cause: err }) preserves the original in modern engines.
• Async: An async function rejects if you throw. Callers must catch or the console shows an unhandled rejection.
• Guard: Check res.ok, nulls, and types before you throw — fail early with context.
• UI: Map errors to copy: network vs validation vs 403. Never dump err.stack in production HTML.

Copy-paste examples

Typed HTTP error plus UI mapping

Catch at a boundary (page/loader), not around every line. Re-throw unknowns.

class HttpError extends Error {
  constructor(status, message) {
    super(message);
    this.name = 'HttpError';
    this.status = status;
  }
}
async function loadProject(id) {
  const res = await fetch('/api/project.php?id=' + encodeURIComponent(id));
  if (res.status === 404) throw new HttpError(404, 'Project not found');
  if (!res.ok) throw new HttpError(res.status, 'Request failed');
  return res.json();
}
function userMessage(err) {
  if (err instanceof HttpError && err.status === 404) return 'We could not find that project.';
  if (err.name === 'AbortError') return 'Request canceled.';
  return 'Something went wrong. Try again.';
}

Common mistakes

• Empty catch (e) {} that hides bugs.
• Catching then not re-throwing unexpected errors so a framework error boundary never fires.
• Showing raw SQL or PHP traces in fetch error JSON on the client.
• Using alert(err) in production.

FAQ

1. Should I catch every await? Catch at a meaningful boundary: a function that can recover, or a UI layer that can show a message. Lower helpers can throw.

1. window.onerror vs try/catch? onerror / unhandledrejection are last-chance logs. They are not a substitute for expected error paths.

1. Optional chaining instead of try/catch? ?. prevents throws on missing properties. It does not replace catch for I/O and parse errors.

Related JavaScript cheat sheets

• Javascript Cheat Sheet 2026
• Javascript Array Methods Cheat Sheet
• Javascript String Methods Cheat Sheet

Build with this stack

When a cheat sheet is not enough — you need a production app, a student FYP, or a custom dashboard — ArpaNeuro builds custom web development and also sells ready-made source code. Request a quote and tell us the stack.

Browse software development services or the source code marketplace if you want a working codebase instead of starting from a blank file.