Platform under construction

Errors & Debugging

Advanced

Errors

Errors are signals that something went wrong. Good JavaScript code treats them as part of the program flow, not as random crashes.

try {
  JSON.parse("{bad json}");
} catch (error) {
  console.error(error.message);
}

Errors & Debugging

Errors are information, not just failure.

JavaScript throws errors when code cannot continue normally. Syntax errors, reference errors, type errors and custom errors all give clues about what failed.

A good error strategy separates expected problems from programmer mistakes. Invalid user input, failed network calls and bad JSON need handled paths. Broken assumptions need fixes.

Do not hide errors silently. A swallowed error removes the only evidence you had.

SyntaxError

Invalid JavaScript or invalid JSON parsing syntax.

ReferenceError

A name is used that does not exist in scope.

TypeError

A value is used in a way its type does not support.

Custom error

An application-specific failure with a clearer message.

Examples

Good debugging code keeps the failure path visible.

Convert expected failure into a clear result

function safeParse(value) {
  try {
    return { ok: true, data: JSON.parse(value) };
  } catch (error) {
    return { ok: false, message: error.message };
  }
}

Swallowing errors silently

try {
  runImportantTask();
} catch (error) {
  // Nothing happens here.
}

Code patterns

Reusable examples for quick reference.

These examples focus on the debugging patterns you will reuse: safe parsing, throwing, custom error types, console inspection, breakpoints and async failure handling.

Read message

The message explains the immediate failure.

try {
  JSON.parse("{bad json}");
} catch (error) {
  console.log(error.message);
}

Expected failure

Handle errors from external input.

function parseJson(value) {
  try { return JSON.parse(value); }
  catch { return null; }
}

Programmer mistake

Do not hide bugs caused by wrong assumptions.

const value = null;

value.trim(); // TypeError

Error boundary function

Return a structured result.

function safeParse(value) {
  try { return { ok: true, data: JSON.parse(value) }; }
  catch (error) { return { ok: false, error }; }
}

Rules that matter

Make failures observable and recoverable where possible.

Debugging starts before something breaks. Clear error types, helpful messages and visible failure states make the code easier to repair.

Read the error type

TypeError, SyntaxError and ReferenceError point to different problems.

Do not swallow errors

Log, rethrow or convert to a visible result.

Handle expected failures

Bad input and failed requests deserve clear paths.

Fix programmer mistakes

Do not hide bugs with broad catch blocks.

Keep messages useful

A message should help the next developer or user.

Preserve context

Add information about what operation failed.

Production thinking

Reliable software is built by handling failure deliberately.

Why does this matter?

Error handling decides whether a failure becomes a recoverable state or a mystery.

Accessibility

User-facing failures should become clear text status, not silent broken controls.

Production note

Production applications should report unexpected errors and handle expected errors locally.

SEO note

Client-side render errors can leave pages empty or incomplete, which can hurt crawlability and user trust.

Live code lab

Change the HTML, CSS or JavaScript and run the result.

The preview runs inside an isolated iframe. The JavaScript is placed inside the HTML editor for now, so every example stays together and remains easy to understand.

Mini assignment

Try this now.

Break the JSON and read the message.
Return a fallback object instead of an error message.
Add an operation name to the returned error.

Practice assignment

Do this before moving to the next topic.

Trigger one SyntaxError through JSON.parse.
Catch the error and read message.
Return a structured ok/error result.

HTML + JavaScript CSS

Live preview

Self-check

Before you continue, prove that you understand Errors.