Trace and Debug the Data Flow

Debugging means finding where the story changes

Suppose the page says "No resources found," but the JSON file contains three resources. Do not change several functions at once. Follow one resource from the file to the screen.

Ask the same simple question at every step: is my resource still here, and does it still have the expected value?

1. requested file
       |
       v
2. HTTP response
       |
       v
3. parsed JavaScript value
       |
       v
4. state.items
       |
       v
5. visibleItems after filtering
       |
       v
6. value received by render
       |
       v
7. DOM element on the page

The first incorrect step tells you where to investigate. If the Network panel shows three resources but state.items is empty, the problem happened between parsing and the state assignment.

A slow method is faster than guessing

1. Reproduce the problem with the same action.
2. Write the expected result in one sentence.
3. Start at the data source.
4. Inspect one boundary at a time.
5. Stop at the first unexpected value.
6. Correct one cause.
7. Repeat the original action.

Example: the list appears before the data

async function init() {
  render();
  state.items = await fetchResources();
}

Trace it:

1. render() reads the initial empty array.
2. It displays an empty list.
3. The data arrives and enters state.
4. No render runs after the assignment.
5. The screen remains old even though state is correct.

The smallest correction is to render after the state changes:

async function init() {
  state.items = await fetchResources();
  render();
}

Explain three more bugs

For each bug, say what the user sees and which step of the flow is wrong.

1. Filtering assigns its result back to state.items. Returning to all cannot restore removed items.
2. render() attaches another event listener every time it runs. One click eventually triggers the same action several times.
3. The data service catches an error and returns []. A failed request is displayed as a successful empty result.

Stop and check

Without looking above, write the seven flow steps on paper. Then explain where you would look first if:

• the request returns 404;
• state contains three items but visibleItems is empty;
• render() receives three items but no DOM elements appear.

What to remember

Do not repair a frontend by guessing. Follow one value and stop at the first place where reality differs from the expected result.