Getting into request and response logging

So you build an Angular app, you click a button, and something goes wrong. The screen just sits there or you get a random error that makes no sense. My first move is always to look at the HTTP requests. Like what did we send, where did it go, and what came back. But doing that by hand in every service gets annoying fast, and yeah I forget it sometimes.

An Angular HttpInterceptor is the clean way to catch all requests in one place. It can watch every outgoing request, then also watch the response when it returns. That means you can log stuff like the URL, method, headers if you need them, timing, and the status code. And because it sits in the middle, you do not have to sprinkle console logs all over your app.

Quick wrap up

If I set up one interceptor for logging, I get a simple view of what my app is actually doing on the network. When bugs show up, I stop guessing and start checking real data.