24. JavaScript Errors

What you will learn

• The kinds of errors you will meet
• How to read an error message
• How to handle errors with try...catch
• How to throw your own errors
• Basic debugging tips

Kinds of errors

There are also logic errors: the code runs without any message but gives the wrong answer. They are often the hardest to find.

Reading an error

Press F12 and open the Console tab. Errors appear in red with a message, the file, and the line number. Start with the first error, because later ones are often caused by it.

try…catch

Put risky code in try. If it throws an error, JavaScript jumps to catch instead of stopping the script.

<p id="demo"></p>

<script>
  try {
    const result = missingFunction();   // does not exist
    document.getElementById("demo").textContent = result;
  } catch (error) {
    document.getElementById("demo").textContent =
      "Caught: " + error.name + " - " + error.message;
  }
</script>

The error object has a name and a message.

finally

A finally block runs whether or not an error happened. It is good for cleanup, such as hiding a loading message.

<p id="demo"></p>

<script>
  let log = "";

  try {
    log += "Trying... ";
    JSON.parse("{ not valid json }");
  } catch (error) {
    log += "Caught a " + error.name + ". ";
  } finally {
    log += "Finally always runs.";
  }

  document.getElementById("demo").textContent = log;
</script>

Throwing your own errors

Use throw when something is wrong that your code should not continue past. Throw an Error object with a clear message.

<p id="demo"></p>

<script>
  function divide(a, b) {
    if (b === 0) {
      throw new Error("Cannot divide by zero");
    }
    return a / b;
  }

  let message;
  try {
    message = "10 / 2 = " + divide(10, 2) + " | ";
    message += "10 / 0 = " + divide(10, 0);
  } catch (error) {
    message += "Error: " + error.message;
  }

  document.getElementById("demo").textContent = message;
</script>

Handling errors kindly

• Show visitors a friendly message, not a technical one.
• Record the technical details for yourself, for example with console.error(error).
• Catch errors where you can do something useful about them. Do not wrap everything in an empty catch, which hides problems.

Debugging tips

1. Read the message and the line number in the console.
2. Print values with console.log() to see what your variables really contain.
3. Use the debugger: in the browser’s Sources tab, click a line number to set a breakpoint. The code pauses there and you can inspect every variable and step line by line.
4. Simplify: comment out code until the problem disappears, then bring it back piece by piece.
5. Check spelling and capital letters, which cause a large share of errors.
6. Explain it aloud. Describing the code line by line often reveals the mistake.

Common mistakes

• Ignoring red messages in the console.
• An empty catch block that swallows errors silently.
• Throwing plain strings instead of Error objects.
• Expecting try...catch to catch a SyntaxError in the same script. The script never starts to run.
• Showing raw technical messages to visitors.

<p id="demo"></p>

<script>
  function getAge(value) {
    const number = Number(value);
    if (Number.isNaN(number)) {
      throw new Error("Age must be a number");
    }
    return number;
  }

  try {
    getAge("abc");
  } catch (error) {
    document.getElementById("demo").textContent = error.message;
  }
</script>

Summary

• Read the console message and line number first.
• Use try...catch...finally for risky code, and throw new Error() for your own problems.
• Debug with the console and the debugger, and never hide errors silently.