// I4.3 · ca. 34 Min. · Aufbau
Nach dieser Lektion finden Sie anhand des Stack Traces die Zeile, in der ein Programm gescheitert ist, setzen die passenden console-Aufrufe ein und gehen mit einem Debugger Schritt für Schritt durch den Code.
Danach können Sie
Aufwärmen · Aufgabe 1 von 7
try {
try {
null.length;
} catch (error) {
throw new Error("Could not count", {cause: error});
}
} catch (error) {
console.log(error.message, "/", error.cause.name);
}Vorhersagen · Aufgabe 2 von 7
function total(items) {
return items.reduce((sum, item) => sum + item.price, 0);
}
function checkout(cart) {
return total(cart.items);
}
checkout({item: []});Üben · Aufgabe 3 von 7
console.____("who calls pay?");Üben · Aufgabe 4 von 7
Üben · Aufgabe 5 von 7
async function load() {
await null;
throw new Error("late");
}
async function main() {
await load();
}
await main();Denksport · Aufgabe 6 von 7
function makeError(message) {
return new Error(message);
}
function save() {
throw makeError("disk full");
}
save();Anwenden · Aufgabe 7 von 7
Prüfen Sie Ihr Ergebnis anhand dieser Liste
Lesen Sie das ausgearbeitete Beispiel und lösen Sie dann die Übungen. Ihr Code läuft in Ihrem Browser oder auf Ihrem Computer und wird nie hochgeladen.
Ausgearbeitetes Beispiel
checkout übergibt cart.items, aber im Warenkorb steht ein Tippfehler: item. total liest dann reduce von undefined. Das Programm fängt den Fehler und gibt die ersten vier Zeilen seines Stacks aus, wobei die vollständige URL dieser Datei durch main.js ersetzt ist: den Fehler, den Frame, in dem er auftrat, den Aufrufer und die oberste Ebene des Moduls.
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"));
}
Ausführen mit
node main.jsAusgabe
TypeError: Cannot read properties of undefined (reading 'reduce')
at total (main.js:2:16)
at checkout (main.js:6:10)
at main.js:10:3Übung 1 von 2
orderTotal addiert die Bestellzeilen; jede Zeile ist {quantity, product: {name, price: {amount}}}. Die Tests scheitern mit TypeError: Cannot read properties of undefined (reading 'amount'), und der erste Frame des Traces ist at priceOf (main.js:2:21). Sehen Sie sich diese Zeile und die Daten an und beheben Sie es.
Diese Übung braucht Node.js auf Ihrem Computer (die Browser-Version kann sie nicht ausführen). Dateien und Befehle stehen unten.
Zeile 2, Spalte 21 ist die Stelle, an der .amount gelesen wird. Welcher Wert davor ist undefined?
Vergleichen Sie line.price mit der Form einer Zeile in den Tests.
Der Preis steckt in product: line.product.price.amount.
Ein möglicher Lösungsweg. Ihrer kann anders aussehen und trotzdem alle Prüfungen bestehen.
function priceOf(line) {
return line.product.price.amount * line.quantity;
}
export function orderTotal(order) {
return order.lines.reduce((sum, line) => sum + priceOf(line), 0);
}
Installieren Sie ECMAScript 2026 oder neuer. Speichern Sie diese Dateien in einem Ordner, öffnen Sie dort ein Terminal und führen Sie die Befehle unten aus.
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 Tee zu 3 und 1 Tasse zu 8 ergeben 14', () => {
const total = orderTotal(order);
assert.equal(total, 14, `orderTotal lieferte ${total}`);
});
test('eine leere Bestellung ist 0', () => {
assert.equal(orderTotal({lines: []}), 0, 'eine leere Bestellung sollte 0 sein');
});
package.json
{
"type": "module"
}
package.json sagt Node.js, dass die .js-Dateien Module sind; lassen Sie die Datei im Ordner.
Programm ausführen:
node main.jsPrüfungen ausführen (learnrun.js muss im selben Ordner liegen):
node --testÜbung 2 von 2
stackNames(error) soll die Funktionsnamen der "at"-Zeilen eines V8-Stack-Traces zurückgeben, die neueste zuerst: für "at total (main.js:2:16)" ist der Name total, "at async main (…)" ist main, und eine Zeile ohne Namen in Klammern, etwa "at main.js:10:3", wird weggelassen. Der Starter macht auch aus der ersten Zeile, der Fehlermeldung, einen Namen.
Diese Übung braucht Node.js auf Ihrem Computer (die Browser-Version kann sie nicht ausführen). Dateien und Befehle stehen unten.
Führen Sie die Tests aus: Wie sieht der erste Name aus?
Nur Zeilen, die mit "at " beginnen, sind Frames.
Ergänzen Sie im Filter line.startsWith("at ").
Ein möglicher Lösungsweg. Ihrer kann anders aussehen und trotzdem alle Prüfungen bestehen.
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 /, ""));
}
Installieren Sie ECMAScript 2026 oder neuer. Speichern Sie diese Dateien in einem Ordner, öffnen Sie dort ein Terminal und führen Sie die Befehle unten aus.
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('die Namen eines aufgeschriebenen Traces, neueste zuerst', () => {
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 lieferte ${JSON.stringify(names)}`);
});
test('ein echter Fehler beginnt mit der Funktion, die ihn erzeugt hat', () => {
function inner() {
return new Error('boom');
}
function outer() {
return inner();
}
const names = stackNames(outer());
assert.deepEqual(names.slice(0, 2), ['inner', 'outer'], `stackNames lieferte ${JSON.stringify(names)}`);
});
package.json
{
"type": "module"
}
package.json sagt Node.js, dass die .js-Dateien Module sind; lassen Sie die Datei im Ordner.
Programm ausführen:
node main.jsPrüfungen ausführen (learnrun.js muss im selben Ordner liegen):
node --testconst names = ["ada", "linus"];
for (const name of names) {
console.log(name.toUppercase());
}
Was Node.js ausgibt
TypeError: name.toUppercase is not a functionWarum, und die Lösung
Die Meldung nennt das Problem bereits: name.toUppercase gibt es nicht, es ist also undefined, und undefined lässt sich nicht aufrufen. Suchen Sie zuerst nach einem Tippfehler: Die Methode heißt toUpperCase, mit großem C.
function countDown(n) {
console.log(n);
return countDown(n - 1);
}
countDown(3);
Was Node.js ausgibt
RangeError: Maximum call stack size exceededWarum, und die Lösung
Der Trace zeigt countDown immer wieder: Die Funktion ruft sich ohne Ende selbst auf. Jede rekursive Funktion braucht einen Fall, der aufhört: if (n === 0) return;. Ein Trace voller gleicher Frames weist immer darauf hin.
function setAge(user, text) {
const age = Number(text);
if (Number.isNaN(age)) throw new Error("Invalid value");
user.age = age;
}
setAge({name: "Ada"}, "forty");
Was Node.js ausgibt
Error: Invalid valueWarum, und die Lösung
Der Trace zeigt, wo der Fehler geworfen wurde, aber die Meldung sagt nicht, welcher Wert falsch war und warum. Schreiben Sie die Fakten in die Meldung: throw new TypeError(`age must be a number, got "${text}"`). Wer das Log liest, vielleicht Sie selbst in sechs Monaten, kann es dann ohne Debugger beheben.
JavaScript im Browser: die eigene Engine Ihres Browsers in einem abgeschotteten Worker. Syntaxfehler findet acorn 8.18.0, MIT. Lizenz und Quellcode
5 Fragen, ohne Hinweise. Ab 80 % ist die Lektion abgeschlossen.
Erledigen Sie zuerst alle Aufgaben oben, um das Abschlussquiz freizuschalten.