My talk at http://frontendconf.ru/2015/abstracts/1777

1. Реалтайм статистика скорости работы
нативных и веб-приложений у
реальных пользователей
Pavel Dovbush
@

2. RUM
Real User Monitoring
Реальный UX

3. ● DOMContentLoaded, onLoad
● W3C Navigation Timing
● W3C Resource Timing
● W3C User Timing
● Нативные приложения
Что

4. W3C Navigation Timing

5. W3C Resource Timing

6. Load time - 32s

7. UX vs. onLoad
source

8. Что такое UX?
VS.

9. ● performance.mark(name)
● performance.measure(name, mark1, mark2)
W3C User Timing

10. WebSite hit

11. WebApp hit

12. Android hit

13. Как собрать данные?
Специализированные
Всё-в-одном

14. Собираем сами
WEB
cluster
Хранилищ
е
Графики
Приложение

15. github.com/dpp-name/jinba
tiny.cc/jinba
Jinba

16. ● Микро-библиотека
○ JavaScript
○ Android
○ iOS
○ Windows phone
● Набор соглашений
● Инфраструктура
○ Сбор
○ Визуализация
○ Аналитика
Jinba

17. npm install jinba-js-client
var Jinba = require('jinba-js-client');
var r = new Jinba.Request(location.pathname,
{ app_label: 'example' });
r.startMeasurement('some-id', 'init');
doInit(function callback() {
r.stopMeasurement('some-id');
});
r.end();
Пример

18. [ { name: '/',
value: 321,
tags: { app_label: 'example', errorStatus: 0 },
measurements:
[ { name: 'init', value: 275 },
….
{ name: 'foo-1', value: 0 },
{ name: 'bar-2', value: 17 },
….
Данные

19. ● Отфильтровать мусор
● Защитить от паразитного трафика
● Записать в хранилище
● Как можно быстрее!
Прием данных

20. ● Быстрая вставка
● Разные “срезы”
● Возможность считать перцентили
● Хранить данные годами
Требования к хранилищу

21. ● MySQL
● Syslog
● Hadoop
● InfluxDB
● StatsD
Хранилище

22. ● MySQL engine
● Данные в памяти (за N минут)
● UDP вставка
● Отчеты по тэгам
● Реалтайм!
pinba.org

23. ● tagN_info - отчеты по многим тэгам
● Перцентили
● Гистограммы
● Фильтрация по тегам реквеста
Pinba для Jinba

24. Pinba
1.4M
25K
RPS
TPS

25. CREATE TABLE v2_jinba_country (
...
) ENGINE=PINBA
COMMENT='tagN_info:timer,mode,country::75,95';
pinbaSchema.createReport({
mysqlClient: mysqlClient,
tablePrefix: 'v2_jinba',
name: 'country',
tags: ['timer', 'mode', 'country']
});
Создание отчета

26. mysql> desc v2_jinba_country;
+--------------+--------------+
| Field | Type |
+--------------+--------------+
| timer | varchar(64) |
| mode | varchar(64) |
| country | varchar(64) |
| req_count | int(11) |
| req_per_sec | float |
| hit_count | int(11) |
| hit_per_sec | float |
| timer_value | float |
| timer_median | float |
| index_value | varchar(256) |
| p75 | float |
| p95 | float |
+--------------+--------------+
Создание отчета

27. mysql> select timer, mode, hit_per_sec,
timer_value/hit_count as timer_avg, timer_median, p75, p95
from v2_jinba where mode='webapp-badoo' and timer='usable' G
*************************** 1. row ***************************
timer: usable
mode: webapp-badoo
hit_per_sec: 739.025
timer_avg: 0.898577200534488
timer_median: 0.589789
p75: 0.854372
p95: 2.18598
Создание отчета

28. Гистограмма
% of hits
time

29. ● Pinba - последние 5 - 10 - 15 минут
● История - RRD (в перспективе InfluxDB)
Хранение истории

30. pinba2influxdb
createDB(influxClient, dbName)
selectData(mysqlClient, dbName, tags)
insertData(influxClient, dbName, result)
InfluxDB

31. Как рисовать?

32. grafanaUtils
createReportDashboard(url, grafanaKey, schema, name)
"domain_country": {
"rows_by": "timer",
"tags": [
"mode",
"timer",
"domain",
"country"
] }
Grafana

33. Как рисовать?

34. Что получилось
➔ JinbaClient
➔ JinbaServer
➔ Pinba
➔ JinbaScripts
➔ InfluxDB
➔ Grafana

35. ● Тип запроса
● Таймер
● Страница / Экран
● Страна
● Браузер / Устройство
Аналитика

36. ● Тип запроса
● Таймер
● Страница / Экран
● Страна
● Браузер / Устройство
Аналитика
9
31
40
50
10
5.5 M

37. WebSite

38. WebApp

39. Android

40. Среднее и перцентили

41. Результаты оптимизации

42. Последствия редизайна

43. Сравнение стран

44. Сравнение браузеров

45. Сравнение страниц

46. ● Только вы можете определить `usable`
● Юзабилити важнее технических метрик
● Не смешивайте типы запросов
● Выделяйте общие группы
● Перцентили, а не среднее
Итого

47. Павел Довбуш
<dpp@dpp.su>
Jinba
github.com/dpp-name/jinba
Pinba
http://pinba.org/
Вопросы?