@elastic/synthetics 1.0.0-beta.44 → 1.0.0-beta.46

package/src/plugins/network.ts

@@ -38,6 +38,22 @@ function epochTimeInSeconds() {
   return getTimestamp() / 1e6;
 }
 
+/**
+ * Find the first positive number in an array for Resource timing data
+ */
+const firstPositive = (numbers: number[]) => {
+  for (let i = 0; i < numbers.length; ++i) {
+    if (numbers[i] > 0) {
+      return numbers[i];
+    }
+  }
+  return null;
+};
+
+const roundMilliSecs = (value: number): number => {
+  return Math.floor(value * 1000) / 1000;
+};
+
 /**
  * Used as a key in each Network Request to identify the
  * associated request across distinct lifecycle events
@@ -83,7 +99,6 @@ export class NetworkManager {
     const { product } = await client.send('Browser.getVersion');
     const [name, version] = product.split('/');
     this._browser = { name, version };
-    await client.send('Network.enable');
     /**
      * Listen for all network events from PW context
      */
@@ -135,7 +150,16 @@ export class NetworkManager {
       responseReceivedTime: -1,
       resourceSize: 0,
       transferSize: 0,
-      timings: null,
+      timings: {
+        blocked: -1,
+        dns: -1,
+        ssl: -1,
+        connect: -1,
+        send: -1,
+        wait: -1,
+        receive: -1,
+        total: -1,
+      },
     };
 
     if (request.redirectedFrom()) {
@@ -162,6 +186,46 @@ export class NetworkManager {
       redirectURL: networkEntry.response.redirectURL,
     };
 
+    // Gather all resource timing information up until the
+    // TTFB(Time to first byte) is received
+    const timing = request.timing();
+    const blocked =
+      roundMilliSecs(
+        firstPositive([
+          timing.domainLookupStart,
+          timing.connectStart,
+          timing.requestStart,
+        ])
+      ) || -1;
+    const dns =
+      timing.domainLookupEnd !== -1
+        ? roundMilliSecs(timing.domainLookupEnd - timing.domainLookupStart)
+        : -1;
+    const connect =
+      timing.connectEnd !== -1
+        ? roundMilliSecs(timing.connectEnd - timing.connectStart)
+        : -1;
+    const ssl =
+      timing.secureConnectionStart !== -1
+        ? roundMilliSecs(timing.connectEnd - timing.secureConnectionStart)
+        : -1;
+    const wait =
+      timing.responseStart !== -1
+        ? roundMilliSecs(timing.responseStart - timing.requestStart)
+        : -1;
+
+    networkEntry.timings = {
+      blocked,
+      dns,
+      ssl,
+      connect,
+      send: 0, // not exposed via RT api
+      wait,
+      receive: -1, // will be available after full response is received
+      total: -1,
+    };
+    this._calcTotalTime(networkEntry, timing);
+
     const page = request.frame().page();
     this._addBarrier(
       page,
@@ -200,83 +264,21 @@ export class NetworkManager {
     if (!networkEntry) return;
 
     networkEntry.loadEndTime = epochTimeInSeconds();
+    // responseEnd is fired after the last byte of the response is received.
     const timing = request.timing();
-    const { loadEndTime, requestSentTime } = networkEntry;
-    networkEntry.timings = {
-      blocked: -1,
-      dns: -1,
-      ssl: -1,
-      connect: -1,
-      send: -1,
-      wait: -1,
-      receive: -1,
-      total: -1,
-    };
-
-    const firstPositive = (numbers: number[]) => {
-      for (let i = 0; i < numbers.length; ++i) {
-        if (numbers[i] > 0) {
-          return numbers[i];
-        }
-      }
-      return null;
-    };
-    const roundMilliSecs = (value: number): number => {
-      return Math.floor(value * 1000) / 1000;
-    };
-
-    if (timing.startTime === 0) {
-      // Convert to milliseconds before round off
-      const total = roundMilliSecs((loadEndTime - requestSentTime) * 1000);
-      networkEntry.timings.total = total;
-      return;
-    }
-
-    const blocked =
-      roundMilliSecs(
-        firstPositive([
-          timing.domainLookupStart,
-          timing.connectStart,
-          timing.requestStart,
-        ])
-      ) || -1;
-    const dns =
-      timing.domainLookupEnd !== -1
-        ? roundMilliSecs(timing.domainLookupEnd - timing.domainLookupStart)
-        : -1;
-    const connect =
-      timing.connectEnd !== -1
-        ? roundMilliSecs(timing.connectEnd - timing.connectStart)
-        : -1;
-    const ssl =
-      timing.secureConnectionStart !== -1
-        ? roundMilliSecs(timing.connectEnd - timing.secureConnectionStart)
-        : -1;
-    const wait =
-      timing.responseStart !== -1
-        ? roundMilliSecs(timing.responseStart - timing.requestStart)
-        : -1;
     const receive =
       timing.responseEnd !== -1
         ? roundMilliSecs(timing.responseEnd - timing.responseStart)
         : -1;
-    const total = [blocked, dns, connect, wait, receive].reduce(
-      (pre, cur) => (cur > 0 ? cur + pre : pre),
-      0
-    );
-    networkEntry.timings = {
-      blocked,
-      dns,
-      connect,
-      ssl,
-      wait,
-      send: 0, // not exposed via RT api
-      receive,
-      total,
-    };
+    networkEntry.timings.receive = receive;
+    this._calcTotalTime(networkEntry, timing);
 
-    const page = request.frame().page();
     // For aborted/failed requests sizes will not be present
+    if (timing.startTime <= 0) {
+      return;
+    }
+
+    const page = request.frame().page();
     this._addBarrier(
       page,
       request.sizes().then(sizes => {
@@ -295,6 +297,35 @@ export class NetworkManager {
     );
   }
 
+  /**
+   * Calculates the total time for the network request based on the ResourceTiming
+   * data from Playwright. Fallbacks to the event timings if ResourceTiming data
+   * is not available.
+   */
+  private _calcTotalTime(
+    entry: NetworkInfo,
+    rtiming: ReturnType<Request['timing']>
+  ) {
+    const timings = entry.timings;
+    entry.timings.total = [
+      timings.blocked,
+      timings.dns,
+      timings.connect,
+      timings.wait,
+      timings.receive,
+    ].reduce((pre, cur) => ((cur || -1) > 0 ? cur + pre : pre), 0);
+
+    // fallback when ResourceTiming data is not available
+    if (rtiming.startTime <= 0) {
+      const end =
+        entry.loadEndTime ||
+        entry.responseReceivedTime ||
+        entry.requestSentTime;
+      const total = roundMilliSecs((end - entry.requestSentTime) * 1000);
+      entry.timings.total = total <= 0 ? -1 : total;
+    }
+  }
+
   async stop() {
     /**
      * Waiting for all network events is error prone and might hang the tests

package/src/push/index.ts

@@ -42,6 +42,7 @@ import {
   indent,
   done,
   getMonitorManagementURL,
+  THROTTLING_WARNING_MSG,
 } from '../helpers';
 import type { PushOptions, ProjectSettings } from '../common_types';
 import { findSyntheticsConfig, readConfig } from '../config';
@@ -280,3 +281,11 @@ export async function pushLegacy(
 
   done(`Pushed: ${grey(getMonitorManagementURL(options.url))}`);
 }
+
+// prints warning if any of the monitors has throttling settings enabled during push
+export function warnIfThrottled(monitors: Monitor[]) {
+  const throttled = monitors.some(monitor => monitor.config.throttling != null);
+  if (throttled) {
+    warn(THROTTLING_WARNING_MSG);
+  }
+}