SlideShare une entreprise Scribd logo
1  sur  58
Monitoring Applicatif
M6Webgroupe M6
Filiale digitale du                              + de 70 Sites sur PF LAMP
Le MVNO M6Mobile avec Orange                     11,6M de Visiteurs Unique (Mars 2012 Nielsen)
Le Replay et produits dérivés des progrs télés   4 millions de lignes de codes
Un comparateur de prix                           16000 requêtes MySql par seconde
CA 2011 : 102,1M€                                Beaucoup de développeurs !
Kenny DITS ( @kenny_dee )
Responsable Etude & Dév chez M6Web
Ancien dév LAMP
Passionné de WebPerf & Monitoring
Clubic.com           Jeuxvideo.fr




             M6.fr                  Turbo.fr




Deco.fr              W9.fr
POURQUOI MONITORER ?
Parce que !
Je veux savoir lorsqu’un de nos
services Php ne fonctionne plus !
Je veux vérifier que les erreurs et les
temps de chargement n’empirent pas !
Je veux mesurer l’impact d’une pub télé
ou d’une actualité « Hot » sur l’un de
nos sites !
Je veux trouver rapidement la ou
les RootCause lors d’un incident !
Je veux tout savoir sur tous nos
sites !
Je veux retrouvez la vue sur nos projets !
Que se passe-t-il en production ?
Qu’est-ce qui s’est passé ?
Mes services fonctionnent-ils ?
Pourquoi ne fonctionnent-t-ils plus ?
Et la donner à nos développeurs !
Vérifier l’impact de leurs mises en production sur nos applis / sur
nos serveurs, sur les temps de chargement etc …
QUE DOIT-ON MONITORER ?
Tout !
"If it's not monitored, it's not in
            production"

     Theo Schlossnagle #velocityconf
"If you can not measure it, you can
          not improve it"

             Lord Kelvin
Exemples de métriques à monitorer :

 • Appels aux services applicatifs
     • Téléchargement sur Clubic / Lectures de news, topics, vidéos …
     • Calcul de cote automobile sur Turbo
     • …
 • Gestion utilisateurs :
     • (dé)connexion
     • Inscription
     • activation
 • Utilisation et temps SQL:
     • select/update/… par db
 • Conso CPU
 • Temps d’affichage des pages
 • Erreurs applicatives :
     • HTTP (301,404 …)
     • PHP (Warning, Fatal, …), Js …
 • Utilisation des caches applicatifs
     • Memcached
     • Redis
 • Crawl Google …
COMMENT MONITORER ?
Monitoring humain ?
On surveille le site H24 ?
StatsD
                                             ©Etsy & FlickR




    http://Graphite.wikidot.com       http://Github.com/etsy/statsd
https://github.com/graphite-project
Principe de fonctionnement




              [Client                 • [Serveur                                       [Graphite]
Applicatif    StatsD]                   StatsD]               [Graphite]   Outils de   Visualiser
                         Collecteur                Stockage
  PHP
             Envoi ses                • Agrège                 Stocke       graph         des
             métriques                • Et envoi                                       métriques
STATSD
Le collecteur
StatsD

Agrégateur de statistiques
1 Démon Node.js + 1 client Php (ou autre)
Node.JS :

 • Créée par Ryan Dahl (@ryah) début 2009,
     • basée sur la machine virtuelle V8 (projet Open Source de
       Google©)
     • Javascript coté serveur
     • Ultra rapide
     • Gestion des entrées/sorties de manière non bloquante
     • Très grosse communauté
     • Fun !

 • Exemple d’un serveur Web en Node.js

 var http = require('http');
 http.createServer(function (req, res) {
   res.writeHead(200, {'Content-Type': 'text/plain'});
   res.end('Hello Worldn');
 }).listen(1337, '127.0.0.1');
 console.log('Server running at http://127.0.0.1:1337/');
Représentation de nos métriques

 • errors
     • 404
          • clubic (errors.404.clubic)
          • Jvfr (errors.404.jvfr)
          • …
 • mysql.
     • select.
          • clubic
               • nomdeladatabase
                    • count (mysql.select.clubic. nomdeladatabase.count)


 • Une métrique n’est valable que par son nœud final
Applicatif


                 Métrique
   Métrique                      Métrique




                  StatsD

Le client StatsD :       Le serveur StatsD :
• Incrément/Décrement    • Reçoit
                         • Agrège pendant 2 secondes
• Timer                  • Envoie a Graphite
Le client StatsD : implémentation

 • En PHP
 StatsD::increment('errors.404.clubic'); // +1 d'une statistique
 StatsD::decrement('errors.404.clubic'); // -1 d'une statistique
 StatsD::timing('cpu.clubic.index', 1234); // Statistique en ms


 • Via Fsockopen
 if($fp = fsockopen('udp://<ip>', '<port>')) {
     fwrite($fp, 'errors.404.clubic:1|c');
     fclose($fp);
 }


 • Bash
 PORT=2003
 SERVER=graphite.<domaine>.<extension>
 echo "errors.404.clubic `date +%s`" | nc ${SERVER} ${PORT};

 • …
Le serveur StatsD :

 • Nombre de métriques reçu par StatsD et envoyé
    • graphite.numStats :


 • Les Incréments sont stockés sous l’arbo :
     • stats_count.*

 • Les Timers sont stockés sous l’arbo
     • stats.timers.*.
          • mean
          • lower
          • upper
          • upper_90
          • Max
          • count
          • sum (©M6web)
Le protocole UDP :

 • Fire & Forget :
     • Rapide
     • Pas d’attente de réponse du serveur
     • Aucun impact si le serveur est inaccessible

 • Attention toutefois … : trop d’UDP tue l’UDP … et les serveurs avec …
Notice PHP … Fuuu
Hack du client Php et serveur StatsD :

 Modification du client PHP pour envoyer moins de paquets UDP
 => Utilisation du register_shutdown_function pour envoyer les données

 Découpage en paquets (MTU à 1500 octets pour Node.js (limitation
 logicielle/hardware), 1472 octets max, 28 octets de header)

 Plusieurs démons Node.js avec un LBL sur les nodes sur un CRC32 de la
 chaîne modulo le nombre de serveurs
GRAPHITE
Présentation
Graphite :

 • Stocke des métriques dans le temps
 • Permet de grapher ces métriques à la demande

 • Graphite ne fait pas la collecte des données …
 • Graphite n’est pas un outil de statistique !

 • Graphite est composé de 3 éléments distincts écrits en Python :
    • carbon - Démon qui récupère les métriques
    • whisper - La DB qui stocke les métriques ( ressemblant à RRD)
    • graphite webapp - L’interface web (sous Django) qui graphe les
       métriques à la demande (avec la librairie Cairo)
Graphite : Le Composer
Graph Data

                          Graph Options


Les options du Composer
COMMENT UTILISER GRAPHITE ?
Quelques exemples
stats.timers.mysql.clubic.select.*.count
Affichage du nombre de select sur Clubic par DB
sum(stats.timers.mysql.clubic.select.*.count)
Nombre de select sur Clubic
limit(sortByMaxima(stats.timers.mysql.clubic.select.*.count,5))
Affichage des 5 DB faisant le plus de select sur Clubic
limit(sortByMaxima(groupByNode(stats.timers.mysql.*.select.*.count,5,'sumSeries')),5)


Affichage des 5 DB faisant le plus de select tous sites confondus
alias(sum(stats_counts.cache.memcached.read.*),"Memcache total Read ")
alias(sum(stats_counts.cache.memcached.write.*),"Memcache total Write")
dashed(drawAsInfinite(stats_counts.dev.mep.master_www))
Affichage des lectures/écritures Memcache avec mise en production
limit(sortByMaxima(groupByNode(stats.timers.mysql.*.select.*.sum,'sumSeries')),10)

Temps SQL passé par site au format « Camembert » avec le paramètre
   &graphType=pie
Les possibilités d’écriture de métrique :

 •   stats_counts.mysql.clubic.select.edito.count
 •   stats_counts.mysql.{clubic,jvfr}.select.edito.count
 •   stats_counts.mysql.*.*.edito.count
 •   stats_counts.mysql.c*c.select.edito.count
 •   stats_counts.host-[0-1].cpu
 •   …



 • Attention a la manière dont vous écrivez vos arbos :
     • Un nœud sous Graphite représente environ 6mo !!!
Les fonctions principales :

 •   sumSeries, sumSeriesWithWildcards
 •   limit
 •   sortByMaxima / sortByMinima
 •   aliasByNode / alias / substr
 •   groupByNode
 •   averageAbove / averageBelow / currentBelow …
 •   color / dashed / lineWidth / stacked
 •   drawAsInfinite
 •   keepLastValue
 •   secondYAxis
 •   summarize
 •   timeShift

 http://readthedocs.org/docs/graphite/en/latest/functions.html
L’URL API :

 • http://graphite/render/?
     • target=stats.timers.mysql.clubic.select.edito.count
     • &height=800&width=600
     • &from=-8d&until=-7d
     • &from=20091201&until=20091231
     • &from=-5min
     • &title=Graph%20Clubic%20Sql
     • &format={json|raw|csv|…}
     • …


 Exemple : http://graphite.<dom>.fr/ render ?width=300&from=-
 4hours&until=now&height=230&title=Warning&target=sum(stats_counts.
 errors.warning.*)


 http://readthedocs.org/docs/graphite/en/latest/url-api.html
GRAPHITE AU QUOTIDIEN ?
Le DashBoard
Le Dashboard
Le Dashboard …
ALERTING AVEC GRAPHITE ?
Est ce possible ?
Sortir les données brutes des métriques
<graphitehost>/render/?target=stats_counts.errors.404.clubic&format=json
DES EXEMPLES
WebPerf / Cpu / Erreurs JS …
Temps d’affichage client #webperf
 • Real User Monitoring :
    • Navigation Timing API (spéc HTML5)
    • Utilisation de l'image Object JS (new Image()) avec les paramètres
        relevés
    • Node.Js : Serveur HTTP (204 ok sans contenu) et agrège les
        données pour les envoyer à Graphite

Conso Cpu coté serveur
  • Fonction getrusage() en PHP
  • http://php.net/manual/fr/function.getrusage.php
  • + Append_file ou preprend_file et/ou register_shutdown_function()

Erreurs JS
  • Spec JS window.onerror(message, url, line)
  • Utilisation de l'image Object JS (new Image()) avec les paramètres
    relevés pour envoi à un serveur HTTP

What Else ? …
Le monitoring c’est bien, mais pour plus
de précision, il est indispensable de
logguer des infos plus précises ailleurs
Bdd, Syslog, …
Tester simplement ?

 • https://github.com/suan/graphite_up

 • Installation via VirtualBox + Vagrant de
     • Graphite (https://github.com/graphite-project)
     • StatsD (https://github.com/etsy/statsd)
     • Diamond (http://opensource.brightcove.com/project/diamond)
 • Sur une Debian Squeeze 32-bit via Chef.
Conclusion

 • Beaucoup moins d’anomalies applicatives ressenties
 • Eléments factuels lors des posts-mortems
 • MTTD / MMTR beaucoup plus court
 • Vrai liant entre Exploit et Développeur
 • Réelle implication des développeurs sur l’impact de leurs
   développement
 • D’autres services que la technique ont mis en place leurs Dashboard à
   partir de nos métriques
Retrouvez la DT d’M6Web sur
http://tech.m6web.fr

Et moi sur Twitter : @kenny_dee
Monitoring applicatif : Pourquoi et comment ?

Contenu connexe

En vedette

Campus M21 | Medienpraxis II: Online - Vorlesung I vom 31.01.2013
Campus M21 | Medienpraxis II: Online - Vorlesung I vom 31.01.2013Campus M21 | Medienpraxis II: Online - Vorlesung I vom 31.01.2013
Campus M21 | Medienpraxis II: Online - Vorlesung I vom 31.01.2013Daniel Rehn
 
Campus M21 | Medienpraxis II: Online - Vorlesung III vom 11.02.2013
Campus M21 | Medienpraxis II: Online - Vorlesung III vom 11.02.2013Campus M21 | Medienpraxis II: Online - Vorlesung III vom 11.02.2013
Campus M21 | Medienpraxis II: Online - Vorlesung III vom 11.02.2013Daniel Rehn
 
Campus M21 | Medienpraxis II: Online - Vorlesung I vom 30.01.2013
Campus M21 | Medienpraxis II: Online - Vorlesung I vom 30.01.2013Campus M21 | Medienpraxis II: Online - Vorlesung I vom 30.01.2013
Campus M21 | Medienpraxis II: Online - Vorlesung I vom 30.01.2013Daniel Rehn
 
Ligação do Flex a um backend LAMP usando AMFPHP
Ligação do Flex a um backend LAMP usando AMFPHPLigação do Flex a um backend LAMP usando AMFPHP
Ligação do Flex a um backend LAMP usando AMFPHPelliando dias
 
Lean Kanban FR 2013 - Vin et kanban
Lean Kanban FR 2013 - Vin et kanbanLean Kanban FR 2013 - Vin et kanban
Lean Kanban FR 2013 - Vin et kanbanJulien Fallet
 
Semana 5: Caracteres, tipos char e int, tipos de valor vs. tipos de referência
Semana  5: Caracteres, tipos char e int, tipos de valor vs. tipos de referênciaSemana  5: Caracteres, tipos char e int, tipos de valor vs. tipos de referência
Semana 5: Caracteres, tipos char e int, tipos de valor vs. tipos de referênciaManuel Menezes de Sequeira
 
Presentació assamblea
Presentació assamblea Presentació assamblea
Presentació assamblea FC Barcelona
 
Apresentação Java Web Si Ufc Quixadá
Apresentação Java Web Si Ufc QuixadáApresentação Java Web Si Ufc Quixadá
Apresentação Java Web Si Ufc QuixadáZarathon Maia
 
ECM-Webinar: Alfresco Migration Bestandsdaten Teil 2
ECM-Webinar: Alfresco Migration Bestandsdaten Teil 2ECM-Webinar: Alfresco Migration Bestandsdaten Teil 2
ECM-Webinar: Alfresco Migration Bestandsdaten Teil 2dmc digital media center GmbH
 
Què ha fet ICV-EUiA amb el meu vot?
Què ha fet ICV-EUiA amb el meu vot?Què ha fet ICV-EUiA amb el meu vot?
Què ha fet ICV-EUiA amb el meu vot?iniciativaverds
 
2014 03-26-appdevseries-session3-interactingwiththedatabase-fr-phpapp01-rev.
2014 03-26-appdevseries-session3-interactingwiththedatabase-fr-phpapp01-rev.2014 03-26-appdevseries-session3-interactingwiththedatabase-fr-phpapp01-rev.
2014 03-26-appdevseries-session3-interactingwiththedatabase-fr-phpapp01-rev.MongoDB
 
Otimizando aplicações Zend Framework - Tchelinux
Otimizando aplicações Zend Framework - TchelinuxOtimizando aplicações Zend Framework - Tchelinux
Otimizando aplicações Zend Framework - TchelinuxElton Minetto
 
Atelier agile 2009_09_27
Atelier agile 2009_09_27Atelier agile 2009_09_27
Atelier agile 2009_09_27domidp
 
02.10.2011 SC B.A.T II
02.10.2011   SC B.A.T II02.10.2011   SC B.A.T II
02.10.2011 SC B.A.T IIHerdwangerSV
 
Présentation LMAX Disruptor So@t
Présentation LMAX Disruptor So@tPrésentation LMAX Disruptor So@t
Présentation LMAX Disruptor So@tFrancois Ostyn
 

En vedette (20)

Campus M21 | Medienpraxis II: Online - Vorlesung I vom 31.01.2013
Campus M21 | Medienpraxis II: Online - Vorlesung I vom 31.01.2013Campus M21 | Medienpraxis II: Online - Vorlesung I vom 31.01.2013
Campus M21 | Medienpraxis II: Online - Vorlesung I vom 31.01.2013
 
Campus M21 | Medienpraxis II: Online - Vorlesung III vom 11.02.2013
Campus M21 | Medienpraxis II: Online - Vorlesung III vom 11.02.2013Campus M21 | Medienpraxis II: Online - Vorlesung III vom 11.02.2013
Campus M21 | Medienpraxis II: Online - Vorlesung III vom 11.02.2013
 
Campus M21 | Medienpraxis II: Online - Vorlesung I vom 30.01.2013
Campus M21 | Medienpraxis II: Online - Vorlesung I vom 30.01.2013Campus M21 | Medienpraxis II: Online - Vorlesung I vom 30.01.2013
Campus M21 | Medienpraxis II: Online - Vorlesung I vom 30.01.2013
 
Ligação do Flex a um backend LAMP usando AMFPHP
Ligação do Flex a um backend LAMP usando AMFPHPLigação do Flex a um backend LAMP usando AMFPHP
Ligação do Flex a um backend LAMP usando AMFPHP
 
Lean Kanban FR 2013 - Vin et kanban
Lean Kanban FR 2013 - Vin et kanbanLean Kanban FR 2013 - Vin et kanban
Lean Kanban FR 2013 - Vin et kanban
 
Digitale Mentalität II
Digitale Mentalität IIDigitale Mentalität II
Digitale Mentalität II
 
Semana 5: Caracteres, tipos char e int, tipos de valor vs. tipos de referência
Semana  5: Caracteres, tipos char e int, tipos de valor vs. tipos de referênciaSemana  5: Caracteres, tipos char e int, tipos de valor vs. tipos de referência
Semana 5: Caracteres, tipos char e int, tipos de valor vs. tipos de referência
 
Tutorialphpmyadmin
TutorialphpmyadminTutorialphpmyadmin
Tutorialphpmyadmin
 
Presentació assamblea
Presentació assamblea Presentació assamblea
Presentació assamblea
 
NotORM
NotORMNotORM
NotORM
 
Apresentação Java Web Si Ufc Quixadá
Apresentação Java Web Si Ufc QuixadáApresentação Java Web Si Ufc Quixadá
Apresentação Java Web Si Ufc Quixadá
 
ECM-Webinar: Alfresco Migration Bestandsdaten Teil 2
ECM-Webinar: Alfresco Migration Bestandsdaten Teil 2ECM-Webinar: Alfresco Migration Bestandsdaten Teil 2
ECM-Webinar: Alfresco Migration Bestandsdaten Teil 2
 
Què ha fet ICV-EUiA amb el meu vot?
Què ha fet ICV-EUiA amb el meu vot?Què ha fet ICV-EUiA amb el meu vot?
Què ha fet ICV-EUiA amb el meu vot?
 
2014 03-26-appdevseries-session3-interactingwiththedatabase-fr-phpapp01-rev.
2014 03-26-appdevseries-session3-interactingwiththedatabase-fr-phpapp01-rev.2014 03-26-appdevseries-session3-interactingwiththedatabase-fr-phpapp01-rev.
2014 03-26-appdevseries-session3-interactingwiththedatabase-fr-phpapp01-rev.
 
Einführung in SCRUM
Einführung in SCRUMEinführung in SCRUM
Einführung in SCRUM
 
MySQL Query Optimization
MySQL Query OptimizationMySQL Query Optimization
MySQL Query Optimization
 
Otimizando aplicações Zend Framework - Tchelinux
Otimizando aplicações Zend Framework - TchelinuxOtimizando aplicações Zend Framework - Tchelinux
Otimizando aplicações Zend Framework - Tchelinux
 
Atelier agile 2009_09_27
Atelier agile 2009_09_27Atelier agile 2009_09_27
Atelier agile 2009_09_27
 
02.10.2011 SC B.A.T II
02.10.2011   SC B.A.T II02.10.2011   SC B.A.T II
02.10.2011 SC B.A.T II
 
Présentation LMAX Disruptor So@t
Présentation LMAX Disruptor So@tPrésentation LMAX Disruptor So@t
Présentation LMAX Disruptor So@t
 

Similaire à Monitoring applicatif : Pourquoi et comment ?

BBL - Monitoring - kyriba
BBL - Monitoring - kyribaBBL - Monitoring - kyriba
BBL - Monitoring - kyribaOlivier BAZOUD
 
Kiwiparty 2011 - Optimisation des sites internet
Kiwiparty 2011 - Optimisation des sites internetKiwiparty 2011 - Optimisation des sites internet
Kiwiparty 2011 - Optimisation des sites internetDevclic
 
L'histoire d'html5 pour les développeurs windows phone 8
L'histoire d'html5 pour les développeurs windows phone 8L'histoire d'html5 pour les développeurs windows phone 8
L'histoire d'html5 pour les développeurs windows phone 8davrous
 
Le monitoring de la performance front
Le monitoring de la performance frontLe monitoring de la performance front
Le monitoring de la performance frontJean-Pierre Vincent
 
Core web vitals pour unifier UX et SEO - Stephane Rios - SEO Camp'us paris 2020
Core web vitals pour unifier UX et SEO - Stephane Rios - SEO Camp'us paris 2020Core web vitals pour unifier UX et SEO - Stephane Rios - SEO Camp'us paris 2020
Core web vitals pour unifier UX et SEO - Stephane Rios - SEO Camp'us paris 2020SEO CAMP
 
Devops mycode devoxx-france-2015-v2
Devops mycode devoxx-france-2015-v2Devops mycode devoxx-france-2015-v2
Devops mycode devoxx-france-2015-v2waizou
 
3 Microsoft Advanced Threat Analytics - Genève
3   Microsoft Advanced Threat Analytics - Genève3   Microsoft Advanced Threat Analytics - Genève
3 Microsoft Advanced Threat Analytics - GenèveaOS Community
 
Morning tech #2 - Démarche performance slides
Morning tech #2 - Démarche performance slidesMorning tech #2 - Démarche performance slides
Morning tech #2 - Démarche performance slidesOxalide
 
Oxalide Morning tech #2 - démarche performance
Oxalide Morning tech #2 - démarche performanceOxalide Morning tech #2 - démarche performance
Oxalide Morning tech #2 - démarche performanceLudovic Piot
 
Core Web Vitals, les indicateurs de vitesse qui réconcilient UX et SEO
Core Web Vitals, les indicateurs de vitesse qui réconcilient UX et SEOCore Web Vitals, les indicateurs de vitesse qui réconcilient UX et SEO
Core Web Vitals, les indicateurs de vitesse qui réconcilient UX et SEOWeLoveSEO
 
SPA avec Angular et SignalR (FR)
SPA avec Angular et SignalR (FR)SPA avec Angular et SignalR (FR)
SPA avec Angular et SignalR (FR)Rui Carvalho
 
Guide (un tout petit peu) pratique (et totalement subjectif) du stream proces...
Guide (un tout petit peu) pratique (et totalement subjectif) du stream proces...Guide (un tout petit peu) pratique (et totalement subjectif) du stream proces...
Guide (un tout petit peu) pratique (et totalement subjectif) du stream proces...Bruno Bonnin
 
Développer ou debugger ?
Développer ou debugger ? Développer ou debugger ?
Développer ou debugger ? Microsoft
 
HTML5... La révolution maintenant!
HTML5... La révolution maintenant!HTML5... La révolution maintenant!
HTML5... La révolution maintenant!CARA_Lyon
 
HTML5... La révolution maintenant!
HTML5... La révolution maintenant!HTML5... La révolution maintenant!
HTML5... La révolution maintenant!CARA_Lyon
 
Stream processing et SQL
Stream processing et SQLStream processing et SQL
Stream processing et SQLBruno Bonnin
 
TypeScript for dummies
TypeScript for dummiesTypeScript for dummies
TypeScript for dummiesMicrosoft
 
Codedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
Codedarmor 2012 - 06/03 - HTML5, CSS3 et JavascriptCodedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
Codedarmor 2012 - 06/03 - HTML5, CSS3 et Javascriptcodedarmor
 
Java script Introduction
Java script IntroductionJava script Introduction
Java script IntroductionMohamed MHAMDI
 
Les dernières avancées HTML5 & CSS3 en action !
Les dernières avancées HTML5 & CSS3 en action !Les dernières avancées HTML5 & CSS3 en action !
Les dernières avancées HTML5 & CSS3 en action !Microsoft Technet France
 

Similaire à Monitoring applicatif : Pourquoi et comment ? (20)

BBL - Monitoring - kyriba
BBL - Monitoring - kyribaBBL - Monitoring - kyriba
BBL - Monitoring - kyriba
 
Kiwiparty 2011 - Optimisation des sites internet
Kiwiparty 2011 - Optimisation des sites internetKiwiparty 2011 - Optimisation des sites internet
Kiwiparty 2011 - Optimisation des sites internet
 
L'histoire d'html5 pour les développeurs windows phone 8
L'histoire d'html5 pour les développeurs windows phone 8L'histoire d'html5 pour les développeurs windows phone 8
L'histoire d'html5 pour les développeurs windows phone 8
 
Le monitoring de la performance front
Le monitoring de la performance frontLe monitoring de la performance front
Le monitoring de la performance front
 
Core web vitals pour unifier UX et SEO - Stephane Rios - SEO Camp'us paris 2020
Core web vitals pour unifier UX et SEO - Stephane Rios - SEO Camp'us paris 2020Core web vitals pour unifier UX et SEO - Stephane Rios - SEO Camp'us paris 2020
Core web vitals pour unifier UX et SEO - Stephane Rios - SEO Camp'us paris 2020
 
Devops mycode devoxx-france-2015-v2
Devops mycode devoxx-france-2015-v2Devops mycode devoxx-france-2015-v2
Devops mycode devoxx-france-2015-v2
 
3 Microsoft Advanced Threat Analytics - Genève
3   Microsoft Advanced Threat Analytics - Genève3   Microsoft Advanced Threat Analytics - Genève
3 Microsoft Advanced Threat Analytics - Genève
 
Morning tech #2 - Démarche performance slides
Morning tech #2 - Démarche performance slidesMorning tech #2 - Démarche performance slides
Morning tech #2 - Démarche performance slides
 
Oxalide Morning tech #2 - démarche performance
Oxalide Morning tech #2 - démarche performanceOxalide Morning tech #2 - démarche performance
Oxalide Morning tech #2 - démarche performance
 
Core Web Vitals, les indicateurs de vitesse qui réconcilient UX et SEO
Core Web Vitals, les indicateurs de vitesse qui réconcilient UX et SEOCore Web Vitals, les indicateurs de vitesse qui réconcilient UX et SEO
Core Web Vitals, les indicateurs de vitesse qui réconcilient UX et SEO
 
SPA avec Angular et SignalR (FR)
SPA avec Angular et SignalR (FR)SPA avec Angular et SignalR (FR)
SPA avec Angular et SignalR (FR)
 
Guide (un tout petit peu) pratique (et totalement subjectif) du stream proces...
Guide (un tout petit peu) pratique (et totalement subjectif) du stream proces...Guide (un tout petit peu) pratique (et totalement subjectif) du stream proces...
Guide (un tout petit peu) pratique (et totalement subjectif) du stream proces...
 
Développer ou debugger ?
Développer ou debugger ? Développer ou debugger ?
Développer ou debugger ?
 
HTML5... La révolution maintenant!
HTML5... La révolution maintenant!HTML5... La révolution maintenant!
HTML5... La révolution maintenant!
 
HTML5... La révolution maintenant!
HTML5... La révolution maintenant!HTML5... La révolution maintenant!
HTML5... La révolution maintenant!
 
Stream processing et SQL
Stream processing et SQLStream processing et SQL
Stream processing et SQL
 
TypeScript for dummies
TypeScript for dummiesTypeScript for dummies
TypeScript for dummies
 
Codedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
Codedarmor 2012 - 06/03 - HTML5, CSS3 et JavascriptCodedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
Codedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
 
Java script Introduction
Java script IntroductionJava script Introduction
Java script Introduction
 
Les dernières avancées HTML5 & CSS3 en action !
Les dernières avancées HTML5 & CSS3 en action !Les dernières avancées HTML5 & CSS3 en action !
Les dernières avancées HTML5 & CSS3 en action !
 

Monitoring applicatif : Pourquoi et comment ?

  • 2. M6Webgroupe M6 Filiale digitale du + de 70 Sites sur PF LAMP Le MVNO M6Mobile avec Orange 11,6M de Visiteurs Unique (Mars 2012 Nielsen) Le Replay et produits dérivés des progrs télés 4 millions de lignes de codes Un comparateur de prix 16000 requêtes MySql par seconde CA 2011 : 102,1M€ Beaucoup de développeurs !
  • 3. Kenny DITS ( @kenny_dee ) Responsable Etude & Dév chez M6Web Ancien dév LAMP Passionné de WebPerf & Monitoring
  • 4. Clubic.com Jeuxvideo.fr M6.fr Turbo.fr Deco.fr W9.fr
  • 6. Je veux savoir lorsqu’un de nos services Php ne fonctionne plus !
  • 7. Je veux vérifier que les erreurs et les temps de chargement n’empirent pas !
  • 8. Je veux mesurer l’impact d’une pub télé ou d’une actualité « Hot » sur l’un de nos sites !
  • 9. Je veux trouver rapidement la ou les RootCause lors d’un incident !
  • 10. Je veux tout savoir sur tous nos sites !
  • 11. Je veux retrouvez la vue sur nos projets ! Que se passe-t-il en production ? Qu’est-ce qui s’est passé ? Mes services fonctionnent-ils ? Pourquoi ne fonctionnent-t-ils plus ?
  • 12. Et la donner à nos développeurs ! Vérifier l’impact de leurs mises en production sur nos applis / sur nos serveurs, sur les temps de chargement etc …
  • 14. "If it's not monitored, it's not in production" Theo Schlossnagle #velocityconf
  • 15. "If you can not measure it, you can not improve it" Lord Kelvin
  • 16. Exemples de métriques à monitorer : • Appels aux services applicatifs • Téléchargement sur Clubic / Lectures de news, topics, vidéos … • Calcul de cote automobile sur Turbo • … • Gestion utilisateurs : • (dé)connexion • Inscription • activation • Utilisation et temps SQL: • select/update/… par db • Conso CPU • Temps d’affichage des pages • Erreurs applicatives : • HTTP (301,404 …) • PHP (Warning, Fatal, …), Js … • Utilisation des caches applicatifs • Memcached • Redis • Crawl Google …
  • 18. Monitoring humain ? On surveille le site H24 ?
  • 19. StatsD ©Etsy & FlickR http://Graphite.wikidot.com http://Github.com/etsy/statsd https://github.com/graphite-project
  • 20. Principe de fonctionnement [Client • [Serveur [Graphite] Applicatif StatsD] StatsD] [Graphite] Outils de Visualiser Collecteur Stockage PHP Envoi ses • Agrège Stocke graph des métriques • Et envoi métriques
  • 22. StatsD Agrégateur de statistiques 1 Démon Node.js + 1 client Php (ou autre)
  • 23. Node.JS : • Créée par Ryan Dahl (@ryah) début 2009, • basée sur la machine virtuelle V8 (projet Open Source de Google©) • Javascript coté serveur • Ultra rapide • Gestion des entrées/sorties de manière non bloquante • Très grosse communauté • Fun ! • Exemple d’un serveur Web en Node.js var http = require('http'); http.createServer(function (req, res) { res.writeHead(200, {'Content-Type': 'text/plain'}); res.end('Hello Worldn'); }).listen(1337, '127.0.0.1'); console.log('Server running at http://127.0.0.1:1337/');
  • 24. Représentation de nos métriques • errors • 404 • clubic (errors.404.clubic) • Jvfr (errors.404.jvfr) • … • mysql. • select. • clubic • nomdeladatabase • count (mysql.select.clubic. nomdeladatabase.count) • Une métrique n’est valable que par son nœud final
  • 25. Applicatif Métrique Métrique Métrique StatsD Le client StatsD : Le serveur StatsD : • Incrément/Décrement • Reçoit • Agrège pendant 2 secondes • Timer • Envoie a Graphite
  • 26. Le client StatsD : implémentation • En PHP StatsD::increment('errors.404.clubic'); // +1 d'une statistique StatsD::decrement('errors.404.clubic'); // -1 d'une statistique StatsD::timing('cpu.clubic.index', 1234); // Statistique en ms • Via Fsockopen if($fp = fsockopen('udp://<ip>', '<port>')) { fwrite($fp, 'errors.404.clubic:1|c'); fclose($fp); } • Bash PORT=2003 SERVER=graphite.<domaine>.<extension> echo "errors.404.clubic `date +%s`" | nc ${SERVER} ${PORT}; • …
  • 27. Le serveur StatsD : • Nombre de métriques reçu par StatsD et envoyé • graphite.numStats : • Les Incréments sont stockés sous l’arbo : • stats_count.* • Les Timers sont stockés sous l’arbo • stats.timers.*. • mean • lower • upper • upper_90 • Max • count • sum (©M6web)
  • 28. Le protocole UDP : • Fire & Forget : • Rapide • Pas d’attente de réponse du serveur • Aucun impact si le serveur est inaccessible • Attention toutefois … : trop d’UDP tue l’UDP … et les serveurs avec …
  • 29.
  • 31. Hack du client Php et serveur StatsD : Modification du client PHP pour envoyer moins de paquets UDP => Utilisation du register_shutdown_function pour envoyer les données Découpage en paquets (MTU à 1500 octets pour Node.js (limitation logicielle/hardware), 1472 octets max, 28 octets de header) Plusieurs démons Node.js avec un LBL sur les nodes sur un CRC32 de la chaîne modulo le nombre de serveurs
  • 33. Graphite : • Stocke des métriques dans le temps • Permet de grapher ces métriques à la demande • Graphite ne fait pas la collecte des données … • Graphite n’est pas un outil de statistique ! • Graphite est composé de 3 éléments distincts écrits en Python : • carbon - Démon qui récupère les métriques • whisper - La DB qui stocke les métriques ( ressemblant à RRD) • graphite webapp - L’interface web (sous Django) qui graphe les métriques à la demande (avec la librairie Cairo)
  • 34. Graphite : Le Composer
  • 35. Graph Data Graph Options Les options du Composer
  • 36. COMMENT UTILISER GRAPHITE ? Quelques exemples
  • 41. alias(sum(stats_counts.cache.memcached.read.*),"Memcache total Read ") alias(sum(stats_counts.cache.memcached.write.*),"Memcache total Write") dashed(drawAsInfinite(stats_counts.dev.mep.master_www)) Affichage des lectures/écritures Memcache avec mise en production
  • 42. limit(sortByMaxima(groupByNode(stats.timers.mysql.*.select.*.sum,'sumSeries')),10) Temps SQL passé par site au format « Camembert » avec le paramètre &graphType=pie
  • 43. Les possibilités d’écriture de métrique : • stats_counts.mysql.clubic.select.edito.count • stats_counts.mysql.{clubic,jvfr}.select.edito.count • stats_counts.mysql.*.*.edito.count • stats_counts.mysql.c*c.select.edito.count • stats_counts.host-[0-1].cpu • … • Attention a la manière dont vous écrivez vos arbos : • Un nœud sous Graphite représente environ 6mo !!!
  • 44. Les fonctions principales : • sumSeries, sumSeriesWithWildcards • limit • sortByMaxima / sortByMinima • aliasByNode / alias / substr • groupByNode • averageAbove / averageBelow / currentBelow … • color / dashed / lineWidth / stacked • drawAsInfinite • keepLastValue • secondYAxis • summarize • timeShift http://readthedocs.org/docs/graphite/en/latest/functions.html
  • 45. L’URL API : • http://graphite/render/? • target=stats.timers.mysql.clubic.select.edito.count • &height=800&width=600 • &from=-8d&until=-7d • &from=20091201&until=20091231 • &from=-5min • &title=Graph%20Clubic%20Sql • &format={json|raw|csv|…} • … Exemple : http://graphite.<dom>.fr/ render ?width=300&from=- 4hours&until=now&height=230&title=Warning&target=sum(stats_counts. errors.warning.*) http://readthedocs.org/docs/graphite/en/latest/url-api.html
  • 46. GRAPHITE AU QUOTIDIEN ? Le DashBoard
  • 49. ALERTING AVEC GRAPHITE ? Est ce possible ?
  • 50. Sortir les données brutes des métriques <graphitehost>/render/?target=stats_counts.errors.404.clubic&format=json
  • 51.
  • 52. DES EXEMPLES WebPerf / Cpu / Erreurs JS …
  • 53. Temps d’affichage client #webperf • Real User Monitoring : • Navigation Timing API (spéc HTML5) • Utilisation de l'image Object JS (new Image()) avec les paramètres relevés • Node.Js : Serveur HTTP (204 ok sans contenu) et agrège les données pour les envoyer à Graphite Conso Cpu coté serveur • Fonction getrusage() en PHP • http://php.net/manual/fr/function.getrusage.php • + Append_file ou preprend_file et/ou register_shutdown_function() Erreurs JS • Spec JS window.onerror(message, url, line) • Utilisation de l'image Object JS (new Image()) avec les paramètres relevés pour envoi à un serveur HTTP What Else ? …
  • 54. Le monitoring c’est bien, mais pour plus de précision, il est indispensable de logguer des infos plus précises ailleurs Bdd, Syslog, …
  • 55. Tester simplement ? • https://github.com/suan/graphite_up • Installation via VirtualBox + Vagrant de • Graphite (https://github.com/graphite-project) • StatsD (https://github.com/etsy/statsd) • Diamond (http://opensource.brightcove.com/project/diamond) • Sur une Debian Squeeze 32-bit via Chef.
  • 56. Conclusion • Beaucoup moins d’anomalies applicatives ressenties • Eléments factuels lors des posts-mortems • MTTD / MMTR beaucoup plus court • Vrai liant entre Exploit et Développeur • Réelle implication des développeurs sur l’impact de leurs développement • D’autres services que la technique ont mis en place leurs Dashboard à partir de nos métriques
  • 57. Retrouvez la DT d’M6Web sur http://tech.m6web.fr Et moi sur Twitter : @kenny_dee

Notes de l'éditeur

  1. Ce modèle peut servir de fichier de démarrage pour un album photo.
  2. Et le découvrir par moi même 
  3. Et ne pas attendre que le serveur soit à genoux
  4. Pour encore mieux supporter la charge la prochaine fois
  5. Pour que les problèmes deviennent transparent, et avoir aussi le droit à l’erreur
  6. Tout ce que nous savons pourra nous servir un jour !
  7. Physicien britannique