Goal Learn to diagnose this phase's failures systematically instead of reinstalling packages, changing random configuration, or copying a fix without understanding it.
The debugging loop 1. Reproduce the failure with the smallest reliable action. 2. Capture the exact symptom: command, status code, stack trace, network request, database state, or UI state. 3. Locate the earliest boundary where actual behavior diverges from expected behavior. 4. Form one hypothesis. 5. Change one variable. 6. Re-run the same reproduction. 7. Keep the fix only if the evidence supports the hypothesis.
Boundary walk risk/question -> choose boundary -> arrange controlled state -> execute behavior -> assert outcome/contract -> cleanup
Start at the visible symptom and walk backward. Do not debug the database when the browser never sent the request. Do not debug React state when the API is returning a deterministic 403. The boundary walk tells you which evidence to collect next.
Failure drill 1 — Mocking the thing the test is supposed to prove Create or imagine this failure in a safe development environment. Write the expected symptom first. Then list the two or three observations that would distinguish this failure from neighboring causes. Repair it with the smallest change and verify the original reproduction no longer fails.
Failure drill 2 — Huge number of brittle snapshot/UI implementation tests Create or imagine this failure in a safe development environment. Write the expected symptom first. Then list the two or three observations that would distinguish this failure from neighboring causes. Repair it with the smallest change and verify the original reproduction no longer fails.
Failure drill 3 — Shared mutable test data causing order-dependent failures Create or imagine this failure in a safe development environment. Write the expected symptom first. Then list the two or three observations that would distinguish this failure from neighboring causes. Repair it with the smallest change and verify the original reproduction no longer fails.
Failure drill 4 — E2E used for every rule, making feedback too slow Create or imagine this failure in a safe development environment. Write the expected symptom first. Then list the two or three observations that would distinguish this failure from neighboring causes. Repair it with the smallest change and verify the original reproduction no longer fails.
Do not hide the evidence Avoid immediately clearing caches, deleting lockfiles, resetting the database, disabling security checks, or reinstalling everything. Those actions may erase the evidence that teaches you what was wrong. Use them only after you can explain why they are relevant.
Debugging exit ticket Pick one failure from this workshop and write a short incident note: symptom, scope, root cause, fix, verification, and prevention. This is the same communication pattern used in professional bug reports and production incident follow-ups.
Tests are executable behavioral contracts. Good tests protect meaningful invariants and failure cases, not implementation trivia.
Restate the goal of “Debugging Workshop” as one observable behavior. Write the success signal before touching code.
Trace the boundary map: behavior contract → arrange → act → assert → regression signal. Mark the one boundary this lesson changes.
Inspect the current repository state and record the exact files, route, table, or runtime involved. Avoid creating an abstraction before you can name the existing owner.
Implement the smallest vertical slice. Add one coherent change, run the narrowest verification command, and read the output before continuing.
Connect the slice to TaskFlow’s phase artifact: Vitest + integration + Playwright test suite with deterministic fixtures and CI-ready commands.. Verify behavior from the outside as a user or API client would.
Create one controlled failure that is safe to reproduce. Predict the symptom first, capture evidence, locate the earliest broken boundary, then fix only that cause.
Close the reference and rebuild or explain the core change from memory. Record what you would monitor or test before trusting the same change in production.
it("rejects deleting another member's task", async () => {
const response = await asUser(bob).delete(`/tasks/${aliceTask.id}`);
expect(response.status).toBe(403);
expect(await taskStillExists(aliceTask.id)).toBe(true);
});Do not copy this as a finished answer. Predict what each boundary does, type the smallest useful slice, run it, then compare the result with your prediction.
Look for shared database state, timers, globals, unordered execution, or missing cleanup before adding retries.
Move the highest-risk boundary to an integration test with the real adapter/database.
Without copying the final source, create a second small scenario that applies “Debugging Workshop” to a different TaskFlow resource or input. Write the acceptance criteria first, implement it, and provide the evidence that each criterion is satisfied.
Write a pure unit test for one deterministic business policy.
Use the smallest change that demonstrates this lesson. Stop after it works and capture evidence.Huge number of brittle snapshot/UI implementation tests
Predict the symptom before causing the failure. Then locate the earliest boundary where reality diverges from expectation.Why does this responsibility live here, what input does it trust, what output proves success, and what would go wrong if another layer owned it?
If your explanation is vague, repeat the boundary trace before moving on.Close the reference. Reproduce the core idea from memory or explain the exact request/data flow aloud. Then check your diff or notes for accidental shortcuts that bypass validation, authorization, error handling, or verification earned in earlier phases.