feat(rum-core): align breakdown types based on navigation timing (#464)

* feat(rum-core): align brekdown types based on navigation timing * use new nav entry and update tests * add dummy value to domcontentloaded
elastic · Oct 30, 2019 · 61ed16b · 61ed16b
1 parent 6718c28
commit 61ed16b
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 35 deletions.
diff --git a/packages/rum-core/src/performance-monitoring/breakdown.js b/packages/rum-core/src/performance-monitoring/breakdown.js
@@ -32,9 +32,12 @@ import { PAGE_LOAD } from '../common/constants'
  * Interested events from the Navigation timing API
  */
 const pageLoadBreakdowns = [
-  ['fetchStart', 'responseEnd', 'Network'],
-  ['domLoading', 'domInteractive', 'DOM Processing'],
-  ['domInteractive', 'loadEventEnd', 'Page Render']
+  ['domainLookupStart', 'domainLookupEnd', 'DNS'],
+  ['connectStart', 'connectEnd', 'TCP'],
+  ['requestStart', 'responseStart', 'Request'],
+  ['responseStart', 'responseEnd', 'Response'],
+  ['domLoading', 'domComplete', 'Processing'],
+  ['loadEventStart', 'loadEventEnd', 'Load']
 ]
 
 function getValue(value) {

diff --git a/packages/rum-core/test/fixtures/navigation-entries.js b/packages/rum-core/test/fixtures/navigation-entries.js
@@ -24,27 +24,27 @@
  */
 
 export const TIMING_LEVEL1_ENTRY = {
-  navigationStart: 1528373292350,
-  unloadEventStart: 1528373293147,
-  unloadEventEnd: 1528373293147,
+  navigationStart: 1572362095174,
+  unloadEventStart: 0,
+  unloadEventEnd: 0,
   redirectStart: 0,
   redirectEnd: 0,
-  fetchStart: 1528373292356,
-  domainLookupStart: 1528373292356,
-  domainLookupEnd: 1528373292356,
-  connectStart: 1528373292356,
-  connectEnd: 1528373292356,
-  secureConnectionStart: 0,
-  requestStart: 1528373292363,
-  responseStart: 1528373293142,
-  responseEnd: 1528373293303,
-  domLoading: 1528373293176,
-  domInteractive: 1528373293820,
-  domContentLoadedEventStart: 1528373293820,
-  domContentLoadedEventEnd: 1528373293854,
-  domComplete: 1528373295207,
-  loadEventStart: 1528373295208,
-  loadEventEnd: 1528373295230
+  fetchStart: 1572362095181,
+  domainLookupStart: 1572362095182,
+  domainLookupEnd: 1572362095201,
+  connectStart: 1572362095201,
+  connectEnd: 1572362095269,
+  secureConnectionStart: 1572362095229,
+  requestStart: 1572362095270,
+  responseStart: 1572362095320,
+  responseEnd: 1572362095390,
+  domLoading: 1572362095346,
+  domInteractive: 1572362095723,
+  domContentLoadedEventStart: 1572362095815,
+  domContentLoadedEventEnd: 1572362095835,
+  domComplete: 1572362096143,
+  loadEventStart: 1572362096143,
+  loadEventEnd: 1572362096145
 }
 
 export const TIMING_LEVEL2_ENTRIES = [

diff --git a/packages/rum-core/test/performance-monitoring/breakdown.spec.js b/packages/rum-core/test/performance-monitoring/breakdown.spec.js
@@ -64,7 +64,14 @@ describe('Breakdown metrics', () => {
     const pageLoadTransaction = createTransaction(PAGE_LOAD)
     pageLoadTransaction.end()
     const breakdown = captureBreakdown(pageLoadTransaction, TIMING_LEVEL1_ENTRY)
-    const spanTypes = ['Network', 'DOM Processing', 'Page Render']
+    const spanTypes = [
+      'DNS',
+      'TCP',
+      'Request',
+      'Response',
+      'Processing',
+      'Load'
+    ]
 
     const spans = breakdown.slice(1)
 

diff --git a/packages/rum-core/test/performance-monitoring/capture-navigation.spec.js b/packages/rum-core/test/performance-monitoring/capture-navigation.spec.js
@@ -59,14 +59,16 @@ describe('Capture hard navigation', function() {
     )
 
     expect(spans.map(mapSpan)).toEqual([
-      { name: 'Requesting and receiving the document', _end: 947, _start: 7 },
+      { name: 'Domain lookup', _end: 20, _start: 1 },
+      { name: 'Making a connection to the server', _end: 88, _start: 20 },
+      { name: 'Requesting and receiving the document', _end: 209, _start: 89 },
       {
         name: 'Parsing the document, executing sync. scripts',
-        _end: 1464,
-        _start: 820
+        _end: 542,
+        _start: 165
       },
-      { name: 'Fire "DOMContentLoaded" event', _end: 1498, _start: 1464 },
-      { name: 'Fire "load" event', _end: 2874, _start: 2852 }
+      { name: 'Fire "DOMContentLoaded" event', _end: 654, _start: 634 },
+      { name: 'Fire "load" event', _end: 964, _start: 962 }
     ])
 
     const fetchStartValues = [undefined, null, Number(new Date()), 0, 1]
@@ -93,13 +95,15 @@ describe('Capture hard navigation', function() {
         transactionEnd
       )
       expect(spans.map(mapSpan)).toEqual([
+        { name: 'Domain lookup', _end: 20, _start: 1 },
+        { name: 'Making a connection to the server', _end: 88, _start: 20 },
         {
           name: 'Parsing the document, executing sync. scripts',
-          _end: 1464,
-          _start: 820
+          _end: 542,
+          _start: 165
         },
-        { name: 'Fire "DOMContentLoaded" event', _end: 1498, _start: 1464 },
-        { name: 'Fire "load" event', _end: 2874, _start: 2852 }
+        { name: 'Fire "DOMContentLoaded" event', _end: 654, _start: 634 },
+        { name: 'Fire "load" event', _end: 964, _start: 962 }
       ])
     }
 
@@ -118,8 +122,10 @@ describe('Capture hard navigation', function() {
         transactionEnd
       )
       expect(spans.map(mapSpan)).toEqual([
-        { name: 'Fire "DOMContentLoaded" event', _end: 1498, _start: 1464 },
-        { name: 'Fire "load" event', _end: 2874, _start: 2852 }
+        { name: 'Domain lookup', _end: 20, _start: 1 },
+        { name: 'Making a connection to the server', _end: 88, _start: 20 },
+        { name: 'Fire "DOMContentLoaded" event', _end: 654, _start: 634 },
+        { name: 'Fire "load" event', _end: 964, _start: 962 }
       ])
     }
 
@@ -137,7 +143,9 @@ describe('Capture hard navigation', function() {
       transactionEnd
     )
     expect(spans.map(mapSpan)).toEqual([
-      { name: 'Fire "load" event', _end: 2874, _start: 2852 }
+      { name: 'Domain lookup', _end: 20, _start: 1 },
+      { name: 'Making a connection to the server', _end: 88, _start: 20 },
+      { name: 'Fire "load" event', _end: 964, _start: 962 }
     ])
   })