# Run it and read the error

Course: Vibe Coding 101 — https://zero2vibecode.com/learn/vibe-coding-101
Canonical URL: https://zero2vibecode.com/learn/vibe-coding-101/3-2-run-it-and-read-the-error

An error message is the most useful text on your screen — how to read one, what to paste back, and why "it does not work" is the worst thing you can send.

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

```text
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.

## 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.

1. `node app.js` — an error, not output.
2. `ls` — the error said something was missing, so ask the folder what is actually in it.
3. 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.

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.

```text
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.

## What to paste

The whole error. Every line. Do not summarise, do not retype it, do not trim the parts that look like noise.

```text
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:

```text
it's broken when i click save
```

One thing to strip before pasting: anything secret. Errors sometimes contain connection strings, tokens 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:

```text
Where would errors from this show up, and how do I look at them?
```

## 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.

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.