Gathering of client side metrics
0 likes170 views
This document discusses collecting and processing client metrics. It describes common metrics like DomainLookup and TTFB. It recommends the PerformanceTiming API and libraries like timing.js to collect metrics. Custom metrics can be collected using performance.mark and performance.measure. StatsD and Graphite are recommended for sending metrics to servers. StatsD uses simple strings to represent metrics like "metric:value|type". Graphite stores numeric time-series data and Grafana can render graphs from it.
Gathering of client side metrics
- 1. Сбор и обработка клиентских метрик
- 2. I am ● Many years in IT :) ● FullStack Developer ● JavaScript, NodeJS, AngularJS, etc … ● Independent contractor/IT Expert/CTO ● Pet projects: IoT, Arduino, Hardware, etc …
- 3. Why?
- 4. What? ● DomainLookup ● TTFB ● DOMContentLoaded ● Load ● …. ● Custom metrics
- 6. Dev tools
- 7. Your Client Matters ● Browser ● Locations ● CDN ● Server loading ● etc
- 8. PerformanceTiming ● performance.timing.xxx (read-only) ● DOMHighResTimeStamp type - microseconds ● https://developer.mozilla.org/en- US/docs/Web/API/PerformanceTiming
- 10. timing.js ● helpers ● Normalizes firstPaint, etc .. ● https://github.com/addyosmani/timing.js/
- 11. Custom metrics ● performance.mark(markName) ● performance.measure(name, startMark, endMark); ● getEntries(); getEntriesByName(); getEntriesByType(); <body> <script>performance.mark(‘startNavigation’);</script> <div class=”navigationBlock”> … </div> <script>performance.mark(‘endNavigation’); performance.measure(‘navigationTime’, ‘startNavigation’, ‘endNavigation’);</script> </body>
- 12. Sending ... ● to server ● ajax, web sockets, … ● is there a standard?
- 13. etsy/statsd ● node.js ● http/udp ● Third-party backends
- 14. etsy/statsd ● node.js ● http/udp ● Third-party backends ● <metricname>:<value>|<type>
- 15. etsy/statsd ● node.js ● http/udp ● Third-party backends ● <metricname>:<value>|<type> ● Counting - gorets:1|c
- 16. etsy/statsd ● node.js ● http/udp ● Third-party backends ● <metricname>:<value>|<type> ● Counting - gorets:1|c ● Sampling - gorets:1|c|@0.1
- 17. etsy/statsd ● node.js ● http/udp ● Third-party backends ● <metricname>:<value>|<type> ● Counting - gorets:1|c ● Sampling - gorets:1|c|@0.1 ● Timing - glork:320|ms|@0.1
- 18. etsy/statsd ● node.js ● http/udp ● Third-party backends ● <metricname>:<value>|<type> ● Counting - gorets:1|c ● Sampling - gorets:1|c|@0.1 ● Timing - glork:320|ms|@0.1 ● Gauges - gaugor:333|g gaugor:-10|g
- 19. etsy/statsd ● node.js ● http/udp ● Third-party backends ● <metricname>:<value>|<type> ● Counting - gorets:1|c ● Sampling - gorets:1|c|@0.1 ● Timing - glork:320|ms|@0.1 ● Gauges - gaugor:333|g gaugor:-10|g ● https://github.com/etsy/statsd
- 20. Graphite ● https://graphite.readthedocs.io/en/latest/ ● Store numeric time-series data ● Render graphs of this data on demand
- 21. Graphite
- 22. Grafana ● Beautiful metric & analytic dashboards ● http://grafana.org/
- 23. Finally
- 24. Questions? ● e-mail: gleb.vinnikov@gmail.com ● blog: http://vinnikov.net ● https://www.facebook.com/gleb.vinnikov