Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Реалтайм  статистика  скорости  работы  
нативных  и  веб-­приложений  у  
реальных  пользователей
Pavel  Dovbush
@
RUM
Real  User  Monitoring
Реальный  UX
● DOMContentLoaded,  onLoad
● W3C Navigation  Timing
● W3C    Resource    Timing
● W3C User            Timing
● Нативные  ...
W3C  Navigation  Timing
W3C  Resource  Timing
Load  time  -­ 32s
UX  vs.  onLoad
source
Что  такое  UX?
VS.
● performance.mark(name)
● performance.measure(name,  mark1,  mark2)
W3C  User  Timing
WebSite  hit
WebApp  hit
Android  hit
Как  собрать  данные?
Специализированные
Всё-­в-­одном
Собираем  сами
WEB  
cluster
Хранилищ
е
Графики
Приложение
github.com/dpp-­name/jinba
tiny.cc/jinba
Jinba
● Микро-­библиотека
○ JavaScript
○ Android
○ iOS
○ Windows  phone
● Набор  соглашений
● Инфраструктура
○ Сбор
○ Визуализац...
npm  install  jinba-­js-­client
var  Jinba  =  require('jinba-­js-­client');;
var  r  =  new  Jinba.Request(location.pathn...
[  {  name:  '/',
value:  321,
tags:  {  app_label:  'example',  errorStatus:  0  },
measurements:
[  {  name:  'init',  v...
● Отфильтровать  мусор
● Защита  от  паразитного  трафика
● Записать  в  хранилище
● Как  можно  быстрее!
Прием  данных
● Быстрая  вставка
● Разные  “срезы”
● Возможность  считать  персентили
● Хранить  данные  годами
Требования  к  хранилищу
● MySQL
● Syslog
● Hadoop
● InfluxDB
● StatsD
Хранилище
● MySQL  engine
● Данные  в  памяти  (за  N  минут)
● UDP  вставка
● Отчеты  по  тэгам
● Реалтайм!
pinba.org
● tagN_info  -­ отчеты  по  многим  тэгам
● Персентили
● Гистограммы
● Фильтрация  по  тегам  реквеста
Pinba  для  Jinba
Pinba
1.4M
25K
RPS
TPS
CREATE  TABLE  v2_jinba_country  (
...
)  ENGINE=PINBA  
COMMENT='tagN_info:timer,mode,country::75,95';;
pinbaSchema.creat...
mysql>  desc  v2_jinba_country;
+-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐+-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐+
| ...
mysql>  select  timer,  mode,  hit_per_sec,
timer_value/hit_count  as  timer_avg,  timer_median,  p75,  p95
from  v2_jinba...
Гистограмма
%  of  hits
time
● Pinba  -­ последние  5-­10-­15  минут
● История  -­ RRD  в  перспективе  InfluxDB
Хранение  истории
pinba2influxdb
createDB(influxClient,  dbName)
selectData(mysqlClient,  dbName,  tags)
insertData(influxClient,  dbName,  ...
Как  рисовать?
grafanaUtils
createReportDashboard(url,   grafanaKey,  schema,  name)
"domain_country":  {
"rows_by":  "timer",
"tags":  [...
Как  рисовать?
Что  получилось
➔ JinbaClient
➔ JinbaServer
➔ Pinba
➔ JinbaScripts
➔ InfluxDB
➔ Grafana
● Тип  запроса
● Таймер
● Страница  /  Экран
● Страна
● Браузер  /  Устройство
Аналитика
● Тип  запроса
● Таймер
● Страница  /  Экран
● Страна
● Браузер  /  Устройство
Аналитика
9
31
40
50
10
5.5  M
WebSite
WebApp
Android
Среднее  и  персентили
Результаты  оптимизации
Последствия  редизайна
Сравнение  стран
Сравнение  браузеров
Сравнение  страниц
● Только  вы  можете  определить  `usable`
● Юзабилити  важнее  технических  метрик
● Не  смешивайте  типы  запросов
● Выд...
Павел  Довбуш
<dpp@dpp.su>
https://github.com/dpp-­name/jinba
Вопросы?
Upcoming SlideShare
Loading in …5
×

Реалтайм статистика скорости работы нативных и веб-приложений у реальных пользователей / Павел Довбуш

635 views

Published on

Расскажу, как сделана статистика и аналитика скорости работы (UX) приложений badoo (web, mobile-web, ios, android, windows).

Общие концепции и примеры, что и как измерять.

Как собирать данные со 100% пользователей проекта и выдержать нагрузку.

Как из open-source решений собрать систему сбора и визуализации статистики для своего проекта.

Published in: Engineering
  • Be the first to comment

  • Be the first to like this

Реалтайм статистика скорости работы нативных и веб-приложений у реальных пользователей / Павел Довбуш

  1. 1. Реалтайм  статистика  скорости  работы   нативных  и  веб-­приложений  у   реальных  пользователей Pavel  Dovbush @
  2. 2. RUM Real  User  Monitoring Реальный  UX
  3. 3. ● DOMContentLoaded,  onLoad ● W3C Navigation  Timing ● W3C    Resource    Timing ● W3C User            Timing ● Нативные  приложения Что
  4. 4. W3C  Navigation  Timing
  5. 5. W3C  Resource  Timing
  6. 6. Load  time  -­ 32s
  7. 7. UX  vs.  onLoad source
  8. 8. Что  такое  UX? VS.
  9. 9. ● performance.mark(name) ● performance.measure(name,  mark1,  mark2) W3C  User  Timing
  10. 10. WebSite  hit
  11. 11. WebApp  hit
  12. 12. Android  hit
  13. 13. Как  собрать  данные? Специализированные Всё-­в-­одном
  14. 14. Собираем  сами WEB   cluster Хранилищ е Графики Приложение
  15. 15. github.com/dpp-­name/jinba tiny.cc/jinba Jinba
  16. 16. ● Микро-­библиотека ○ JavaScript ○ Android ○ iOS ○ Windows  phone ● Набор  соглашений ● Инфраструктура ○ Сбор ○ Визуализация ○ Аналитика Jinba
  17. 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. 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. 19. ● Отфильтровать  мусор ● Защита  от  паразитного  трафика ● Записать  в  хранилище ● Как  можно  быстрее! Прием  данных
  20. 20. ● Быстрая  вставка ● Разные  “срезы” ● Возможность  считать  персентили ● Хранить  данные  годами Требования  к  хранилищу
  21. 21. ● MySQL ● Syslog ● Hadoop ● InfluxDB ● StatsD Хранилище
  22. 22. ● MySQL  engine ● Данные  в  памяти  (за  N  минут) ● UDP  вставка ● Отчеты  по  тэгам ● Реалтайм! pinba.org
  23. 23. ● tagN_info  -­ отчеты  по  многим  тэгам ● Персентили ● Гистограммы ● Фильтрация  по  тегам  реквеста Pinba  для  Jinba
  24. 24. Pinba 1.4M 25K RPS TPS
  25. 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. 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. 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. 28. Гистограмма %  of  hits time
  29. 29. ● Pinba  -­ последние  5-­10-­15  минут ● История  -­ RRD  в  перспективе  InfluxDB Хранение  истории
  30. 30. pinba2influxdb createDB(influxClient,  dbName) selectData(mysqlClient,  dbName,  tags) insertData(influxClient,  dbName,  result) InfluxDB
  31. 31. Как  рисовать?
  32. 32. grafanaUtils createReportDashboard(url,   grafanaKey,  schema,  name) "domain_country":  { "rows_by":  "timer", "tags":  [ "mode", "timer", "domain", "country" ]  } Grafana
  33. 33. Как  рисовать?
  34. 34. Что  получилось ➔ JinbaClient ➔ JinbaServer ➔ Pinba ➔ JinbaScripts ➔ InfluxDB ➔ Grafana
  35. 35. ● Тип  запроса ● Таймер ● Страница  /  Экран ● Страна ● Браузер  /  Устройство Аналитика
  36. 36. ● Тип  запроса ● Таймер ● Страница  /  Экран ● Страна ● Браузер  /  Устройство Аналитика 9 31 40 50 10 5.5  M
  37. 37. WebSite
  38. 38. WebApp
  39. 39. Android
  40. 40. Среднее  и  персентили
  41. 41. Результаты  оптимизации
  42. 42. Последствия  редизайна
  43. 43. Сравнение  стран
  44. 44. Сравнение  браузеров
  45. 45. Сравнение  страниц
  46. 46. ● Только  вы  можете  определить  `usable` ● Юзабилити  важнее  технических  метрик ● Не  смешивайте  типы  запросов ● Выделяйте  общие  группы ● Персентили,  а  не  среднее Итого
  47. 47. Павел  Довбуш <dpp@dpp.su> https://github.com/dpp-­name/jinba Вопросы?

×