this is an example of how one would monitor such use case:

using this file I'm setting up my front application and the nginx prometheus exporter to expose the Prometheus metrics in the appropriate format: docker-compose.yml

version: "3.9"
services:
  web:
    build: .
    ports:
      - "3000:3000"
  nginx-exporter:
    image: "nginx/nginx-prometheus-exporter:latest"
    command: ["-nginx.scrape-uri=http://web:3000/metrics"]
    ports:
      - "9113:9113"

add this section to your nginx.conf file

location /metrics {
    stub_status on;
}

as part of the whole file:

pid /tmp/nginx.pid;

#Provides the configuration file context in which the directives that affect connection processing are specified.
events {
    # Sets the maximum number of simultaneous connections that can be opened by a worker process.
    worker_connections 8000;
    # Tells the worker to accept multiple connections at a time
    multi_accept on;
}

http {
    # what times to include
    include       /etc/nginx/mime.types;
    # what is the default one
    default_type  application/octet-stream;

    # Sets the path, format, and configuration for a buffered log write
    log_format compression '$remote_addr - $remote_user [$time_local] '
        '"$request" $status $upstream_addr '
        '"$http_referer" "$http_user_agent"';

    server {
        # listen on port 3000
        listen 3000;
        # save logs here
        access_log /var/log/nginx/access.log compression;

        # where the root here
        root /usr/share/nginx/html;
        # what file to server as index
        index index.html index.htm;

        location / {
            # First attempt to serve request as file, then
            # as directory, then fall back to redirecting to index.html
            try_files uri/ /index.html;
        }
        
        location /metrics {
            stub_status on;
        }

        # Media: images, icons, video, audio, HTC
        location ~* \.(?:jpg|jpeg|gif|png|ico|cur|gz|svg|svgz|mp4|ogg|ogv|webm|htc)$ {
          expires 1M;
          access_log off;
          add_header Cache-Control "public";
        }

        # Javascript and CSS files
        location ~* \.(?:css|js)$ {
            try_files $uri =404;
            expires 1y;
            access_log off;
            add_header Cache-Control "public";
        }

        # Any route containing a file extension (e.g. /devicesfile.js)
        location ~ ^.+\..+$ {
            try_files $uri =404;
        }
    }
}

then in your prometheus configuration file add this new job:

  - job_name: 'nginx'
    static_configs:
    - targets: ['<machine_ip>:9113']

And here you can find an example dashboard

Answer from Noam Yizraeli on Stack Overflow
🌐
GitHub
github.com › deibl › Prometheus-Angular
GitHub - deibl/Prometheus-Angular · GitHub
To build the application, and start it (together with Prometheus, Grafana and some other helpfull services) ... When having done changes run docker-compose build or add --build as parameter ...
Starred by 7 users
Forked by 5 users
Languages: TypeScript 55.2% | HTML 21.7% | Java 18.8% | JavaScript 2.8% | Dockerfile 1.3% | CSS 0.2%
Top answer
1 of 2
1

this is an example of how one would monitor such use case:

using this file I'm setting up my front application and the nginx prometheus exporter to expose the Prometheus metrics in the appropriate format: docker-compose.yml

version: "3.9"
services:
  web:
    build: .
    ports:
      - "3000:3000"
  nginx-exporter:
    image: "nginx/nginx-prometheus-exporter:latest"
    command: ["-nginx.scrape-uri=http://web:3000/metrics"]
    ports:
      - "9113:9113"

add this section to your nginx.conf file

location /metrics {
    stub_status on;
}

as part of the whole file:

pid /tmp/nginx.pid;

#Provides the configuration file context in which the directives that affect connection processing are specified.
events {
    # Sets the maximum number of simultaneous connections that can be opened by a worker process.
    worker_connections 8000;
    # Tells the worker to accept multiple connections at a time
    multi_accept on;
}

http {
    # what times to include
    include       /etc/nginx/mime.types;
    # what is the default one
    default_type  application/octet-stream;

    # Sets the path, format, and configuration for a buffered log write
    log_format compression '$remote_addr - $remote_user [$time_local] '
        '"$request" $status $upstream_addr '
        '"$http_referer" "$http_user_agent"';

    server {
        # listen on port 3000
        listen 3000;
        # save logs here
        access_log /var/log/nginx/access.log compression;

        # where the root here
        root /usr/share/nginx/html;
        # what file to server as index
        index index.html index.htm;

        location / {
            # First attempt to serve request as file, then
            # as directory, then fall back to redirecting to index.html
            try_files uri/ /index.html;
        }
        
        location /metrics {
            stub_status on;
        }

        # Media: images, icons, video, audio, HTC
        location ~* \.(?:jpg|jpeg|gif|png|ico|cur|gz|svg|svgz|mp4|ogg|ogv|webm|htc)$ {
          expires 1M;
          access_log off;
          add_header Cache-Control "public";
        }

        # Javascript and CSS files
        location ~* \.(?:css|js)$ {
            try_files $uri =404;
            expires 1y;
            access_log off;
            add_header Cache-Control "public";
        }

        # Any route containing a file extension (e.g. /devicesfile.js)
        location ~ ^.+\..+$ {
            try_files $uri =404;
        }
    }
}

then in your prometheus configuration file add this new job:

  - job_name: 'nginx'
    static_configs:
    - targets: ['<machine_ip>:9113']

And here you can find an example dashboard

2 of 2
0

To monitor/count events on the frontend you can run a "frontend-metrics-server" where your frontend can submit the events to be counted with Prometheus.

This is a simple implementation which also allows tracking errors from the frontend:

@RestController
@Slf4j
public class CounterController {
    private static final Map<String, Gauge> EVENT_COUNTERS = new ConcurrentHashMap<>();

    private static final Counter ERROR_COUNTER = Counter.build()
            .name("error_counter")
            .help("Number of errors received")
            .register();

    @PostMapping("/updateCounter")
    public void updateCounter(@RequestBody CounterUpdateRequest request) {
        Gauge gauge = EVENT_COUNTERS.computeIfAbsent(request.name(), name ->
                Gauge.build()
                        .name("event_counter_" + name)
                        .help("Number of " + name + " events received")
                        .register()
        );
        gauge.inc(request.amount());
        log.info("Metric {} increased by {} through user {}", request.name(), request.amount(), addTheUserIdHere);
    }

    @PostMapping("/reportError")
    public void reportError(@RequestBody ErrorReportRequest request) {
        ERROR_COUNTER.inc();
        log.error("User {}: {}", addTheUserIdHere, request.message());
    }

    public record CounterUpdateRequest(String name, int amount) {}

    public record ErrorReportRequest(String message) {}
}

Of course, you can add additional parameters or types of metrics.

Keep in mind, that the API could be called by your users with other data which can "soil" your metrics and logs.

Discussions

How to implement Prometheus metrics tracking for Angular applications - Frontend - IT Dev Example
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 ... More on community.webshinetech.com
🌐 community.webshinetech.com
0
June 11, 2025
Angular
I am using this library in Angular application. I can see the metrics in the browser by logging in each component. I am not sure how/what to implement in Angular so that Prometheus can pick these m... More on github.com
🌐 github.com
1
March 12, 2020
Angular
Hi, Is it possible to use this from Angular application? If yes, do you have any sample code? More on github.com
🌐 github.com
5
March 12, 2020
OpenTelemetry implementation angular
Try reaching out to Grafana for their support. For what it is worth, port 4138 is for sending spans via OpenTelemetry protocol HTTP. You could try to use this react example for your angular setup https://github.com/pkanal/otel-react-example/tree/main . There should be some similarity. I have not tried it though. More on reddit.com
🌐 r/OpenTelemetry
2
6
January 15, 2025
🌐
SuprSend
suprsend.com › post › monitoring-a-notification-service-with-angular-and-prometheus
Monitoring a Notification Service with Angular and Prometheus
August 30, 2024 - ... // Example of a Prometheus dashboard in Angular import { Component } from '@angular/core'; import { HttpClient } from '@angular/common/http'; @Component({ selector: 'app-prometheus-dashboard', template: `
🌐
IT Dev Example
community.webshinetech.com › frontend
How to implement Prometheus metrics tracking for Angular applications - Frontend - IT Dev Example
June 11, 2025 - 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.
🌐
GitHub
github.com › weaveworks › promjs › issues › 24
Angular · Issue #24 · weaveworks/promjs
March 12, 2020 - I am using this library in Angular application. I can see the metrics in the browser by logging in each component. I am not sure how/what to implement in Angular so that Prometheus can pick these m...
Author: weaveworks
🌐
GitHub
github.com › ngolforoushan › Prometheus-Angular
GitHub - ngolforoushan/Prometheus-Angular · GitHub
To build the application, and start it (together with Prometheus, Grafana and some other helpfull services) ... When having done changes run docker-compose build or add --build as parameter ...
Author: ngolforoushan
🌐
Pixel Free Studio
blog.pixelfreestudio.com › home › how to use prometheus for monitoring frontend applications
How to Use Prometheus for Monitoring Frontend Applications
August 16, 2024 - For many frontend applications, this involves adding monitoring libraries or using existing integrations. If you’re using a framework like React or Angular, there are libraries available that help expose performance metrics. For instance, Prometheus client libraries can be used to instrument your frontend application, allowing you to expose metrics in a format that Prometheus can scrape. Here’s a simplified example of how you might expose a custom metric using JavaScript:
🌐
Prometheus
prometheus.io › docs › instrumenting › clientlibs
Client libraries | Prometheus
Join PromCon EU 2026 , the Prometheus users conference, on October 7–8, 2026 in Munich. PromCon EU 2026 — Oct 7–8, Munich. ... Before you can monitor your services, you need to add instrumentation to their code via one of the Prometheus client libraries.
Find elsewhere
🌐
Codidact
software.codidact.com › posts › 284183
How can I export metrics from Angular frontend to be read with Prometheus ? - Software Development
How can I monitor an Angular frontend with Prometheus? I was able to create metrics for my Node.js API using the express-prometheus module. But I can't...
🌐
Medium
nedmcclain.medium.com › frontend-monitoring-with-prometheus-38f798406125
Frontend Monitoring with Prometheus | by Ned McClain | Medium
December 19, 2019 - Gain deeper insight into your production application's health — an additional return on an already-booked investment. Sadly, all too often testing is considered the domain of software engineers. After all, operations engineers are supposed to focus on observability, not testing… right? Wrong! In this post, our goal is to leverage frontend browser testing for production observability and monitoring. We’ll use nightwatchjs_exporter to capture the results of Nightwatch.js tests with the Prometheus monitoring tool.
🌐
DEV Community
dev.to › ziggornif › monitoring-a-nodejs-typescript-application-with-prometheus-and-grafana-43j2
Monitoring a Node.JS Typescript application with Prometheus and Grafana - DEV Community
October 16, 2022 - ... And create a registry container. const register = new promClient.Registry(); register.setDefaultLabels({ app: 'monitoring-article', }); Add the /metrics endpoint (i use ExpressJS in this example).
🌐
GitHub
github.com › prometheus-community › monaco-promql › blob › master › docs › angular_integration.md
monaco-promql/docs/angular_integration.md at master · prometheus-community/monaco-promql
Add the these dependencies to your ... so far it works, modify as you wish and propose enhancements ! Copy the homemade monaco module from the angular example....
Author: prometheus-community
🌐
RisingStack
blog.risingstack.com › home › hírek, események › node.js performance monitoring with prometheus
Node.js Performance Monitoring with Prometheus - RisingStack Engineering
October 15, 2025 - Prometheus uses the HTTP pull model, which means that every application needs to expose a GET /metrics endpoint that can be periodically fetched by the Prometheus instance. ... Summary: similar to a histogram, samples observations, it calculates configurable quantiles over a sliding time window · In the following snippet, you can see an example response for the /metrics endpoint.
🌐
GitHub
github.com › RisingStack › example-prometheus-nodejs
GitHub - RisingStack/example-prometheus-nodejs: Prometheus monitoring example with Node.js · GitHub
Modify: /prometheus-data/prometheus.yml, replace 192.168.0.10 with your own host machine's IP. Host machine IP address: ifconfig | grep 'inet 192'| awk '{ print $2}'
Starred by 331 users
Forked by 125 users
Languages: JavaScript
🌐
GitHub
github.com › prometheus › client_js › issues › 350
Angular · Issue #350 · prometheus/client_js
March 12, 2020 - Hi, Is it possible to use this from Angular application? If yes, do you have any sample code?
Author: prometheus
🌐
Reddit
reddit.com › r/opentelemetry › opentelemetry implementation angular
r/OpenTelemetry on Reddit: OpenTelemetry implementation angular
January 15, 2025 -

Hi everyone. Im trying to implement open telemetry with grafana(loki, prometheus, temp etc..) in my angular app. But the problem is i dont really understand how to set things up. Articles ive been through:

https://grafana.com/blog/2024/03/13/an-opentelemetry-backend-in-a-docker-image-introducing-grafana/otel-lgtm/

https://timdeschryver.dev/blog/adding-opentelemetry-to-an-angular-application#setup

Dont really understand what url should i be using for OTLPTraceExporter. I managed to start in docker my app and container and when i go on my app localhost:4200 i throws me error in console and in localhost:3000 grafana dashboard in explore tab it doesnt show any traces, logs etc..

Access to resource at 'http://localhost:3000/' from origin 'http://localhost:4200' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

I tried urls: http://localhost:3000/ , http://localhost:4318 , http://localhost:4318/v1/traces

Does anyone have a step by step tutorial that can explain on how to set open telemetry in angular app using grafana(loki, prometheus, tempo)?

Thanks in advance!

🌐
npm
npmjs.com › package › prometheus-api-metrics
prometheus-api-metrics - npm
const apiMetrics = require('prometheus-api-metrics'); app.use(apiMetrics({ additionalLabels: ['customer', 'cluster'], extractAdditionalLabelValuesFn: (req, res) => { const { headers } = req.headers; return { customer: headers['x-custom-header-customer'], cluster: headers['x-custom-header-cluster'] } } }))
      » npm install prometheus-api-metrics
    
Published: Mar 09, 2025
Version: 4.0.0
🌐
Prometheus
prometheus.io › docs › prometheus › latest › getting_started
Getting started | Prometheus
This guide is a "Hello World"-style tutorial which shows how to install, configure, and use a simple Prometheus instance. You will download and run Prometheus locally, configure it to scrape itself and an example application, then work with queries, rules, and graphs to use collected time series data.
🌐
Coder Society
codersociety.com › blog › articles › nodejs-application-monitoring-with-prometheus-and-grafana
Node.js Application Monitoring with Prometheus and Grafana, — Coder Society
It provides the building blocks to export metrics to Prometheus via the pull and push methods and supports all Prometheus metric types such as histogram, summaries, gauges and counters. Create a new directory and setup the Node.js project: $ mkdir example-nodejs-app $ cd example-nodejs-app $ npm init -y
🌐
GitHub
github.com › prometheus-operator › kube-prometheus › issues › 2418
example dashboards use angular which is depreciated in grafana · Issue #2418 · prometheus-operator/kube-prometheus
When importing the example dashboards from manifests/grafana-dashboardDefinitions.yaml into grafana 10.4 it reports angular integration is deprecated. Did you expect to see some different? No deprecated pannels · How to reproduce it (as minimally and precisely as possible): Install grafana 10.4, import dashboards, view dashboards in web interface · Environment · Prometheus Operator version: Insert image tag or Git SHA here ·
Author: prometheus-operator