The most detailed free FDE + DevOps library: 140+ lessons, 70+ labs and 80 long-form articles, in English and Turkish. Start learning →

TürkçeSearch

Build with AI: From Zero to Your First App · Module 7: Debugging and testing · Lab

Cage Three Reported Bugs

30 min hands-on · Core

Browser only. Three vague reports below are provided as starter material; cage each before any fix.

Three ways to do this lab. A: the browser steps below, the main path, free with no account. B: try the same task with your own AI tool if you have one (its terms and quotas apply). C: work from the provided material and the worked solution below, which teaches the same skill. No path claims you used a live AI tool when you did not.

Objectives

  • Convert three vague reports into expected/actual/steps reproductions
  • Run each steps twice to prove stability
  • Rank the three by fix-first order with reasons

  1. Step 1

    Cage each bug

    Reports: (1) 'orders vanish sometimes', (2) 'the form acts weird on phones', (3) 'the total looks wrong.' Write expected, actual and steps for each. Vary one condition per run for the intermittent one.

    reports.mdmarkdown
    THREE REPORTS (synthetic practice material)
---
1. 'Orders vanish sometimes.'
2. 'The form acts weird on phones.'
3. 'The total looks wrong.'

Course facts: storage-backed order list, phone layout at 360px, price 2 USD per loaf.

  2. Step 2

    Prove stability

    Run each steps twice. Identical outcomes mean caged; varying outcomes mean keep hunting by varying one condition at a time.

  3. Step 3

    Rank them

    Order by data-loss first (vanishing orders), money second (wrong total), layout third (phone weirdness), with one-line reasons.

How to confirm it worked

  • Three three-line reproductions with steps
  • Each steps run twice with outcomes recorded
  • Fix-first ranking with reasons (data, money, layout)
  • No fix attempted before caging

Workspace

0/2 checks passing · Coverage only, not a quality score.

Draft kept in this browser.

Hints, in three stages

Stage 1: a nudge

'Sometimes' means a hidden input varies. For orders, vary storage fullness; for phones, vary width; for totals, vary empty versus valued qty.

Stage 2: a direction

'Weird on phones' is two candidate bugs (overflow, labels). Split it into two cages.

Stage 3: almost the answer

Data loss outranks money outranks layout. Lost orders destroy trust fastest.

Worked solution (open after an honest attempt)

Worked solution. Bug 1 caged: fill storage with old data, submit, reload: entries dropped silently. Bug 2 split: 2a overflow at 360px (sideways scroll present), 2b labels missing (fill and read back anonymous). Bug 3 caged: empty qty submitted, total NaN. Stability: each run twice identical. Rank: bug 1 (data loss), bug 3 (money wrong), bug 2 (layout). Fixes not attempted; scenes stable and ready for reports.