reproduction-builder

Reproduction Builder

Create minimal, reliable reproduction cases for bugs.

When to Use

• Reporting bugs to maintainers
• Isolating intermittent issues
• Documenting bugs for your team
• Creating test cases from bugs
• Helping others understand an issue

The Minimal Reproduction

A minimal reproduction (repro) is:

• Minimal - Remove everything not needed to trigger the bug
• Complete - Contains everything needed to see the bug
• Verifiable - Others can run it and see the same issue
• Isolated - No external dependencies if possible

Building a Repro

Step 1: Identify the Symptom

## Bug Symptom

**What I expected:**
When I click "Submit", the form should save and show a success message.

**What actually happened:**
The page refreshes but nothing is saved. No error in UI.

**Error in console (if any):**

TypeError: Cannot read properties of undefined (reading 'id') at saveForm (form.js:45)

Step 2: Find the Trigger

Ask these questions:

• What action causes the bug?
• Does it happen every time?
• What conditions are required?

## Trigger Conditions

**Always happens when:**
- [ ] Form field "email" is empty
- [ ] User is not logged in
- [ ] Data was previously saved

**Sometimes happens when:**
- [ ] Network is slow
- [ ] Multiple tabs open
- [ ] After being idle for a while

**Never happens when:**
- [ ] All fields filled
- [ ] Fresh browser session

Step 3: Isolate Variables

Remove things one at a time until you find the minimum needed.

// Original code with bug
async function saveForm(data: FormData) {
  const validated = await validateForm(data);
  const enriched = await enrichWithUserData(validated);
  const formatted = formatForAPI(enriched);
  const response = await api.post('/forms', formatted);
  await updateLocalCache(response);
  showSuccessMessage();
  analytics.track('form_saved');
  return response;
}

// Isolated - which step fails?
async function saveFormDebug(data: FormData) {
  console.log('1. Input:', data);

  const validated = await validateForm(data);
  console.log('2. Validated:', validated);

  const enriched = await enrichWithUserData(validated);
  console.log('3. Enriched:', enriched);  // Bug here: enriched.user is undefined

  const formatted = formatForAPI(enriched);
  console.log('4. Formatted:', formatted);

  // ... rest
}