Phase 13Intermediate14 of 16 in JavaScript

Errors, Debugging and Testing

Read any error and its stack trace, handle failures with try/catch, throw helpful errors, debug in DevTools, write defensive code and test it.

Every program fails sometimes: a user types letters into a number box, a server sends back broken JSON, a variable is undefined when you thought it held an object. This phase is about failing well. You'll learn the kinds of error JavaScript has, how to read the red message and its stack trace, and how try, catch and finally let you handle a failure instead of letting it stop your script.

Then you'll throw your own errors with messages that tell the next person exactly what went wrong, using Error subclasses and the ES2022 cause option to keep the original error. You'll pause running code in DevTools with breakpoints, step through it line by line and watch values change, and you'll write defensive code that checks its input at the door and never fails silently.

Last, you'll write tests: small pieces of code that check your code, so a bug is caught by a machine before a user finds it. You'll build a tiny test helper inside the live examples and see how real test runners such as Vitest and Jest do the same job. This phase builds on functions (Phase 3), classes (Phase 7), promises and async/await (Phase 10) and tooling (Phase 12).

0/6 · 0%

6 topics ~2 h 22 code blocks & diagrams

Start with the first topic

13.1

Error Types

When JavaScript can't do what you asked, it creates an error object with a name, a message and a stack trace; the name (SyntaxError, ReferenceError, TypeError, RangeError and a few more) tells you what kind of mistake it is, and the stack trace tells you where.

23 min 3 code practice

13.2

try, catch and finally

try runs code that might fail, catch runs only if it throws and receives the error, and finally runs in every case; catch an error only where you can do something useful with it, and rethrow the ones you can't handle.

22 min 4 code practice

13.3

Throwing Your Own Errors

throw new Error("message") stops a function and hands a problem to its caller; good errors use the right type, a message that says what was wrong and what was expected, your own Error subclasses for problems callers handle differently, and the ES2022 cause option to keep the original error.

22 min 4 code practice

13.4

Debugging with DevTools

Debugging means finding why code does something different from what you expected; DevTools lets you pause the running code with breakpoints or the debugger statement, step through it one line at a time, and watch every value, instead of guessing.

22 min 3 code practice

13.5

Defensive Coding

Defensive code checks what comes in before using it: guard clauses reject bad input at the top of a function, optional chaining and ?? handle values that may be missing, and anything unexpected fails loudly instead of quietly producing wrong results.

24 min 4 code practice

13.6

Testing Basics

A test is a small piece of code that runs your code with a known input and checks the result with an assertion; a test runner such as Vitest or Jest runs all your tests and reports which pass, so bugs are caught by a machine every time you change something.

25 min 4 code practice