Расскажу, как сделана статистика и аналитика скорости работы (UX) приложений badoo (web, mobile-web, ios, android, windows). Общие концепции и примеры, что и как измерять. Как собирать данные со 100% пользователей проекта и выдержать нагрузку. Как из open-source решений собрать систему сбора и визуализации статистики для своего проекта.

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>
https://github.com/dpp-­name/jinba
Вопросы?