Frontend-Backend Integration Debug Skill

Degree of freedom: MIXED. Which side is wrong [HIGH freedom]; trace-both-sides probes [LOW freedom — run exactly].

Systematic approach to debugging frontend-backend integration issues by analyzing backend logs, production errors, and source code to identify root causes and fix both sides.

How to reason

1. Observe — status, payload, validation error, both logs
2. Interpret — FE omitted a field vs BE schema drifted vs auth/CORS
3. Classify — missing-param / type / 404 / 401 / 500 / CORS
4. Severity — 500 on a write path outranks a cosmetic 422 message

Worked example