Scenario Debugging

A blog series

Scenario Debugging: The “It's Slow, Fix It” Guide

Scenario questions answered with one method you can repeat: measure, isolate, fix, check. API fast but UI slow, UI fast but API slow, re-renders, memory leaks, duplicate requests, slow first loads, huge lists and layout shift. Plus many cases about incidents, backend, frontend, security and architecture.

Started 
2026
Lessons 
15
Reading 
~5 h

Contents

Every lesson has the same steps: what it is, how it works, a real example, common mistakes, then interview questions with answers you can say out loud.

  1. Lesson 00The Debugging Method: Measure, Isolate, Hypothesize, VerifyThe method every answer in this series uses: which DevTools panel or server number answers which question, and how to explain your choices out loud.12 min
  2. Lesson 01“The API Is Fast but the UI Is Slow”: How to Solve ItThe network tab says 80 ms, but users wait two seconds. Long main-thread tasks, huge JSON, many re-renders, layout thrashing and hydration cost, all linked to INP.20 min
  3. Lesson 02“The UI Is Fast but the API Takes Too Long”: How to Solve ItFollow the request: DNS and TLS, cold starts, N+1 queries, missing indexes, slow calls to other services, big payloads and missing caches. Then the UX fixes while the backend is repaired.20 min
  4. Lesson 03Unnecessary Re-renders: Finding and Fixing ThemThe React Profiler, context updates that re-render every consumer, props that change each time, using memo on purpose and not everywhere, and what the React Compiler changes.18 min
  5. Lesson 04Memory Leaks in Single-Page AppsTimers and listeners that are never cleared, detached DOM nodes, closures that hold big objects and caches that only grow. Also how to confirm a leak with heap snapshots.15 min
  6. Lesson 05Duplicate Requests, Race Conditions and Stale ResponsesStrict Mode running effects twice, double-click submits, responses that arrive in the wrong order, AbortController, removing duplicate requests, and idempotency keys on the server.15 min
  7. Lesson 06Slow First Load: Bundles, Code Splitting and LCPBundle analysis, code splitting by route, image optimisation, font loading, preload and preconnect, and Server Components with streaming.18 min
  8. Lesson 07Rendering 10,000 Rows: Virtualization, Pagination and Web WorkersWindowing, content-visibility, rendering in small chunks, and moving sort and filter work off the main thread.15 min
  9. Lesson 08Layout Shift and Janky InteractionsLayout shift from images, ads and late fonts, and slow input from heavy event handlers. It ends with a short checklist.12 min
  10. Lesson 09Quick Scenario Round: 15 Questions, 15 Clear AnswersCORS failing only in production, random logouts, 429 errors caused by your own frontend, growing server memory and more. Each answer: find it, fix it, stop it coming back.25 min
  11. Lesson 10Production Incidents: Step-by-Step GuideDetect, reduce the harm, find the cause, tell people, fix, learn. Roll back first, roles and severity, and eleven incident cases from latency that doubled overnight to a vulnerability found in production.20 min
  12. Lesson 11Backend and API Scenario BankSixteen server-side cases in find, fix, prevent form: duplicate webhooks, full connection pools, cron jobs that run twice, breaking API changes, stale caches, locking migrations and more.22 min
  13. Lesson 12Frontend and React Scenario BankSixteen frontend cases: old data after a save, live dashboards that freeze, SEO on a client-rendered app, token expiry, flaky E2E tests, micro-frontends, design systems and step-by-step migrations.22 min
  14. Lesson 13Security and Auth Scenario BankFourteen “you found a flaw” cases: stored XSS, IDOR, password-reset abuse, open redirects, SSRF, credential stuffing, a leaked key and a hacked third-party script.20 min
  15. Lesson 14Architecture, Data and Team Judgement ScenariosMonolith or microservices, rewrite or refactor, migrations with no downtime, safe backfills, multi-tenancy, tech debt, unrealistic deadlines, code-review disagreements and build vs buy.22 min

Glossary

46 terms used in this series. Inside any lesson, hover or tap a dotted term to see its meaning without leaving the page. Browse all terms →