SlideShare a Scribd company logo
1 of 55
Download to read offline
Monitoring	
  for	
  the	
  masses	
  
Rodrigo	
  Fernandez	
  
HTML5DevConf	
  2015	
  
What	
  is	
  monitoring?	
  
To	
  be	
  aware	
  of	
  the	
  state	
  of	
  a	
  
system	
  and	
  observe	
  any	
  changes	
  
which	
  may	
  occur	
  over	
  Cme	
  
Why	
  should	
  we	
  monitor?	
  
Our	
  responsibility	
  shouldn’t	
  
end	
  in	
  a	
  commit	
  
Users	
  
Product	
  
Owner	
  
Developer	
  
System	
  
Admin	
  
Code	
   Infrastructure	
  
How	
  can	
  we	
  monitor?	
  
Easy!	
  We	
  simply	
  instrument	
  our	
  
applicaCon	
  and	
  stream	
  events	
  
data	
  to	
  a	
  trending	
  system	
  for	
  
analysis,	
  correlaAon	
  and	
  anomaly	
  
detecAon.	
  
app	
  
server	
  
messenger	
  
tsdb	
  
analyAcs	
  
InstrumentaCon	
  and	
  telemetry	
  
Monitoring for the masses
High	
  ResoluCon	
  Time	
  API	
  
var Circle = function (radius) {!
if (radius <= 0) {!
throw new RangeError('Radius must be greater than zero!');!
}!
this.radius = radius;!
};!
!
Circle.prototype.perimeter = function () {!
return 2 * Math.PI * this.radius;!
};!
!
Circle.prototype.area = function () {!
return Math.PI * Math.pow(this.radius, 2);!
};	
  
var start = Date.now();!
!
var circle = new Circle(1);!
circle.perimeter();!
circle.area();!
!
Date.now() - start;	
  
var start = Date.now();!
!
var circle = new Circle(1);!
circle.perimeter();!
circle.area();!
!
Date.now() - start; // 0	
  
var start = performance.now();!
!
var circle = new Circle(1);!
circle.perimeter();!
circle.area();!
!
performance.now() - start;	
  
var start = performance.now();!
!
var circle = new Circle(1);!
circle.perimeter();!
circle.area();!
!
performance.now() - start; // 0.1449999999999818	
  
-performance.now() + performance.now();	
  
-performance.now() + performance.now(); // 0.009999999999990905	
  
Monitoring for the masses
NavigaCon	
  Cming	
  API	
  
Monitoring for the masses
performance.timing;!
!
{!
"navigationStart": 1444712367243,!
"unloadEventStart": 0,!
"unloadEventEnd": 0,!
"redirectStart": 0,!
"redirectEnd": 0,!
"fetchStart": 1444712367504,!
"domainLookupStart": 1444712367507,!
"domainLookupEnd": 1444712367538,!
"connectStart": 1444712367538,!
"connectEnd": 1444712367616,!
"secureConnectionStart": 0,!
"requestStart": 1444712367616,!
"responseStart": 1444712367866,!
"responseEnd": 1444712367954,!
"domLoading": 1444712367867,!
"domInteractive": 1444712368966,!
"domContentLoadedEventStart": 1444712368966,!
"domContentLoadedEventEnd": 1444712369180,!
"domComplete": 1444712376251,!
"loadEventStart": 1444712376251,!
"loadEventEnd": 1444712376891!
}	
  
Monitoring for the masses
Resource	
  Cming	
  API	
  
performance.getEntriesByType('resource');!
!
{!
"connectEnd": 0,!
"connectStart": 0,!
"domainLookupEnd": 0,!
"domainLookupStart": 0,!
"duration": 380.53100000252016,!
"entryType": "resource",!
"fetchStart": 661.7220000043744,!
"initiatorType": "link",!
"name": "https://lorem.ipsum.dolor/sit/amet.css",!
"redirectEnd": 0,!
"redirectStart": 0,!
"requestStart": 0,!
"responseEnd": 1042.2530000068946,!
"responseStart": 0,!
"secureConnectionStart": 0,!
"startTime": 661.7220000043744!
}!
Monitoring for the masses
Monitoring for the masses
Monitoring for the masses
Monitoring for the masses
User	
  Cming	
  API	
  
var circle = new Circle(1);!
!
performance.mark(’p:before');!
!
circle.perimeter();!
!
performance.mark(’p:after');!
!
performance.measure(’p', ’p:before', ’p:after');!
!
performance.getEntriesByType('measure');	
  
{!
"name": "p",!
"entryType": "measure",!
"startTime": 31442.615000000005,!
"duration": 0.09000000000014552!
}	
  
Monitoring for the masses
Beacon	
  API	
  
window.addEventListener('unload', function () {!
!
var entries = performance.getEntries();!
!
navigator.sendBeacon('/phone/home', JSON.stringify(entries));!
!
});	
  
Monitoring for the masses
Polyfills	
  (modernizr.com)	
  
High	
  ResoluAon	
  Time	
   hVps://gist.github.com/paulirish/5438650	
  
NavigaAon	
  Timing	
   -­‐	
  
Resource	
  Timing	
   -­‐	
  
User	
  Timing	
   hVps://github.com/nicjansma/userCming.js	
  
Page	
  Visibility	
  
hVps://github.com/ai/visibility.js	
  
hVps://github.com/addyosmani/visibly.js	
  
hVps://github.com/mathiasbynens/jquery-­‐visibility	
  
Beacon	
   hVps://github.com/miguelmota/Navigator.sendBeacon	
  
Why	
  the	
  obsession	
  with	
  
Amings	
  and	
  duraAons?	
  
Doherty	
  &	
  Thadani	
  (1982)	
  
150	
  
200	
  
250	
  
300	
  
350	
  
400	
  
0.0	
   0.5	
   1.0	
   1.5	
   2.0	
   2.5	
   3.0	
  
TransacAons	
  per	
  Hour	
  
System	
  Response	
  Time	
  (Seconds)	
  
InstrumentaCon	
  with	
  AOP	
  
var Circle = function (radius) {!
if (radius <= 0) {!
throw new RangeError('Radius must be greater than zero!');!
}!
this.radius = radius;!
};!
!
Circle.prototype.perimeter = function () {!
return 2 * Math.PI * this.radius;!
};!
!
Circle.prototype.area = function () {!
return Math.PI * Math.pow(this.radius, 2);!
};	
  
meld.before(Circle.prototype, 'perimeter', function () {!
performance.mark('Circle.perimeter:before');!
});!
!
meld.after(Circle.prototype, 'perimeter', function () {!
performance.mark('Circle.perimeter:after');!
performance.measure('Circle.perimeter', 'Circle.perimeter:before',!
'Circle.perimeter:after');!
});	
  
var c1 = new Circle(1);!
c1.perimeter();!
!
var c2 = new Circle(2);!
c2.perimeter();!
performance.getEntriesByName('Circle.perimeter');!
!
!
[!
{!
"name": "Circle.perimeter",!
"entryType": "measure",!
"startTime": 16.725,!
"duration": 0.11499999999999844!
},!
{!
"name": "Circle.perimeter",!
"entryType": "measure",!
"startTime": 16.89,!
"duration": 0.015000000000000568!
}!
]!
InstrumentaCon	
  with	
  
decorators	
  (ES2016)	
  
let duration = function (target, name, descriptor) {!
let {value} = descriptor;!
let tag = `${target.constructor.name}.${name}`;!
let before = `${tag}:before`;!
let after = `${tag}:after`;!
!
descriptor.value = function(){!
performance.mark(before);!
let result = value.call(this, ...arguments);!
performance.mark(after);!
performance.measure(tag, before, after);!
return result;!
};!
};!
class Circle {!
constructor(radius) {!
if (radius <= 0) {!
throw new RangeError('Radius must be greater than zero!');!
}!
this.radius = radius;!
}!
!
@duration!
perimeter() {!
return 2 * Math.PI * this.radius;!
}!
!
@duration!
area() {!
return Math.PI * Math.pow(this.radius, 2);!
}!
}!
let c1 = new Circle(1);!
let p1 = c1.perimeter();!
let a1 = c1.area();!
!
!
let c2 = new Circle(2);!
let p2 = c2.perimeter();!
let a2 = c2.area();!
!
!
performance.getEntriesByType('measure');!
[!
{!
"name": "Circle.perimeter",!
"entryType": "measure",!
"startTime": 8.280000000000001,!
"duration": 0.05999999999999872!
},!
{!
"name": "Circle.area",!
"entryType": "measure",!
"startTime": 8.360000000000001,!
"duration": 0.10499999999999865!
},!
{!
"name": "Circle.perimeter",!
"entryType": "measure",!
"startTime": 8.5,!
"duration": 0.015000000000000568!
},!
{!
"name": "Circle.area",!
"entryType": "measure",!
"startTime": 8.525,!
"duration": 0.005000000000000782!
}!
]!
app	
  
server	
  
messenger	
  
tsdb	
  
analyAcs	
  
Monitoring for the masses
Monitoring for the masses
Demo	
  
Thank	
  you!	
  
github.com/rodfernandez	
  

More Related Content

What's hot

Chaos Engineering on Microservices - 윤석찬, AWS 테크에반젤리스트
Chaos Engineering on Microservices - 윤석찬, AWS 테크에반젤리스트 Chaos Engineering on Microservices - 윤석찬, AWS 테크에반젤리스트
Chaos Engineering on Microservices - 윤석찬, AWS 테크에반젤리스트 Channy Yun
 
20150811 potatotips 20
20150811 potatotips 2020150811 potatotips 20
20150811 potatotips 20tkawashita
 
Patching Mr Robot: Mitigating IoT-Related Cyber-Social-Disasters by getting F...
Patching Mr Robot: Mitigating IoT-Related Cyber-Social-Disasters by getting F...Patching Mr Robot: Mitigating IoT-Related Cyber-Social-Disasters by getting F...
Patching Mr Robot: Mitigating IoT-Related Cyber-Social-Disasters by getting F...Eugene Siow
 
Monitoring patterns for mitigating technical risk
Monitoring patterns for  mitigating technical riskMonitoring patterns for  mitigating technical risk
Monitoring patterns for mitigating technical riskItai Frenkel
 
Python event based network sniffer
Python event based network snifferPython event based network sniffer
Python event based network snifferJirka Vejrazka
 
Report for weather pi
Report for weather piReport for weather pi
Report for weather piAsutosh Hota
 

What's hot (8)

Chaos Engineering on Microservices - 윤석찬, AWS 테크에반젤리스트
Chaos Engineering on Microservices - 윤석찬, AWS 테크에반젤리스트 Chaos Engineering on Microservices - 윤석찬, AWS 테크에반젤리스트
Chaos Engineering on Microservices - 윤석찬, AWS 테크에반젤리스트
 
Elapsed time
Elapsed timeElapsed time
Elapsed time
 
20150811 potatotips 20
20150811 potatotips 2020150811 potatotips 20
20150811 potatotips 20
 
AAS National Conference 2008: Kris Zacny
AAS National Conference 2008: Kris ZacnyAAS National Conference 2008: Kris Zacny
AAS National Conference 2008: Kris Zacny
 
Patching Mr Robot: Mitigating IoT-Related Cyber-Social-Disasters by getting F...
Patching Mr Robot: Mitigating IoT-Related Cyber-Social-Disasters by getting F...Patching Mr Robot: Mitigating IoT-Related Cyber-Social-Disasters by getting F...
Patching Mr Robot: Mitigating IoT-Related Cyber-Social-Disasters by getting F...
 
Monitoring patterns for mitigating technical risk
Monitoring patterns for  mitigating technical riskMonitoring patterns for  mitigating technical risk
Monitoring patterns for mitigating technical risk
 
Python event based network sniffer
Python event based network snifferPython event based network sniffer
Python event based network sniffer
 
Report for weather pi
Report for weather piReport for weather pi
Report for weather pi
 

Similar to Monitoring for the masses

RxJava applied [JavaDay Kyiv 2016]
RxJava applied [JavaDay Kyiv 2016]RxJava applied [JavaDay Kyiv 2016]
RxJava applied [JavaDay Kyiv 2016]Igor Lozynskyi
 
The RED Method: How To Instrument Your Services
The RED Method: How To Instrument Your ServicesThe RED Method: How To Instrument Your Services
The RED Method: How To Instrument Your ServicesKausal
 
[245] presto 내부구조 파헤치기
[245] presto 내부구조 파헤치기[245] presto 내부구조 파헤치기
[245] presto 내부구조 파헤치기NAVER D2
 
Presto anatomy
Presto anatomyPresto anatomy
Presto anatomyDongmin Yu
 
Reactive programming every day
Reactive programming every dayReactive programming every day
Reactive programming every dayVadym Khondar
 
High-level Programming Languages: Apache Pig and Pig Latin
High-level Programming Languages: Apache Pig and Pig LatinHigh-level Programming Languages: Apache Pig and Pig Latin
High-level Programming Languages: Apache Pig and Pig LatinPietro Michiardi
 
StrongLoop Overview
StrongLoop OverviewStrongLoop Overview
StrongLoop OverviewShubhra Kar
 
React & The Art of Managing Complexity
React &  The Art of Managing ComplexityReact &  The Art of Managing Complexity
React & The Art of Managing ComplexityRyan Anklam
 
OpenCensus with Prometheus and Kubernetes
OpenCensus with Prometheus and KubernetesOpenCensus with Prometheus and Kubernetes
OpenCensus with Prometheus and KubernetesJinwoong Kim
 
Server side JavaScript: going all the way
Server side JavaScript: going all the wayServer side JavaScript: going all the way
Server side JavaScript: going all the wayOleg Podsechin
 
RxJS - The Reactive extensions for JavaScript
RxJS - The Reactive extensions for JavaScriptRxJS - The Reactive extensions for JavaScript
RxJS - The Reactive extensions for JavaScriptViliam Elischer
 
The Death of a Mouse
The Death of a MouseThe Death of a Mouse
The Death of a MouseGeert Bevin
 
Cross Domain Web
Mashups with JQuery and Google App Engine
Cross Domain Web
Mashups with JQuery and Google App EngineCross Domain Web
Mashups with JQuery and Google App Engine
Cross Domain Web
Mashups with JQuery and Google App EngineAndy McKay
 
[1C2]webrtc 개발, 현재와 미래
[1C2]webrtc 개발, 현재와 미래[1C2]webrtc 개발, 현재와 미래
[1C2]webrtc 개발, 현재와 미래NAVER D2
 
Neotys PAC 2018 - Jonathon Wright
Neotys PAC 2018 - Jonathon WrightNeotys PAC 2018 - Jonathon Wright
Neotys PAC 2018 - Jonathon WrightNeotys_Partner
 
Unit Testing Express and Koa Middleware in ES2015
Unit Testing Express and Koa Middleware in ES2015Unit Testing Express and Koa Middleware in ES2015
Unit Testing Express and Koa Middleware in ES2015Morris Singer
 
Beyond Page Level Metrics
Beyond Page Level MetricsBeyond Page Level Metrics
Beyond Page Level MetricsPhilip Tellis
 
Dynatrace: DevOps, shift-left &amp; self-healing a performance clinic with andi
Dynatrace: DevOps, shift-left &amp; self-healing a performance clinic with andiDynatrace: DevOps, shift-left &amp; self-healing a performance clinic with andi
Dynatrace: DevOps, shift-left &amp; self-healing a performance clinic with andiDynatrace
 

Similar to Monitoring for the masses (20)

RxJava applied [JavaDay Kyiv 2016]
RxJava applied [JavaDay Kyiv 2016]RxJava applied [JavaDay Kyiv 2016]
RxJava applied [JavaDay Kyiv 2016]
 
The RED Method: How To Instrument Your Services
The RED Method: How To Instrument Your ServicesThe RED Method: How To Instrument Your Services
The RED Method: How To Instrument Your Services
 
[245] presto 내부구조 파헤치기
[245] presto 내부구조 파헤치기[245] presto 내부구조 파헤치기
[245] presto 내부구조 파헤치기
 
Presto anatomy
Presto anatomyPresto anatomy
Presto anatomy
 
JS everywhere 2011
JS everywhere 2011JS everywhere 2011
JS everywhere 2011
 
Reactive programming every day
Reactive programming every dayReactive programming every day
Reactive programming every day
 
High-level Programming Languages: Apache Pig and Pig Latin
High-level Programming Languages: Apache Pig and Pig LatinHigh-level Programming Languages: Apache Pig and Pig Latin
High-level Programming Languages: Apache Pig and Pig Latin
 
StrongLoop Overview
StrongLoop OverviewStrongLoop Overview
StrongLoop Overview
 
React & The Art of Managing Complexity
React &  The Art of Managing ComplexityReact &  The Art of Managing Complexity
React & The Art of Managing Complexity
 
OpenCensus with Prometheus and Kubernetes
OpenCensus with Prometheus and KubernetesOpenCensus with Prometheus and Kubernetes
OpenCensus with Prometheus and Kubernetes
 
Server side JavaScript: going all the way
Server side JavaScript: going all the wayServer side JavaScript: going all the way
Server side JavaScript: going all the way
 
huhu
huhuhuhu
huhu
 
RxJS - The Reactive extensions for JavaScript
RxJS - The Reactive extensions for JavaScriptRxJS - The Reactive extensions for JavaScript
RxJS - The Reactive extensions for JavaScript
 
The Death of a Mouse
The Death of a MouseThe Death of a Mouse
The Death of a Mouse
 
Cross Domain Web
Mashups with JQuery and Google App Engine
Cross Domain Web
Mashups with JQuery and Google App EngineCross Domain Web
Mashups with JQuery and Google App Engine
Cross Domain Web
Mashups with JQuery and Google App Engine
 
[1C2]webrtc 개발, 현재와 미래
[1C2]webrtc 개발, 현재와 미래[1C2]webrtc 개발, 현재와 미래
[1C2]webrtc 개발, 현재와 미래
 
Neotys PAC 2018 - Jonathon Wright
Neotys PAC 2018 - Jonathon WrightNeotys PAC 2018 - Jonathon Wright
Neotys PAC 2018 - Jonathon Wright
 
Unit Testing Express and Koa Middleware in ES2015
Unit Testing Express and Koa Middleware in ES2015Unit Testing Express and Koa Middleware in ES2015
Unit Testing Express and Koa Middleware in ES2015
 
Beyond Page Level Metrics
Beyond Page Level MetricsBeyond Page Level Metrics
Beyond Page Level Metrics
 
Dynatrace: DevOps, shift-left &amp; self-healing a performance clinic with andi
Dynatrace: DevOps, shift-left &amp; self-healing a performance clinic with andiDynatrace: DevOps, shift-left &amp; self-healing a performance clinic with andi
Dynatrace: DevOps, shift-left &amp; self-healing a performance clinic with andi
 

Recently uploaded

Vertical- Machining - Center - VMC -LMW-Machine-Tool-Division.pptx
Vertical- Machining - Center - VMC -LMW-Machine-Tool-Division.pptxVertical- Machining - Center - VMC -LMW-Machine-Tool-Division.pptx
Vertical- Machining - Center - VMC -LMW-Machine-Tool-Division.pptxLMW Machine Tool Division
 
SATELITE COMMUNICATION UNIT 1 CEC352 REGULATION 2021 PPT BASICS OF SATELITE ....
SATELITE COMMUNICATION UNIT 1 CEC352 REGULATION 2021 PPT BASICS OF SATELITE ....SATELITE COMMUNICATION UNIT 1 CEC352 REGULATION 2021 PPT BASICS OF SATELITE ....
SATELITE COMMUNICATION UNIT 1 CEC352 REGULATION 2021 PPT BASICS OF SATELITE ....santhyamuthu1
 
The relationship between iot and communication technology
The relationship between iot and communication technologyThe relationship between iot and communication technology
The relationship between iot and communication technologyabdulkadirmukarram03
 
Nodal seismic construction requirements.pptx
Nodal seismic construction requirements.pptxNodal seismic construction requirements.pptx
Nodal seismic construction requirements.pptxwendy cai
 
sdfsadopkjpiosufoiasdoifjasldkjfl a asldkjflaskdjflkjsdsdf
sdfsadopkjpiosufoiasdoifjasldkjfl a asldkjflaskdjflkjsdsdfsdfsadopkjpiosufoiasdoifjasldkjfl a asldkjflaskdjflkjsdsdf
sdfsadopkjpiosufoiasdoifjasldkjfl a asldkjflaskdjflkjsdsdfJulia Kaye
 
IT3401-WEB ESSENTIALS PRESENTATIONS.pptx
IT3401-WEB ESSENTIALS PRESENTATIONS.pptxIT3401-WEB ESSENTIALS PRESENTATIONS.pptx
IT3401-WEB ESSENTIALS PRESENTATIONS.pptxSAJITHABANUS
 
Design of Clutches and Brakes in Design of Machine Elements.pptx
Design of Clutches and Brakes in Design of Machine Elements.pptxDesign of Clutches and Brakes in Design of Machine Elements.pptx
Design of Clutches and Brakes in Design of Machine Elements.pptxYogeshKumarKJMIT
 
me3493 manufacturing technology unit 1 Part A
me3493 manufacturing technology unit 1 Part Ame3493 manufacturing technology unit 1 Part A
me3493 manufacturing technology unit 1 Part Akarthi keyan
 
Graphics Primitives and CG Display Devices
Graphics Primitives and CG Display DevicesGraphics Primitives and CG Display Devices
Graphics Primitives and CG Display DevicesDIPIKA83
 
Technology Features of Apollo HDD Machine, Its Technical Specification with C...
Technology Features of Apollo HDD Machine, Its Technical Specification with C...Technology Features of Apollo HDD Machine, Its Technical Specification with C...
Technology Features of Apollo HDD Machine, Its Technical Specification with C...Apollo Techno Industries Pvt Ltd
 
Strategies of Urban Morphologyfor Improving Outdoor Thermal Comfort and Susta...
Strategies of Urban Morphologyfor Improving Outdoor Thermal Comfort and Susta...Strategies of Urban Morphologyfor Improving Outdoor Thermal Comfort and Susta...
Strategies of Urban Morphologyfor Improving Outdoor Thermal Comfort and Susta...amrabdallah9
 
A Seminar on Electric Vehicle Software Simulation
A Seminar on Electric Vehicle Software SimulationA Seminar on Electric Vehicle Software Simulation
A Seminar on Electric Vehicle Software SimulationMohsinKhanA
 
nvidia AI-gtc 2024 partial slide deck.pptx
nvidia AI-gtc 2024 partial slide deck.pptxnvidia AI-gtc 2024 partial slide deck.pptx
nvidia AI-gtc 2024 partial slide deck.pptxjasonsedano2
 
Modelling Guide for Timber Structures - FPInnovations
Modelling Guide for Timber Structures - FPInnovationsModelling Guide for Timber Structures - FPInnovations
Modelling Guide for Timber Structures - FPInnovationsYusuf Yıldız
 
UNIT4_ESD_wfffffggggggggggggith_ARM.pptx
UNIT4_ESD_wfffffggggggggggggith_ARM.pptxUNIT4_ESD_wfffffggggggggggggith_ARM.pptx
UNIT4_ESD_wfffffggggggggggggith_ARM.pptxrealme6igamerr
 
Clutches and brkesSelect any 3 position random motion out of real world and d...
Clutches and brkesSelect any 3 position random motion out of real world and d...Clutches and brkesSelect any 3 position random motion out of real world and d...
Clutches and brkesSelect any 3 position random motion out of real world and d...sahb78428
 

Recently uploaded (20)

Vertical- Machining - Center - VMC -LMW-Machine-Tool-Division.pptx
Vertical- Machining - Center - VMC -LMW-Machine-Tool-Division.pptxVertical- Machining - Center - VMC -LMW-Machine-Tool-Division.pptx
Vertical- Machining - Center - VMC -LMW-Machine-Tool-Division.pptx
 
SATELITE COMMUNICATION UNIT 1 CEC352 REGULATION 2021 PPT BASICS OF SATELITE ....
SATELITE COMMUNICATION UNIT 1 CEC352 REGULATION 2021 PPT BASICS OF SATELITE ....SATELITE COMMUNICATION UNIT 1 CEC352 REGULATION 2021 PPT BASICS OF SATELITE ....
SATELITE COMMUNICATION UNIT 1 CEC352 REGULATION 2021 PPT BASICS OF SATELITE ....
 
Litature Review: Research Paper work for Engineering
Litature Review: Research Paper work for EngineeringLitature Review: Research Paper work for Engineering
Litature Review: Research Paper work for Engineering
 
The relationship between iot and communication technology
The relationship between iot and communication technologyThe relationship between iot and communication technology
The relationship between iot and communication technology
 
Nodal seismic construction requirements.pptx
Nodal seismic construction requirements.pptxNodal seismic construction requirements.pptx
Nodal seismic construction requirements.pptx
 
Lecture 2 .pdf
Lecture 2                           .pdfLecture 2                           .pdf
Lecture 2 .pdf
 
sdfsadopkjpiosufoiasdoifjasldkjfl a asldkjflaskdjflkjsdsdf
sdfsadopkjpiosufoiasdoifjasldkjfl a asldkjflaskdjflkjsdsdfsdfsadopkjpiosufoiasdoifjasldkjfl a asldkjflaskdjflkjsdsdf
sdfsadopkjpiosufoiasdoifjasldkjfl a asldkjflaskdjflkjsdsdf
 
IT3401-WEB ESSENTIALS PRESENTATIONS.pptx
IT3401-WEB ESSENTIALS PRESENTATIONS.pptxIT3401-WEB ESSENTIALS PRESENTATIONS.pptx
IT3401-WEB ESSENTIALS PRESENTATIONS.pptx
 
Design of Clutches and Brakes in Design of Machine Elements.pptx
Design of Clutches and Brakes in Design of Machine Elements.pptxDesign of Clutches and Brakes in Design of Machine Elements.pptx
Design of Clutches and Brakes in Design of Machine Elements.pptx
 
me3493 manufacturing technology unit 1 Part A
me3493 manufacturing technology unit 1 Part Ame3493 manufacturing technology unit 1 Part A
me3493 manufacturing technology unit 1 Part A
 
Présentation IIRB 2024 Marine Cordonnier.pdf
Présentation IIRB 2024 Marine Cordonnier.pdfPrésentation IIRB 2024 Marine Cordonnier.pdf
Présentation IIRB 2024 Marine Cordonnier.pdf
 
Graphics Primitives and CG Display Devices
Graphics Primitives and CG Display DevicesGraphics Primitives and CG Display Devices
Graphics Primitives and CG Display Devices
 
Lecture 2 .pptx
Lecture 2                            .pptxLecture 2                            .pptx
Lecture 2 .pptx
 
Technology Features of Apollo HDD Machine, Its Technical Specification with C...
Technology Features of Apollo HDD Machine, Its Technical Specification with C...Technology Features of Apollo HDD Machine, Its Technical Specification with C...
Technology Features of Apollo HDD Machine, Its Technical Specification with C...
 
Strategies of Urban Morphologyfor Improving Outdoor Thermal Comfort and Susta...
Strategies of Urban Morphologyfor Improving Outdoor Thermal Comfort and Susta...Strategies of Urban Morphologyfor Improving Outdoor Thermal Comfort and Susta...
Strategies of Urban Morphologyfor Improving Outdoor Thermal Comfort and Susta...
 
A Seminar on Electric Vehicle Software Simulation
A Seminar on Electric Vehicle Software SimulationA Seminar on Electric Vehicle Software Simulation
A Seminar on Electric Vehicle Software Simulation
 
nvidia AI-gtc 2024 partial slide deck.pptx
nvidia AI-gtc 2024 partial slide deck.pptxnvidia AI-gtc 2024 partial slide deck.pptx
nvidia AI-gtc 2024 partial slide deck.pptx
 
Modelling Guide for Timber Structures - FPInnovations
Modelling Guide for Timber Structures - FPInnovationsModelling Guide for Timber Structures - FPInnovations
Modelling Guide for Timber Structures - FPInnovations
 
UNIT4_ESD_wfffffggggggggggggith_ARM.pptx
UNIT4_ESD_wfffffggggggggggggith_ARM.pptxUNIT4_ESD_wfffffggggggggggggith_ARM.pptx
UNIT4_ESD_wfffffggggggggggggith_ARM.pptx
 
Clutches and brkesSelect any 3 position random motion out of real world and d...
Clutches and brkesSelect any 3 position random motion out of real world and d...Clutches and brkesSelect any 3 position random motion out of real world and d...
Clutches and brkesSelect any 3 position random motion out of real world and d...
 

Monitoring for the masses

  • 1. Monitoring  for  the  masses   Rodrigo  Fernandez   HTML5DevConf  2015  
  • 3. To  be  aware  of  the  state  of  a   system  and  observe  any  changes   which  may  occur  over  Cme  
  • 4. Why  should  we  monitor?  
  • 5. Our  responsibility  shouldn’t   end  in  a  commit  
  • 6. Users   Product   Owner   Developer   System   Admin   Code   Infrastructure  
  • 7. How  can  we  monitor?  
  • 8. Easy!  We  simply  instrument  our   applicaCon  and  stream  events   data  to  a  trending  system  for   analysis,  correlaAon  and  anomaly   detecAon.  
  • 9. app   server   messenger   tsdb   analyAcs  
  • 13. var Circle = function (radius) {! if (radius <= 0) {! throw new RangeError('Radius must be greater than zero!');! }! this.radius = radius;! };! ! Circle.prototype.perimeter = function () {! return 2 * Math.PI * this.radius;! };! ! Circle.prototype.area = function () {! return Math.PI * Math.pow(this.radius, 2);! };  
  • 14. var start = Date.now();! ! var circle = new Circle(1);! circle.perimeter();! circle.area();! ! Date.now() - start;  
  • 15. var start = Date.now();! ! var circle = new Circle(1);! circle.perimeter();! circle.area();! ! Date.now() - start; // 0  
  • 16. var start = performance.now();! ! var circle = new Circle(1);! circle.perimeter();! circle.area();! ! performance.now() - start;  
  • 17. var start = performance.now();! ! var circle = new Circle(1);! circle.perimeter();! circle.area();! ! performance.now() - start; // 0.1449999999999818  
  • 19. -performance.now() + performance.now(); // 0.009999999999990905  
  • 23. performance.timing;! ! {! "navigationStart": 1444712367243,! "unloadEventStart": 0,! "unloadEventEnd": 0,! "redirectStart": 0,! "redirectEnd": 0,! "fetchStart": 1444712367504,! "domainLookupStart": 1444712367507,! "domainLookupEnd": 1444712367538,! "connectStart": 1444712367538,! "connectEnd": 1444712367616,! "secureConnectionStart": 0,! "requestStart": 1444712367616,! "responseStart": 1444712367866,! "responseEnd": 1444712367954,! "domLoading": 1444712367867,! "domInteractive": 1444712368966,! "domContentLoadedEventStart": 1444712368966,! "domContentLoadedEventEnd": 1444712369180,! "domComplete": 1444712376251,! "loadEventStart": 1444712376251,! "loadEventEnd": 1444712376891! }  
  • 26. performance.getEntriesByType('resource');! ! {! "connectEnd": 0,! "connectStart": 0,! "domainLookupEnd": 0,! "domainLookupStart": 0,! "duration": 380.53100000252016,! "entryType": "resource",! "fetchStart": 661.7220000043744,! "initiatorType": "link",! "name": "https://lorem.ipsum.dolor/sit/amet.css",! "redirectEnd": 0,! "redirectStart": 0,! "requestStart": 0,! "responseEnd": 1042.2530000068946,! "responseStart": 0,! "secureConnectionStart": 0,! "startTime": 661.7220000043744! }!
  • 32. var circle = new Circle(1);! ! performance.mark(’p:before');! ! circle.perimeter();! ! performance.mark(’p:after');! ! performance.measure(’p', ’p:before', ’p:after');! ! performance.getEntriesByType('measure');  
  • 33. {! "name": "p",! "entryType": "measure",! "startTime": 31442.615000000005,! "duration": 0.09000000000014552! }  
  • 36. window.addEventListener('unload', function () {! ! var entries = performance.getEntries();! ! navigator.sendBeacon('/phone/home', JSON.stringify(entries));! ! });  
  • 38. Polyfills  (modernizr.com)   High  ResoluAon  Time   hVps://gist.github.com/paulirish/5438650   NavigaAon  Timing   -­‐   Resource  Timing   -­‐   User  Timing   hVps://github.com/nicjansma/userCming.js   Page  Visibility   hVps://github.com/ai/visibility.js   hVps://github.com/addyosmani/visibly.js   hVps://github.com/mathiasbynens/jquery-­‐visibility   Beacon   hVps://github.com/miguelmota/Navigator.sendBeacon  
  • 39. Why  the  obsession  with   Amings  and  duraAons?  
  • 40. Doherty  &  Thadani  (1982)   150   200   250   300   350   400   0.0   0.5   1.0   1.5   2.0   2.5   3.0   TransacAons  per  Hour   System  Response  Time  (Seconds)  
  • 42. var Circle = function (radius) {! if (radius <= 0) {! throw new RangeError('Radius must be greater than zero!');! }! this.radius = radius;! };! ! Circle.prototype.perimeter = function () {! return 2 * Math.PI * this.radius;! };! ! Circle.prototype.area = function () {! return Math.PI * Math.pow(this.radius, 2);! };  
  • 43. meld.before(Circle.prototype, 'perimeter', function () {! performance.mark('Circle.perimeter:before');! });! ! meld.after(Circle.prototype, 'perimeter', function () {! performance.mark('Circle.perimeter:after');! performance.measure('Circle.perimeter', 'Circle.perimeter:before',! 'Circle.perimeter:after');! });  
  • 44. var c1 = new Circle(1);! c1.perimeter();! ! var c2 = new Circle(2);! c2.perimeter();!
  • 45. performance.getEntriesByName('Circle.perimeter');! ! ! [! {! "name": "Circle.perimeter",! "entryType": "measure",! "startTime": 16.725,! "duration": 0.11499999999999844! },! {! "name": "Circle.perimeter",! "entryType": "measure",! "startTime": 16.89,! "duration": 0.015000000000000568! }! ]!
  • 47. let duration = function (target, name, descriptor) {! let {value} = descriptor;! let tag = `${target.constructor.name}.${name}`;! let before = `${tag}:before`;! let after = `${tag}:after`;! ! descriptor.value = function(){! performance.mark(before);! let result = value.call(this, ...arguments);! performance.mark(after);! performance.measure(tag, before, after);! return result;! };! };!
  • 48. class Circle {! constructor(radius) {! if (radius <= 0) {! throw new RangeError('Radius must be greater than zero!');! }! this.radius = radius;! }! ! @duration! perimeter() {! return 2 * Math.PI * this.radius;! }! ! @duration! area() {! return Math.PI * Math.pow(this.radius, 2);! }! }!
  • 49. let c1 = new Circle(1);! let p1 = c1.perimeter();! let a1 = c1.area();! ! ! let c2 = new Circle(2);! let p2 = c2.perimeter();! let a2 = c2.area();! ! ! performance.getEntriesByType('measure');!
  • 50. [! {! "name": "Circle.perimeter",! "entryType": "measure",! "startTime": 8.280000000000001,! "duration": 0.05999999999999872! },! {! "name": "Circle.area",! "entryType": "measure",! "startTime": 8.360000000000001,! "duration": 0.10499999999999865! },! {! "name": "Circle.perimeter",! "entryType": "measure",! "startTime": 8.5,! "duration": 0.015000000000000568! },! {! "name": "Circle.area",! "entryType": "measure",! "startTime": 8.525,! "duration": 0.005000000000000782! }! ]!
  • 51. app   server   messenger   tsdb   analyAcs  

Editor's Notes

  1. Uptime? Resources consumed on servers and the browser? Error rate? How heathy is the code we ship? Developers are a mixture of scientists, engineers and craftsman. What devices and browsers they use? How long they have to wait to see and interact with the content? How they use our site or application?
  2. Web Performance Working Group: to provide methods to measure aspects of application performance of user agent features and API
  3. Sub-millisecond precision Monotonically non-decreasing