Prometheus is predominantly used for monitoring backend services. In this talk I present a technique for monitoring client-side rich client web apps with Prometheus. Presented at KubeCon Berlin 2017.

1. Client-side Prometheus Metrics
@tom_wilkie, CNCFCon Berlin April 2017

3. The Problem

4. A rich-client web app
Weave Cloud
~28k LOC

5. What we had:

6. What we wanted:

8. Prometheus Aggregating
Push Gateway
JS Prometheus client library
Rich Client Web App
https://github.com/weaveworks/
prom-aggregation-gateway
https://github.com/weaveworks/promjs

9. weaveworks/promjs

10. Failure modes
1. Failed to load JS quickly enough, or
was invalid
2. JS hits a bug when rendering a view
3. High client <-> sever latency

11. Case 1: Cannot load JS assets
^^ special handling code directly in the index.html ^^

12. Case 1: Cannot load JS assets (continued)
timer cancelled after ~5s

13. Case 2: Error rendering page
a higher order react class is then used to wrap the views

14. Case 3: High client <-> sever latency

15. Case 3: High client <-> sever latency (II)

16. • “Counters” are actually more like gauges, with
partial aggregation on the client (I’ll explain later)
• Client pushes to server every 15s
• Opensource: https://github.com/weaveworks/promjs
• All credit to Jordan Pellizzari @ Weaveworks

17. weaveworks/prom-
aggregation-gateway

18. The Pushgateway never forgets series pushed to it
and will expose them to Prometheus forever…
The latter point is especially relevant when multiple
instances of a job differentiate their metrics in the
Pushgateway via an instance label or similar.
https://prometheus.io/docs/practices/pushing/

19. Prometheus
Aggregating Push Gateway
Aggregated in memory
/metrics
weaveworks/prom-aggregation-gateway
~300 LOC
+

20. Bunch of similar projects
• Webdriver Exporter by Matt Bostock from Cloudflare
• Looks awesome, but we didn’t see this when we started our project…
• https://github.com/mattbostock/webdriver_exporter
• Prometheus User Metrics by Riley Eynon-Lynch from Peardesk
• New project, similar aims
• https://github.com/peardeck/prometheus-user-metrics
• Torch by Outbrain
• https://github.com/outbrain/torch
• Prometheus at JustWatch by Dominik Schulz from JustWatch
• Describes the same problem, couldn’t find any code through
• https://speakerdeck.com/dominikschulz/prometheus-at-justwatch

22. Demo

23. Thank you!
Questions?

24. We’re hiring!
London BerlinSan Francisco
jobs@weave.works