// I4.3 · ~34 min · Intermediate
After this lesson you can find the line where a program failed from its stack trace, add the right console calls, and step through code with a debugger.
You will be able to
Warm-up · Activity 1 of 7
try {
try {
null.length;
} catch (error) {
throw new Error("Could not count", {cause: error});
}
} catch (error) {
console.log(error.message, "/", error.cause.name);
}Predict · Activity 2 of 7
function total(items) {
return items.reduce((sum, item) => sum + item.price, 0);
}
function checkout(cart) {
return total(cart.items);
}
checkout({item: []});Practice · Activity 3 of 7
console.____("who calls pay?");Practice · Activity 4 of 7
Practice · Activity 5 of 7
async function load() {
await null;
throw new Error("late");
}
async function main() {
await load();
}
await main();Brain teaser · Activity 6 of 7
function makeError(message) {
return new Error(message);
}
function save() {
throw makeError("disk full");
}
save();Apply · Activity 7 of 7
Check your work against this list
Read the worked example, then write the exercises. Your code runs in your browser or on your computer and is never uploaded.
Worked example
checkout passes cart.items, but the cart has a typo: item. total then reads reduce from undefined. The program catches the error and prints the first four lines of its stack, with this file’s full URL replaced by main.js: the error, the frame where it happened, the caller, and the top level of the module.
main.js
function total(items) {
return items.reduce((sum, item) => sum + item.price, 0);
}
function checkout(cart) {
return total(cart.items);
}
try {
checkout({item: [{price: 3}]}); // a typo: item instead of items
} catch (error) {
// The first four lines of the stack, with this file shown as main.js:
const lines = error.stack.split("\n").slice(0, 4);
console.log(lines.join("\n").replaceAll(import.meta.url, "main.js"));
}
Run it with
node main.jsOutput
TypeError: Cannot read properties of undefined (reading 'reduce')
at total (main.js:2:16)
at checkout (main.js:6:10)
at main.js:10:3Exercise 1 of 2
orderTotal adds up the order lines; each line is {quantity, product: {name, price: {amount}}}. The tests fail with TypeError: Cannot read properties of undefined (reading 'amount'), and the first frame of the trace is at priceOf (main.js:2:21). Look at that line and the data, and fix it.
This exercise needs Node.js on your computer (the browser version cannot run it). The files and commands are below.
Line 2, column 21 is where .amount is read. Which value before it is undefined?
Compare line.price with the shape of a line in the tests.
The price sits inside product: line.product.price.amount.
One way to solve it. Yours can look different and still pass the checks.
function priceOf(line) {
return line.product.price.amount * line.quantity;
}
export function orderTotal(order) {
return order.lines.reduce((sum, line) => sum + priceOf(line), 0);
}
Install ECMAScript 2026 or newer. Save these files in one folder, open a terminal in that folder, and run the commands below.
main.js
function priceOf(line) {
return line.price.amount * line.quantity;
}
export function orderTotal(order) {
return order.lines.reduce((sum, line) => sum + priceOf(line), 0);
}
main.test.js
import {test} from 'node:test';
import assert from 'node:assert/strict';
import {orderTotal} from './main.js';
const order = {
lines: [
{quantity: 2, product: {name: 'Tea', price: {amount: 3}}},
{quantity: 1, product: {name: 'Mug', price: {amount: 8}}}
]
};
test('2 teas at 3 and 1 mug at 8 make 14', () => {
const total = orderTotal(order);
assert.equal(total, 14, `orderTotal gave ${total}`);
});
test('an empty order is 0', () => {
assert.equal(orderTotal({lines: []}), 0, 'an empty order should be 0');
});
package.json
{
"type": "module"
}
package.json tells Node.js that the .js files are modules; keep it in the folder.
Run the program:
node main.jsRun the checks (needs learnrun.js in the same folder):
node --testExercise 2 of 2
stackNames(error) should return the function names of the "at" lines in a V8 stack trace, newest first: for "at total (main.js:2:16)" the name is total, "at async main (…)" is main, and a line without a name in brackets, such as "at main.js:10:3", is left out. The starter also turns the first line, the error message, into a name.
This exercise needs Node.js on your computer (the browser version cannot run it). The files and commands are below.
Run the tests: what does the first name look like?
Only lines that start with "at " are frames.
Add line.startsWith("at ") to the filter.
One way to solve it. Yours can look different and still pass the checks.
export function stackNames(error) {
return error.stack
.split("\n")
.map((line) => line.trim())
.filter((line) => line.startsWith("at ") && line.includes(" ("))
.map((line) => line.slice(3).split(" (")[0].replace(/^async /, ""));
}
Install ECMAScript 2026 or newer. Save these files in one folder, open a terminal in that folder, and run the commands below.
main.js
export function stackNames(error) {
return error.stack
.split("\n")
.map((line) => line.trim())
.filter((line) => line.includes(" ("))
.map((line) => line.slice(3).split(" (")[0].replace(/^async /, ""));
}
main.test.js
import {test} from 'node:test';
import assert from 'node:assert/strict';
import {stackNames} from './main.js';
test('the names of a written trace, newest first', () => {
const error = {stack: 'TypeError: x (y) is wrong\n at total (main.js:2:16)\n at async main (main.js:6:10)\n at main.js:10:3'};
const names = stackNames(error);
assert.deepEqual(names, ['total', 'main'], `stackNames gave ${JSON.stringify(names)}`);
});
test('a real error starts with the function that made it', () => {
function inner() {
return new Error('boom');
}
function outer() {
return inner();
}
const names = stackNames(outer());
assert.deepEqual(names.slice(0, 2), ['inner', 'outer'], `stackNames gave ${JSON.stringify(names)}`);
});
package.json
{
"type": "module"
}
package.json tells Node.js that the .js files are modules; keep it in the folder.
Run the program:
node main.jsRun the checks (needs learnrun.js in the same folder):
node --testconst names = ["ada", "linus"];
for (const name of names) {
console.log(name.toUppercase());
}
What Node.js prints
TypeError: name.toUppercase is not a functionWhy, and the fix
The message already names the problem: name.toUppercase does not exist, so it is undefined, and undefined cannot be called. Look for a typo before you look for anything else: the method is toUpperCase, with a capital C.
function countDown(n) {
console.log(n);
return countDown(n - 1);
}
countDown(3);
What Node.js prints
RangeError: Maximum call stack size exceededWhy, and the fix
The trace shows countDown again and again: the function calls itself with no end. Every recursive function needs a case that stops: if (n === 0) return;. A trace full of the same frame always points to that.
function setAge(user, text) {
const age = Number(text);
if (Number.isNaN(age)) throw new Error("Invalid value");
user.age = age;
}
setAge({name: "Ada"}, "forty");
What Node.js prints
Error: Invalid valueWhy, and the fix
The trace shows where the error was thrown, but the message does not say which value was wrong or why. Put the facts into the message: throw new TypeError(`age must be a number, got "${text}"`). Whoever reads the log, maybe you in six months, can then fix it without a debugger.
JavaScript in the browser: your browser’s own engine, in a sandboxed worker. Syntax errors are located with acorn 8.18.0, MIT. Licence and source
5 questions, no hints. Score 80% or more to complete the lesson.
Finish every activity above to unlock the exit ticket.