@elastic/synthetics 1.0.0-beta.8 → 1.0.0

package/src/plugins/network.ts

@@ -23,343 +23,325 @@
  *
  */
 
-import { CDPSession } from 'playwright-chromium';
-import { Protocol } from 'playwright-chromium/types/protocol';
-import { NetworkInfo, BrowserInfo } from '../common_types';
+import { Page, Request, Response } from 'playwright-chromium';
+import { NetworkInfo, BrowserInfo, Driver } from '../common_types';
+import { log } from '../core/logger';
 import { Step } from '../dsl';
 import { getTimestamp } from '../helpers';
 
+/**
+ * Kibana UI expects the requestStartTime and loadEndTime to be baseline
+ * in seconds as they have the logic to convert it to milliseconds before
+ * using for offset calculation
+ */
+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
+ */
+export const NETWORK_ENTRY_SUMBOL = Symbol.for('NetworkEntry');
+
+type RequestWithEntry = Request & {
+  NETWORK_ENTRY_SUMBOL?: symbol;
+};
+
 export class NetworkManager {
   private _browser: BrowserInfo;
-  private _InflightRequestMap = new Map<string, NetworkInfo>();
+  private _barrierPromises = new Set<Promise<void>>();
   results: Array<NetworkInfo> = [];
   _currentStep: Partial<Step> = null;
 
-  async start(client: CDPSession) {
+  constructor(private driver: Driver) {}
+
+  /**
+   * Adds a protection barrier aganist all asynchronous extract operations from
+   * request/response object that are happening during page lifecycle, If the
+   * page is closed during the extraction, the barrier enforces those operations
+   * to not result in exception
+   */
+  private _addBarrier(page: Page, promise: Promise<void>) {
+    if (!page) return;
+    const race = Promise.race([
+      new Promise<void>(resolve =>
+        page.on('close', () => {
+          this._barrierPromises.delete(race);
+          resolve();
+        })
+      ),
+      promise,
+    ]);
+    this._barrierPromises.add(race);
+    race.then(() => this._barrierPromises.delete(race));
+  }
+
+  async start() {
+    log(`Plugins: started collecting network events`);
+    const { client, context } = this.driver;
     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
+     * Listen for all network events from PW context
      */
-    client.on(
-      'Network.requestWillBeSent',
-      this._onRequestWillBeSent.bind(this)
-    );
-    client.on(
-      'Network.requestWillBeSentExtraInfo',
-      this._onRequestWillBeSentExtraInfo.bind(this)
-    );
-    client.on('Network.dataReceived', this._onDataReceived.bind(this));
-    client.on('Network.responseReceived', this._onResponseReceived.bind(this));
-    client.on('Network.loadingFinished', this._onLoadingFinished.bind(this));
-    client.on('Network.loadingFailed', this._onLoadingFailed.bind(this));
+    context.on('request', this._onRequest.bind(this));
+    context.on('response', this._onResponse.bind(this));
+    context.on('requestfinished', this._onRequestCompleted.bind(this));
+    context.on('requestfailed', this._onRequestCompleted.bind(this));
   }
 
-  _findNetworkRecord(requestId: string) {
-    return this._InflightRequestMap.get(requestId);
+  private _findNetworkEntry(
+    request: RequestWithEntry
+  ): NetworkInfo | undefined {
+    return request[NETWORK_ENTRY_SUMBOL];
   }
 
-  _onRequestWillBeSent(event: Protocol.Network.requestWillBeSentPayload) {
-    const { requestId, request, timestamp, type, loaderId } = event;
-    const { url, method } = request;
+  private _onRequest(request: Request) {
+    const url = request.url();
     /**
      * Data URI should not show up as network requests
      */
     if (url.startsWith('data:')) {
       return;
     }
-    const isNavigationRequest = requestId == loaderId && type === 'Document';
-    const record = this._findNetworkRecord(requestId);
-    /**
-     * On redirects, another `requestWillBeSent` event will be fired for the
-     * same requestId. We calculate the timings for the redirect request using
-     * the `redirectedResponse` from the redirected request.
-     */
-    if (record) {
-      if (event.redirectResponse) {
-        const response = event.redirectResponse;
-        const data = Object.assign(event, {
-          type: event.type,
-          response,
-          encodedDataLength: response.encodedDataLength,
-        });
-        this._onResponseReceived(data);
-        this._onLoadingFinished(data);
-      } else {
-        /**
-         * Edge case, we handle it to proceed with next navigation
-         */
-        this._onLoadingFailed(
-          Object.assign(event, {
-            type: event.type,
-            errorText: 'redirectResponse data is not available',
-          })
-        );
-      }
-      const redirectedRecord = this._findNetworkRecord(requestId);
-      /**
-       * Rewrite the map with new redirect id to not reset
-       * the redirect request with original request
-       */
-      this._InflightRequestMap.delete(requestId);
-      this._InflightRequestMap.set(
-        `redirect:${timestamp}:${requestId}`,
-        redirectedRecord
-      );
-    }
 
-    this._InflightRequestMap.set(requestId, {
+    const timestamp = getTimestamp();
+    const networkEntry: NetworkInfo = {
       browser: this._browser,
       step: this._currentStep,
-      timestamp: getTimestamp(),
+      timestamp,
       url,
-      request,
-      type,
-      method,
-      requestSentTime: timestamp,
-      isNavigationRequest,
-      status: 0,
+      type: request.resourceType(),
+      request: {
+        url,
+        method: request.method(),
+        headers: request.headers(),
+        body: {
+          bytes: request.postDataBuffer()?.length || 0,
+        },
+      },
+      response: {
+        status: -1,
+        headers: {},
+        mimeType: 'x-unknown',
+        redirectURL: '',
+      },
+      isNavigationRequest: request.isNavigationRequest(),
+      requestSentTime: epochTimeInSeconds(),
       loadEndTime: -1,
       responseReceivedTime: -1,
-      response: null,
       resourceSize: 0,
       transferSize: 0,
-      timings: null,
-    });
-  }
-
-  _onRequestWillBeSentExtraInfo(
-    event: Protocol.Network.requestWillBeSentExtraInfoPayload
-  ) {
-    const { requestId, headers } = event;
-    const record = this._findNetworkRecord(requestId);
-    if (!record) {
-      return;
-    }
-    /**
-     * Enhance request headers with additional information
-     */
-    record.request.headers = {
-      ...record.request.headers,
-      ...headers,
+      timings: {
+        blocked: -1,
+        dns: -1,
+        ssl: -1,
+        connect: -1,
+        send: -1,
+        wait: -1,
+        receive: -1,
+        total: -1,
+      },
     };
-  }
 
-  _onDataReceived(event: Protocol.Network.dataReceivedPayload) {
-    const { requestId, dataLength, encodedDataLength } = event;
-    const record = this._findNetworkRecord(requestId);
-    if (!record) {
-      return;
+    if (request.redirectedFrom()) {
+      const fromEntry = this._findNetworkEntry(request.redirectedFrom());
+      if (fromEntry) fromEntry.response.redirectURL = request.url();
     }
-    record.resourceSize += dataLength;
-    if (encodedDataLength >= 0) record.transferSize += encodedDataLength;
-  }
 
-  _onResponseReceived(event: Protocol.Network.responseReceivedPayload) {
-    const { requestId, response, timestamp } = event;
-    const record = this._findNetworkRecord(requestId);
-    if (!record) {
-      return;
-    }
-    Object.assign(record, {
-      status: response.status,
-      response,
-      responseReceivedTime: timestamp,
-      transferSize: response.encodedDataLength,
-    });
+    request[NETWORK_ENTRY_SUMBOL] = networkEntry;
+    this.results.push(networkEntry);
   }
 
-  _onLoadingFinished(event: Protocol.Network.loadingFinishedPayload) {
-    const { requestId, timestamp, encodedDataLength } = event;
-    this._requestCompleted(requestId, timestamp, encodedDataLength);
-  }
+  private async _onResponse(response: Response) {
+    const request = response.request();
+    const networkEntry = this._findNetworkEntry(request);
+    if (!networkEntry) return;
+
+    networkEntry.responseReceivedTime = epochTimeInSeconds();
+    networkEntry.response = {
+      url: response.url(),
+      status: response.status(),
+      statusText: response.statusText(),
+      headers: {},
+      mimeType: 'x-unknown',
+      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;
 
-  _onLoadingFailed(event: Protocol.Network.loadingFailedPayload) {
-    const { requestId, timestamp } = event;
-    this._requestCompleted(requestId, timestamp);
+    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,
+      request.allHeaders().then(reqHeaders => {
+        networkEntry.request.headers = reqHeaders;
+        networkEntry.request.referrer = reqHeaders?.referer;
+      })
+    );
+    this._addBarrier(
+      page,
+      response.allHeaders().then(resHeaders => {
+        networkEntry.response.headers = resHeaders;
+
+        const contentType = resHeaders['content-type'];
+        if (contentType)
+          networkEntry.response.mimeType = contentType.split(';')[0];
+      })
+    );
+    this._addBarrier(
+      page,
+      response.serverAddr().then(server => {
+        networkEntry.response.remoteIPAddress = server?.ipAddress;
+        networkEntry.response.remotePort = server?.port;
+      })
+    );
+    this._addBarrier(
+      page,
+      response.securityDetails().then(details => {
+        if (details) networkEntry.response.securityDetails = details;
+      })
+    );
   }
 
-  _requestCompleted(
-    requestId: string,
-    endTime: number,
-    encodedDataLength?: number
-  ) {
-    const record = this._findNetworkRecord(requestId);
-    if (!record) {
+  private async _onRequestCompleted(request: Request) {
+    const networkEntry = this._findNetworkEntry(request);
+    if (!networkEntry) return;
+
+    networkEntry.loadEndTime = epochTimeInSeconds();
+    // responseEnd is fired after the last byte of the response is received.
+    const timing = request.timing();
+    const receive =
+      timing.responseEnd !== -1
+        ? roundMilliSecs(timing.responseEnd - timing.responseStart)
+        : -1;
+    networkEntry.timings.receive = receive;
+    this._calcTotalTime(networkEntry, timing);
+
+    // For aborted/failed requests sizes will not be present
+    if (timing.startTime <= 0) {
       return;
     }
-    if (encodedDataLength >= 0) {
-      record.transferSize = encodedDataLength;
-    }
-    record.loadEndTime = endTime;
-    record.timings = this.calculateTimings(record);
-    this.results.push(record);
-    /**
-     * When there is DNS failure, browsers keeps retrying requests which
-     * might result in incorrect timings so we get remove them to measure only once
-     */
-    this._InflightRequestMap.delete(requestId);
+
+    const page = request.frame().page();
+    this._addBarrier(
+      page,
+      request.sizes().then(sizes => {
+        networkEntry.request.bytes =
+          sizes.requestHeadersSize + sizes.requestBodySize;
+        networkEntry.request.body = {
+          bytes: sizes.requestBodySize,
+        };
+        const transferSize = sizes.responseHeadersSize + sizes.responseBodySize;
+        networkEntry.transferSize = transferSize;
+        networkEntry.response.bytes = transferSize;
+        networkEntry.response.body = {
+          bytes: sizes.responseBodySize,
+        };
+      })
+    );
   }
 
   /**
-   * Account for missing response received event and also adjust the
-   * response received event based on when first byte event was recorded
+   * 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.
    */
-  getResponseReceivedTime(
-    timing: Protocol.Network.Response['timing'],
-    responseReceivedTime: number
+  private _calcTotalTime(
+    entry: NetworkInfo,
+    rtiming: ReturnType<Request['timing']>
   ) {
-    if (timing == null) {
-      return responseReceivedTime;
-    }
-    const startTime = timing.requestTime;
-    const headersReceivedTime = startTime + timing.receiveHeadersEnd / 1000;
-    if (
-      responseReceivedTime < 0 ||
-      responseReceivedTime > headersReceivedTime
-    ) {
-      responseReceivedTime = headersReceivedTime;
-    }
-    if (startTime > responseReceivedTime) {
-      responseReceivedTime = startTime;
+    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;
     }
-    return responseReceivedTime;
   }
 
-  /**
-   * The timing calculations are based on the chrome devtools frontend
-   * https://github.com/ChromeDevTools/devtools-frontend/blob/7f5478d8ceb7586f23f4073ab5c2085dac1ec26a/front_end/network/RequestTimingView.js#L98-L193
-   */
-  calculateTimings(record: NetworkInfo) {
-    const result: NetworkInfo['timings'] = {
-      blocked: -1,
-      queueing: -1,
-      proxy: -1,
-      dns: -1,
-      ssl: -1,
-      connect: -1,
-      send: -1,
-      wait: -1,
-      receive: -1,
-      total: -1,
-    };
-    const { requestSentTime, loadEndTime, responseReceivedTime } = record;
-
-    /**
-     * Handle when request failed and no responseReceived event was
-     * fired for that particular request
-     * Eg: connection refused by remote host
-     */
-    const response = record.response || {
-      timing: null,
-      fromServiceWorker: false,
-    };
-
-    const toMilliseconds = (time: number) => (time === -1 ? -1 : time * 1000);
-    const calculateDiffInMs = (
-      name: keyof NetworkInfo['timings'],
-      start: number,
-      end: number
-    ) => {
-      if (start < Number.MAX_VALUE && start <= end) {
-        result[name] = toMilliseconds(end - start);
-      }
-    };
-    const firstPositive = (numbers: number[]) => {
-      for (let i = 0; i < numbers.length; ++i) {
-        if (numbers[i] > 0) {
-          return numbers[i];
-        }
-      }
-      return null;
-    };
+  async stop() {
     /**
-     * requestTime is baseline in seconds, rest of the timing data are ticks in milliseconds
-     * from the requestTime, so we calculate the offset from that
+     * Waiting for all network events is error prone and might hang the tests
+     * from getting closed forever when there are upstream bugs in browsers or
+     * Playwright. So we log and drop these events once the test run is completed
      */
-    const addOffsetRange = (
-      name: keyof NetworkInfo['timings'],
-      start: number,
-      end: number
-    ) => {
-      if (start >= 0 && end >= 0) {
-        calculateDiffInMs(
-          name,
-          startTime + start / 1000,
-          startTime + end / 1000
-        );
-      }
-    };
-    const timing = response.timing;
-    const actResRcvdTime = this.getResponseReceivedTime(
-      timing,
-      responseReceivedTime
-    );
-    const issueTime = requestSentTime;
-    const startTime = timing == null ? -1 : timing.requestTime;
-    const endTime = firstPositive([loadEndTime, actResRcvdTime]) || startTime;
-
-    if (timing == null) {
-      const start =
-        issueTime !== -1 ? issueTime : startTime !== -1 ? startTime : 0;
-      const middle = actResRcvdTime === -1 ? Number.MAX_VALUE : actResRcvdTime;
-      const end = endTime === -1 ? Number.MAX_VALUE : endTime;
-      calculateDiffInMs('total', start, end);
-      calculateDiffInMs('blocked', start, middle);
-      calculateDiffInMs('receive', middle, end);
-      // Check if the request is blocked/stalled for the whole timeframe and
-      // calculate timings appropriately for that request
-      if (!isFinite(result['blocked'])) {
-        result['blocked'] = result['total'];
-      }
-      return result;
-    }
-    calculateDiffInMs(
-      'total',
-      issueTime < startTime ? issueTime : startTime,
-      endTime
-    );
-    if (issueTime < startTime) {
-      calculateDiffInMs('queueing', issueTime, startTime);
-    }
-    const responseReceived = toMilliseconds(actResRcvdTime - startTime);
-
-    if (response.fromServiceWorker) {
-      addOffsetRange('blocked', 0, timing.workerStart);
-      addOffsetRange('wait', timing.sendEnd, responseReceived);
-    } else if (!timing.pushStart) {
-      const blockingEnd =
-        firstPositive([
-          timing.dnsStart,
-          timing.connectStart,
-          timing.sendStart,
-          responseReceived,
-        ]) || 0;
-      addOffsetRange('blocked', 0, blockingEnd);
-      addOffsetRange('proxy', timing.proxyStart, timing.proxyEnd);
-      addOffsetRange('dns', timing.dnsStart, timing.dnsEnd);
-      addOffsetRange('connect', timing.connectStart, timing.connectEnd);
-      addOffsetRange('ssl', timing.sslStart, timing.sslEnd);
-      addOffsetRange('send', timing.sendStart, timing.sendEnd);
-      addOffsetRange(
-        'wait',
-        Math.max(
-          timing.sendEnd,
-          timing.connectEnd,
-          timing.dnsEnd,
-          timing.proxyEnd,
-          blockingEnd
-        ),
-        responseReceived
-      );
+    if (this._barrierPromises.size > 0) {
+      log(`Plugins: dropping ${this._barrierPromises.size} network events`);
     }
-    calculateDiffInMs('receive', actResRcvdTime, endTime);
-    return result;
-  }
-
-  stop() {
+    const context = this.driver.context;
+    context.off('request', this._onRequest.bind(this));
+    context.off('response', this._onResponse.bind(this));
+    context.off('requestfinished', this._onRequestCompleted.bind(this));
+    context.off('requestfailed', this._onRequestCompleted.bind(this));
+    this._barrierPromises.clear();
+    log(`Plugins: stopped collecting network events`);
     return this.results;
   }
 }

package/src/plugins/performance.ts

@@ -23,7 +23,7 @@
  *
  */
 
-import { CDPSession } from 'playwright-chromium';
+import { Driver, PageMetrics } from '../common_types';
 
 const supportedMetrics = new Set<string>([
   'Timestamp',
@@ -41,39 +41,23 @@ const supportedMetrics = new Set<string>([
   'JSHeapTotalSize',
 ]);
 
-export interface Metrics {
-  Timestamp?: number;
-  Documents?: number;
-  Frames?: number;
-  JSEventListeners?: number;
-  Nodes?: number;
-  LayoutCount?: number;
-  RecalcStyleCount?: number;
-  LayoutDuration?: number;
-  RecalcStyleDuration?: number;
-  ScriptDuration?: number;
-  TaskDuration?: number;
-  JSHeapUsedSize?: number;
-  JSHeapTotalSize?: number;
-}
-
 export class PerformanceManager {
-  constructor(private client: CDPSession) {}
+  constructor(private driver: Driver) {}
 
   async start() {
-    await this.client.send('Performance.enable');
+    await this.driver.client.send('Performance.enable');
   }
 
   async stop() {
-    await this.client.send('Performance.disable');
+    await this.driver.client.send('Performance.disable');
   }
 
   async getMetrics() {
-    const { metrics } = await this.client.send('Performance.getMetrics');
+    const { metrics } = await this.driver.client.send('Performance.getMetrics');
     return this.buildMetricsObject(metrics);
   }
 
-  private buildMetricsObject(metrics = []): Metrics {
+  private buildMetricsObject(metrics = []): PageMetrics {
     const result = {};
     for (const metric of metrics) {
       if (supportedMetrics.has(metric.name)) result[metric.name] = metric.value;