I have successfully set up Prometheus monitoring for my Spring Boot backend application. It tracks various metrics like response times, error rates, and custom business counters which has been really helpful for observability.
Now I want to extend this monitoring approach to my Angular frontend but I’m not sure where to start. I need to track things like page load times, user interactions, API call failures, and maybe some custom events from the client side.
Has anyone implemented Prometheus metrics collection in an Angular TypeScript application before? What’s the best approach to send metrics from the browser to Prometheus? Should I use a separate metrics endpoint or push gateway?
Any examples or guidance would be appreciated since most documentation focuses on server-side monitoring.
we used the prometheus-client js library right in our angular app - works great. just import it and set up custom metrics for whatever you’re tracking. since browsers can’t expose scrape endpoints, we push data to a gateway instead. pretty straightforward: create your metrics, update them as the app runs, then push to the gateway on a schedule or when certain events happen.
Great ideas! Quick questions though - what’s your approach to user privacy when collecting client-side metrics? Do you anonymize everything before sending it out? And how does this impact performance on older/slower devices? I’m wondering if users notice any lag or sluggishness when all this data collection is running.
I implemented Prometheus metrics tracking for our Angular application last year, and I recommend using a Node.js proxy server for this purpose. Instead of sending metrics directly from the browser to Prometheus, I created a middle-tier service to handle metrics collection. The Angular app sends metrics as HTTP POST requests to this service, which then formats and exposes them at a /metrics endpoint. This setup helps address CORS issues and simplifies the data flow. I’ve been tracking metrics like page load time, API error rates, and user interactions effectively this way, ensuring that Prometheus can scrape the data seamlessly.