Turn a complaint into a reproducible defect

First, build a mental model

A defect is a difference between an expected contract and an observation. A reproduction is a small experiment that makes that difference appear again.

1. Record the symptom separately from your explanation. 'Total is 6 after two clicks' is an observation; 'React is broken' is an untested hypothesis.
2. Capture the smallest relevant input, initial state, action sequence and environment. Include viewport or input device when they affect the failure.
3. Reduce one dimension at a time while retaining the symptom. Removing unrelated network, styling or records makes competing explanations easier to separate.
4. Use breakpoints, stack traces and inspected values to locate the first divergence. Logging everything can bury evidence and expose sensitive data.

function labelCount(count) {
  return count + 1;
}
console.log(labelCount(5));    // 6
console.log(labelCount('5'));  // '51'
// Observation: a string input changes the operation.

1. Observe

   The numeric input and string input look similar in a form but produce different outputs.

2. Reduce

   The failure survives without React, a database or CSS: one function and one input are enough.

3. Locate

   The first divergence is the input type. Addition and string concatenation are different operations.