Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Client Side Monitoring With Prometheus

8,161 views

Published on

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.

Published in: Technology
  • Be the first to comment

Client Side Monitoring With Prometheus

  1. 1. Client-side Prometheus Metrics @tom_wilkie, CNCFCon Berlin April 2017
  2. 2. The Problem
  3. 3. A rich-client web app Weave Cloud ~28k LOC
  4. 4. What we had:
  5. 5. What we wanted:
  6. 6. Prometheus Aggregating Push Gateway JS Prometheus client library Rich Client Web App https://github.com/weaveworks/ prom-aggregation-gateway https://github.com/weaveworks/promjs
  7. 7. weaveworks/promjs
  8. 8. 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
  9. 9. Case 1: Cannot load JS assets ^^ special handling code directly in the index.html ^^
  10. 10. Case 1: Cannot load JS assets (continued) timer cancelled after ~5s
  11. 11. Case 2: Error rendering page a higher order react class is then used to wrap the views
  12. 12. Case 3: High client <-> sever latency
  13. 13. Case 3: High client <-> sever latency (II)
  14. 14. • “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
  15. 15. weaveworks/prom- aggregation-gateway
  16. 16. 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/
  17. 17. Prometheus Aggregating Push Gateway Aggregated in memory /metrics weaveworks/prom-aggregation-gateway ~300 LOC +
  18. 18. 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
  19. 19. Demo
  20. 20. Thank you! Questions?
  21. 21. We’re hiring! London BerlinSan Francisco jobs@weave.works

×