Сбор и обработка клиентских метрик
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Сбор и обработка клиентских метрик
I am● Many years in IT :)
● FullStack Developer
● JavaScript, NodeJS, AngularJS, etc …● Independent contractor/IT Expert/CTO
● Pet projects: IoT, Arduino, Hardware, etc …
Why?
What?● DomainLookup
● TTFB
● DOMContentLoaded
● Load
● ….
● Custom metrics
Dev tools
Your Client Matters ● Browser
● Locations
● CDN
● Server loading
● etc
PerformanceTiming● performance.timing.xxx (read-only)
● DOMHighResTimeStamp type - microseconds
● https://developer.mozilla.org/en-
US/docs/Web/API/PerformanceTiming
PerformanceTiming
timing.js● helpers
● Normalizes firstPaint, etc ..
● https://github.com/addyosmani/timing.js/
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>
Sending ...● to server
● ajax, web sockets, …● is there a standard?
etsy/statsd● node.js
● http/udp
● Third-party backends
etsy/statsd● node.js
● http/udp
● Third-party backends
● <metricname>:<value>|<type>
etsy/statsd● node.js
● http/udp
● Third-party backends
● <metricname>:<value>|<type>
● Counting - gorets:1|c
etsy/statsd● node.js
● http/udp
● Third-party backends
● <metricname>:<value>|<type>
● Counting - gorets:1|c
● Sampling - gorets:1|c|@0.1
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
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
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
Graphite
● https://graphite.readthedocs.io/en/latest/
● Store numeric time-series data
● Render graphs of this data on demand
Graphite
Grafana
● Beautiful metric & analytic dashboards
● http://grafana.org/
Finally
Questions?● e-mail: [email protected]
● blog: http://vinnikov.net
● https://www.facebook.com/gleb.vinnikov
Related Documents
