Red text on the screen feels like failure. It is the opposite: the program is telling you exactly what went wrong and where.
The failures worth fearing print nothing.
Anatomy of an error
Uncaught TypeError: Cannot read properties of null (reading 'value')
at saveLink (readlist.html:84:23)
at HTMLButtonElement.onclick (readlist.html:41:9)
Three things, and you need all three:
Line one — what happened. “Cannot read properties of null” means the code asked something for a piece of itself, and that something did not exist. reading 'value' says it wanted the value — the text box’s contents. So: the code looked for the text box and found nothing.
The location. readlist.html:84:23 — file, line 84, character 23. That is where it broke.
The trail below. Read upward from the bottom: a button was clicked, which called saveLink, which is where it died. This tells you the path execution took.
Common first lines, translated:
X is not a function— that name does not exist, or is not the kind of thing you can call. Often a hallucinated method.X is not defined— nothing by that name exists at all. A typo, or something never created.Cannot read properties of null/undefined— something expected to exist did not. Usually an element that is missing or not loaded yet.Unexpected token— the syntax is malformed. Something is unfinished, often a missing bracket.Cannot find module— the file or package that was named is not at that path. Usually the name does not match what is actually on disk.404 Not Found— a file or address that was requested is not there.Permission denied— the program is not allowed to do that.
Quick check
An error says a function 'is not a function' on a library you just added. What is the most likely explanation?
Make one happen
Reading errors is not a thing you can learn by reading about errors. Go and cause one.
The terminal next to this lesson has the readlist folder in it, with a one-line script the agent left there to check that things run. The instructions you were handed end with "run node app.js".
Do exactly that, and read what comes back instead of what you hoped for.
node app.js— an error, not output.ls— the error said something was missing, so ask the folder what is actually in it.- Run the file that is really there, the same way, and watch the check pass.
Read the first line before you touch anything. It names the thing it could not find, and it puts that name in quotes so you can hold it up against the name on disk. Nothing was broken and nothing needed debugging: the instruction pointed at a file that was never called that.
The error did not just tell you something failed. It told you which name was wrong, which is the entire fix.
Note
This practice terminal does not really run JavaScript — it prints what the file’s console.log lines would print. The error, and the loop you run around it, are the real part.
Reproduce it first
Before you report anything, get the error to happen on demand.
Steps: open the page, leave the box empty, click Save. Error appears every time.
A reproducible bug is a solved bug most of the time. A bug that happens “sometimes, I think when I refresh” is a research project, and it is a research project for the agent too.
If you cannot reproduce it, say that explicitly rather than pretending you can. “It happened once and I cannot make it happen again” is honest and useful information.
Quick check
Why does reproducing a bug matter so much before reporting it?
What to paste
The whole error. Every line. Do not summarise, do not retype it, do not trim the parts that look like noise.
I clicked Save with an empty box and got this:
Uncaught TypeError: Cannot read properties of null (reading 'value')
at saveLink (readlist.html:84:23)
at HTMLButtonElement.onclick (readlist.html:41:9)
I expected it to either save nothing or show a message.
Steps: open the page, leave the box empty, click Save. Happens every time.
That message contains everything: the exact error, the location, what you expected, and how to trigger it. Most of the time it produces a correct fix on the first attempt.
The version that does not:
it's broken when i click save
Important
One thing to strip before pasting: anything secret. Errors sometimes contain connection strings, or file paths with your name in them. Replace those with a placeholder before sending.
Where errors hide
Errors do not always appear where you are looking. Depending on what you built, check:
- The browser console — a panel in your browser’s developer tools where JavaScript errors go. A web page can be visibly broken with a perfectly clean-looking page and a console full of red.
- The terminal window where the program is running.
- The network tab for requests that failed with a 404 or 500.
- A log file, if the program writes one.
If nothing is visibly wrong but the behaviour is off, ask directly:
Where would errors from this show up, and how do I look at them?
Quick check
A web page looks fine but a button does nothing at all. Where do you look first?
Silent failures
The hard case: no error at all, and the result is wrong.
The list shows four items when you saved five. The total says 90 when it should say 100. The delete button removes the item from the screen and it comes back after a refresh.
Nothing will tell you. You have to check — which is why the finish line you wrote in level 1 matters so much. It is the list of things to actually verify.
The technique is to test with values whose answer you know. Save exactly three links, count three. Delete one, refresh, count two. Enter a price of exactly 100 with a 20% discount and check for 80.
Tip
Do one deliberate check with a known answer for anything involving numbers, counts or money. It takes fifteen seconds and it is the only defence against code that runs perfectly and is wrong.
The loop, again
Run it. Read what happened. Report action, expectation, observation, plus the exact error. Run it again.
The error text is not an obstacle in that loop. It is the most specific feedback you will get all day.