Gathering of client side metrics
24
Сбор и обработка клиентских метрик
-
Upload
gleb-vinnikov -
Category
Internet
-
view
87 -
download
0
Transcript of Gathering of client side metrics
Сбор и обработка клиентских метрик
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
![[MS-SQMCS]: Software Quality Metrics (SQM) Client-to ...](https://static.fdocuments.us/doc/165x107/629dd58b9fa53735da5c741d/ms-sqmcs-software-quality-metrics-sqm-client-to-.jpg)
