Stop 20 · Interview PreparationTechnical · 7/8

Debugging full-stack issues

Part of the Full Stack Developer Roadmap

In short

"Users say checkout is broken. Where do you start?" Full stack bugs can hide in the browser, the network, the API or the database. Interviewers want a calm, step-by-step search.

Being able to describe how you'd track down a bug that could originate anywhere across frontend, API, or database — a skill unique to full-stack roles.

The purple blob with a wrench and torch follows a leaking pipe from a dripping tap towards a water tank.

Think of it like this

Finding the leak in the pipe

No water at the tap? A good plumber doesn't rip up the floor. They check the tap, then the pipe joints, then the tank, then the main valve, each step ruling out half the problem. Debugging is the same walk, upstream.

Watch it happen

"Checkout is broken": walking the stack

Reproduce

Browser

Network

Server logs

Database

Fix & guard

1/6Get exact steps, user, time and device. Reproduce it yourself on staging before guessing.

The big ideas

What you need to know

Reproduce first

A bug you can trigger on demand is half fixed. Guessing without reproducing wastes hours.

Split the stack in half

Is the request leaving the browser? Is the server replying? Each check rules out half the places to look.

Request ids connect layers

One id in the response header and every log line lets you follow a single request end to end.

Fix the class of bug

After the fix, add a test or a constraint so the same kind of bug can't come back quietly.

See it in code

Walk through the code

1import { randomUUID } from "node:crypto";2 3// Give every request an id, log it, and send it back to the browser4app.use((req, res, next) => {5  const id = req.get("x-request-id") ?? randomUUID();6  res.set("x-request-id", id);7  const start = Date.now();8  res.on("finish", () => {9    console.log(JSON.stringify({10      id, method: req.method, path: req.originalUrl,11      status: res.statusCode, ms: Date.now() - start, userId: req.user?.id,12    }));13  });14  next();15});16// "Checkout failed"? Copy x-request-id from DevTools and search the logs for it.

1/3Reuse an id from a proxy if one exists, otherwise create one, and return it in the response headers.

A tiny Express middleware that makes full stack debugging far easier: every response carries an id you can find in the server logs.

Save yourself the pain

Common mistakes

Oops

Changing code at random until the error goes away.

Do this instead

Form one hypothesis, test it, and narrow down layer by layer. Say this process out loud in the interview.

Oops

Stopping once the symptom is gone.

Do this instead

Find the root cause, add a test that would have caught it, and mention monitoring.

Your mission

Plant a bug, then find it

~40 min

Quick check

The Network tab shows the checkout request was never sent. Where should you look first?

Go deeper

1Prepare a real story of a bug where it wasn't initially clear which layer was at fault.
2Practice a structured approach: check the network request/response first, then narrow down.
3Learn to use browser DevTools and backend logs together to triangulate an issue.

More technical at this stop