Every programmer writes bugs every day. What separates experienced developers from beginners is not fewer bugs but a calmer, faster way of finding them. That starts with reading what the computer is telling you.
\nWhen JavaScript cannot continue, it throws an error, and if nothing catches it, the console shows something like this:
\nUncaught TypeError: Cannot read properties of undefined (reading 'amount')\n at totalCents (expenses.js:12:31)\n at renderSummary (ui.js:40:17)\n at HTMLFormElement.<anonymous> (main.js:27:5)Read it in three parts. The type, TypeError, says which kind of problem: a value had the wrong type for what you did to it. The message says exactly what: something before .amount was undefined. The stack trace lists the chain of function calls that led there, most recent first: totalCents at line 12 of expenses.js failed, it was called by renderSummary, which was called by the form’s submit handler. In DevTools each location is a link straight to that line.
The types you will meet most:
\n| Type | \nUsually means | \n
|---|---|
ReferenceError | \nA name that does not exist: typo, or used before its declaration | \n
TypeError | \nWrong kind of value: calling a non-function, reading from undefined | \n
SyntaxError | \nThe code cannot be parsed: a missing bracket, quote or comma | \n
RangeError | \nA number outside what is allowed, such as toFixed(200) | \n
You can throw errors yourself, and you should when your code is given something it cannot sensibly handle:
\nfunction parseAmount(text) {\n const dollars = Number(text);\n if (text.trim() === \"\" || !Number.isFinite(dollars) || dollars <= 0) {\n throw new Error(`Invalid amount: \"${text}\"`);\n }\n return Math.round(dollars * 100);\n}\n\ntry {\n console.log(parseAmount(\"12.20\"));\n console.log(parseAmount(\"twelve\"));\n console.log(\"this line never runs\");\n} catch (error) {\n console.log(\"Caught:\", error.message);\n} finally {\n console.log(\"finally always runs\");\n}throw stops the function immediately and travels up the call stack until some try/catch catches it. If none does, it becomes an uncaught error in the console. finally runs whether or not anything was thrown, which is the place for clean-up such as hiding a loading spinner.
Some errors are expected, such as a user typing a bad amount; others are bugs. Callers need to tell them apart, and a custom error class makes that possible:
\nclass ValidationError extends Error {\n constructor(field, message) {\n super(message);\n this.name = \"ValidationError\";\n this.field = field;\n }\n}\n\nfunction addFromForm(label, amountText) {\n if (label.trim() === \"\") {\n throw new ValidationError(\"label\", \"Enter what you spent money on.\");\n }\n return { label: label.trim(), amount: Math.round(Number(amountText) * 100) };\n}\n\ntry {\n addFromForm(\" \", \"4.50\");\n} catch (error) {\n if (error instanceof ValidationError) {\n console.log(`Show next to ${error.field}: ${error.message}`);\n } else {\n throw error; // not ours to handle\n }\n}extends Error makes ValidationError a kind of Error with a stack trace, super(message) runs the parent constructor, and the extra field property tells the form where to show the message. The catch handles only what it understands and rethrows everything else, so real bugs still surface.
console.log is a fine first tool, but it only shows what you thought to print. The DevTools debugger pauses your program on a line and shows you everything.
In Chrome or Edge, open DevTools, go to the Sources panel, open your file and click a line number. That sets a breakpoint. The next time that line is about to run, everything pauses, and you can:
\nRight-click a line number to add a conditional breakpoint, such as expense.amount > 100000, which pauses only when the condition is true. You can also write the statement debugger; in your code: when DevTools is open, execution pauses there. Remove it before you commit.
The temptation, especially when tired, is to skip straight to changing code until the symptom goes away. That usually creates a second bug. Ten minutes of looking at real values beats an hour of guessing.
\nYou now have every piece Pocket needs. Next lesson you assemble them into the finished app.
\n","toc":[{"id":"sec-1","text":"Reading an error","level":2},{"id":"sec-2","text":"Throwing errors on purpose","level":2},{"id":"sec-3","text":"Custom error types","level":3},{"id":"sec-4","text":"The debugger: stop and look","level":2},{"id":"sec-5","text":"A method for any bug","level":2}],"takeaways":["An error message names the error type, says what went wrong, and its stack trace points to the file and line where it happened.","Throw anError when your code cannot continue sensibly; catch it only where you can do something useful, and rethrow anything you did not expect.","A custom error class (class ValidationError extends Error) lets callers tell expected problems apart from real bugs with instanceof.","A breakpoint pauses your code on a line so you can inspect every variable and step through it one line at a time; debugger; sets one from code.","Debug by evidence, not guesswork; reproduce the bug, find the first line where reality differs from your expectation, then fix that."],"further":[{"title":"Control flow and error handling (MDN)","url":"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling"},{"title":"What went wrong? Troubleshooting JavaScript (MDN)","url":"https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting/What_went_wrong"},{"title":"Error (MDN)","url":"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error"}],"quiz":[{"q":"TypeError: expenses.map is not a function at renderExpenses (ui.js:14). What is the most useful first step?
try/catch so the page keeps working.","why":"That hides the symptom and leaves the cause. The list would silently stop rendering."},{"text":"Rewrite renderExpenses with a for loop instead of map.","why":"The loop would fail too, or behave oddly. The real question is what expenses actually is."},{"text":"Restart the dev server and clear the browser cache.","why":"The message describes a logic problem, a value of the wrong type, not a stale file."},{"text":"Pause at ui.js line 14 and check what expenses actually holds, then trace back to where that value came from.","why":"Correct. map is missing, so expenses is not an array, perhaps null from storage or an object. Find out which, then fix the source."}],"answer":3},{"q":"A catch block in Pocket’s save function reads catch (error) {}. What is the problem?
error parameter must always be used or the code will not run.","why":"An unused parameter is legal. You can even write catch {}. The issue is silently discarding errors."},{"text":"catch blocks only work inside async functions.","why":"try/catch works in any function. With async code you just have to await inside the try."}],"answer":0},{"q":"You want to know why a total is wrong only for the 40th expense in a loop. Which DevTools feature fits best?
","options":[{"text":"Aconsole.log before the loop.","why":"That runs once, before the interesting part. It cannot show you the 40th pass."},{"text":"The Network panel.","why":"The Network panel shows requests to servers. This is a calculation inside your own code."},{"text":"A conditional breakpoint inside the loop, such as i === 39.","why":"Correct. The debugger pauses only on that pass, and you can inspect every variable at that moment."},{"text":"Reloading the page with the cache disabled.","why":"Caching does not change how a calculation runs. You need to look at the values during the loop."}],"answer":2}],"exercise":{"kind":"web","mode":"js","starter":{"js":"// 1. An error type for problems the user can fix\nclass ValidationError extends Error {\n constructor(field, message) {\n super(message);\n // set name and field here\n }\n}\n\n// 2. Return whole cents, or throw a ValidationError for the \"amount\" field\nfunction parseAmount(text) {\n return Math.round(Number(text) * 100);\n}\n\n// 3. Return { ok: true, list } with the new expense added, or\n// { ok: false, field, message } for a ValidationError.\n// Any other error must NOT be swallowed.\nfunction tryAdd(list, label, amountText) {\n try {\n const expense = { label: label.trim(), amount: parseAmount(amountText) };\n return { ok: true, list: [...list, expense] };\n } catch (error) {\n return { ok: false };\n }\n}\n\nconsole.log(tryAdd([], \"Tea\", \"abc\"));\n"},"solution":{"js":"class ValidationError extends Error {\n constructor(field, message) {\n super(message);\n this.name = \"ValidationError\";\n this.field = field;\n }\n}\n\nfunction parseAmount(text) {\n const dollars = Number(text);\n if (text.trim() === \"\" || !Number.isFinite(dollars) || dollars <= 0) {\n throw new ValidationError(\"amount\", \"Enter an amount greater than zero.\");\n }\n return Math.round(dollars * 100);\n}\n\nfunction tryAdd(list, label, amountText) {\n try {\n if (label.trim() === \"\") {\n throw new ValidationError(\"label\", \"Enter what you spent money on.\");\n }\n const expense = { label: label.trim(), amount: parseAmount(amountText) };\n return { ok: true, list: [...list, expense] };\n } catch (error) {\n if (error instanceof ValidationError) {\n return { ok: false, field: error.field, message: error.message };\n }\n throw error;\n }\n}\n\nconsole.log(tryAdd([], \"Tea\", \"abc\"));\n"},"checks":[{"id":"error-class","test":"const e = new ValidationError('amount', 'Bad');\nreturn e instanceof Error && e.name === 'ValidationError' && e.field === 'amount' && e.message === 'Bad';\n"},{"id":"parse-ok","test":"return parseAmount('4.10') === 410 && parseAmount(' 12 ') === 1200;\n"},{"id":"parse-throws","test":"const bad = ['', ' ', 'abc', '0', '-5', 'Infinity'];\nreturn bad.every((t) => { try { parseAmount(t); return false; } catch (e) { return e instanceof ValidationError && e.field === 'amount'; } });\n"},{"id":"try-add-ok","test":"const r = tryAdd([{ label: 'Bus', amount: 270 }], ' Tea ', '3');\nreturn r.ok === true && r.list.length === 2 && r.list[1].label === 'Tea' && r.list[1].amount === 300;\n"},{"id":"try-add-invalid","test":"const a = tryAdd([], 'Tea', 'abc');\nconst b = tryAdd([], ' ', '3');\nreturn a.ok === false && a.field === 'amount' && typeof a.message === 'string' && a.message.length > 0 && b.ok === false && b.field === 'label';\n"},{"id":"rethrows","test":"try { tryAdd(null, 'Tea', '3'); return false; } catch (e) { return e instanceof TypeError; }\n"}],"title":"Throw what users can fix, rethrow the rest","prompt":"ValidationError so instances have name set to "ValidationError" and a field property.parseAmount(text) return whole cents, or throw a ValidationError with field "amount" when the text is empty, not a finite number, or not greater than 0.tryAdd(list, label, amountText). For a valid entry it returns { ok: true, list } with the new expense (trimmed label, amount in cents) added. An empty label throws a ValidationError with field "label". Validation errors become { ok: false, field, message }. Any other error must be rethrown, not swallowed.super(message): this.name = "ValidationError"; this.field = field;.","Number("") is 0 and Number("Infinity") is Infinity, so check text.trim() === "" and Number.isFinite(dollars) && dollars > 0.","In the catch: if (error instanceof ValidationError) { return { ok: false, field: error.field, message: error.message }; } throw error;."],"explanation":"ValidationError extends Error, so it keeps a message and a stack trace, and adds the field the form needs to place the message. parseAmount throws instead of returning a special value, so callers cannot accidentally treat a bad amount as a number. In tryAdd, the catch checks instanceof ValidationError and turns only those into a friendly result; anything else, such as the TypeError from spreading null, is a bug in the calling code and is rethrown so it shows up in the console instead of disappearing.
ValidationError is an Error with a name and a field","parse-ok":"parseAmount returns whole cents for valid text","parse-throws":"parseAmount throws a ValidationError for empty, non-numeric, zero, negative or infinite input","try-add-ok":"tryAdd adds a valid expense","try-add-invalid":"tryAdd returns { ok: false, field, message } for invalid input","rethrows":"tryAdd rethrows errors that are not ValidationErrors"}},"words":717,"readMinutes":3}