Finding all instances of API endpoint usage in a frontend application

Hey everyone,

I’m having trouble tracking down every location where my API endpoints are used in my frontend app. Although I’m working primarily with Angular, the issue could occur in any framework.

I frequently update my API endpoints and their parameters, and while I try to update all related code references, I often miss some less obvious spots. The endpoint is not always a direct text string—it can be pieced together from various variables, making a simple search ineffective.

Any tips on reliably locating all endpoint usages would be greatly appreciated!

ooh, interesting problem! have u thought about using a dependecy injection pattern? it could help centralize ur API calls. what about creating a custom eslint rule to catch endpoint usages? that might be fun to try! how often do u find urself updating endpoints? maybe there’s a way to make them more stable?

One effective approach is to implement a custom HTTP interceptor in your Angular application. This centralized mechanism can log all outgoing HTTP requests, allowing you to monitor and track API endpoint usage across your entire application. Additionally, consider adopting a strict typing system for your API responses and requests. This not only improves code quality but also makes it easier to identify places where endpoints are used when you need to make changes. Lastly, maintaining comprehensive unit and integration tests can serve as a safety net, catching any missed updates to API calls during your refactoring process.

have u tried using a code analysis tool? smthing like SonarQube can help find API calls across ur codebase. also, consider centralizing API calls in a service layer. that way, u only need to update endpoints in 1 place. it’s a bit of work upfront but saves time in the long run.