Metrics for page resources

README.md

@@ -45,6 +45,7 @@ Metrics are gathered in the format used by a statsd / graphite / grafana stack -
 * PageChange - When the page loads, or whenever a navigation event occurs, we log a counter for the page visit and a gauge for how long the page load took. The page load is a measure of the time between the navigation event firing, the event loop lagging for over 25ms and finally the event loop freeing up for 125ms. Basically we wait for the page to get busy, then we wait for it to finish being busy.
 * PageLoad - We use `window.performance` to get details of the initial page load.
 * XhrStats - We monkey-patch over `XMLHttpRequest` in order to identify every AJAX request, the destination, the transition between states, final response size and timing.
+* PageResources - `connectEnd`, `connectStart`, `domainLookupEnd`, `domainLookupStart`, `duration`, `fetchStart`, `redirectEnd`, `redirectStart`, `requestStart`, `responseEnd`, `responseStart`, `secureConnectionStart`, `startTime`, `workerStart`.
 
 ### How are the metrics transmitted?
 

lib/barometer.js

@@ -6,6 +6,7 @@ var transport = require('./transport.js')
 require('./pageLoadStats.js')
 require('./xhrStats.js')
 require('./pageChange')
+require('./pageResources')
 
 tracker.url = null
 tracker.gauge = transport.gauge

lib/pageResources.js

@@ -0,0 +1,52 @@
+/* global window */
+'use strict'
+var pageResources = module.exports = {}
+
+var pageChange = require('./pageChange.js')
+var transport = require('./transport.js')
+var lastIndex
+var timingOffset = 0
+var pageStart = new Date()
+
+pageChange.onPageChange(function () {
+  timingOffset = (new Date() - pageStart)
+  var entries = window.performance.getEntries()
+  for (; lastIndex++; lastIndex < entries.length) {
+    pageResources.handleResource(entries[lastIndex])
+  }
+})
+
+pageResources.handleResource = function (entry) {
+  var metrics = pageResources.findRule(entry)
+  if (!metrics) return
+  pageResources.track(entry, metrics)
+}
+
+pageResources.findRule = function (entry) {
+  var config = window.barometer.resources
+  if (!config) return
+
+  var name = entry.name.replace(/https?:\/\//i, '').split('/')
+  var domain = name.shift()
+  var path = name.join('/')
+
+  for (var i = 0; i < config.length; i++) {
+    var rule = config[i]
+    if (rule.domain && !domain.match(rule.domain)) continue
+    if (rule.resourceRegex && !path.match(rule.resourceRegex)) continue
+    if (rule.type && entry.entryType !== rule.type) continue
+    return rule.metrics
+  }
+  return null
+}
+
+pageResources.track = function (entry, metrics) {
+  var prefix = entry.name.replace(/https?:\/\//i, '').split('?')[0].replace(/[a-z0-9_]/gi, '_')
+
+  for (var i in metrics) {
+    var value = entry[i]
+    if (value === 0) continue
+    if (i !== 'duration') value = timingOffset - value
+    transport.gauge(prefix + '.' + i, value)
+  }
+}