@elastic/synthetics 1.0.0-beta.2 → 1.0.0-beta.20

package/src/reporters/json.ts

@@ -23,13 +23,32 @@
  *
  */
 
+import { readFileSync } from 'fs';
+import { join } from 'path';
+import sharp from 'sharp';
+import { createHash } from 'crypto';
 import BaseReporter from './base';
-import { formatError, getTimestamp } from '../helpers';
+import {
+  formatError,
+  getTimestamp,
+  CACHE_PATH,
+  totalist,
+  isDirectory,
+  getDurationInUs,
+} from '../helpers';
 import { Journey, Step } from '../dsl';
 import snakeCaseKeys from 'snakecase-keys';
-import { NetworkInfo, StatusValue } from '../common_types';
+import {
+  NetworkInfo,
+  NetworkConditions,
+  TraceOutput,
+  StatusValue,
+  PerfMetrics,
+  Params,
+  Screenshot,
+} from '../common_types';
 import { Protocol } from 'playwright-chromium/types/protocol';
-import { Metrics } from '../plugins';
+import { PageMetrics } from '../plugins';
 
 /* eslint-disable @typescript-eslint/no-var-requires */
 const { version, name } = require('../../package.json');
@@ -38,10 +57,13 @@ type OutputType =
   | 'synthetics/metadata'
   | 'journey/register'
   | 'journey/start'
+  | 'screenshot/block'
+  | 'step/screenshot_ref'
   | 'step/screenshot'
+  | 'step/metrics'
+  | 'step/filmstrips'
   | 'step/end'
   | 'journey/network_info'
-  | 'journey/filmstrips'
   | 'journey/browserconsole'
   | 'journey/end';
 
@@ -51,19 +73,25 @@ type Payload = {
   end?: number;
   url?: string;
   status?: StatusValue | number;
-  metrics?: Metrics;
-  params?: Record<string, unknown>;
+  pagemetrics?: PageMetrics;
+  params?: Params;
   type?: OutputType;
   text?: string;
   index?: number;
+  network_conditions?: NetworkConditions;
 };
 
 type OutputFields = {
   type: OutputType;
+  _id?: string;
   journey?: Journey;
   timestamp?: number;
   url?: string;
-  step?: Partial<Step>;
+  step?: Partial<Step> & {
+    duration?: {
+      us: number;
+    };
+  };
   error?: Error;
   root_fields?: Record<string, unknown>;
   payload?: Payload | NetworkInfo;
@@ -71,6 +99,23 @@ type OutputFields = {
   blob_mime?: string;
 };
 
+type ScreenshotBlob = {
+  blob: string;
+  id: string;
+};
+
+type ScreenshotReference = {
+  width: number;
+  height: number;
+  blocks: Array<{
+    hash: string;
+    top: number;
+    left: number;
+    width: number;
+    height: number;
+  }>;
+};
+
 function getMetadata() {
   return {
     os: {
@@ -200,6 +245,7 @@ function journeyInfo(
   return {
     name: journey.name,
     id: journey.id,
+    tags: journey.tags,
     status: type === 'journey/end' ? status : undefined,
   };
 }
@@ -216,21 +262,103 @@ function stepInfo(
     name: step.name,
     index: step.index,
     status: type === 'step/end' ? status : undefined,
+    duration: step.duration,
   };
 }
 
+export async function getScreenshotBlocks(screenshot: Buffer) {
+  const img = sharp(screenshot, { sequentialRead: true });
+  const { width, height } = await img.metadata();
+  /**
+   * Chop the screenshot image (1280*720) which is the default
+   * viewport size in to 64 equal blocks for a given image
+   * which can be acheived by keeping the division to 8
+   *
+   * Changing division to 16 would yield us 256 smaller blocks, but it is not
+   * optimal for caching in the ES and proved out to be bad, so we stick to 8
+   */
+  const divisions = 8;
+  const blockWidth = Math.floor(width / divisions);
+  const blockHeight = Math.floor(height / divisions);
+  const reference: ScreenshotReference = {
+    width,
+    height,
+    blocks: [],
+  };
+  const blocks: Array<ScreenshotBlob> = [];
+
+  for (let row = 0; row < divisions; row++) {
+    const top = row * blockHeight;
+    for (let col = 0; col < divisions; col++) {
+      const left = col * blockWidth;
+      const buf = await img
+        .extract({ top, left, width: blockWidth, height: blockHeight })
+        .jpeg()
+        .toBuffer();
+
+      const hash = createHash('sha1').update(buf).digest('hex');
+      blocks.push({
+        blob: buf.toString('base64'),
+        id: hash,
+      });
+      /**
+       * We dont write the width, height of individual blocks on the
+       * reference as we use similar sized blocks for each extraction,
+       * we would need to send the width and height here if we decide to
+       * go with dynamic block extraction.
+       */
+      reference.blocks.push({
+        hash,
+        top,
+        left,
+        width: blockWidth,
+        height: blockHeight,
+      });
+    }
+  }
+
+  return { blocks, reference, blob_mime: 'image/jpeg' };
+}
+
+/**
+ * Get all the screenshots from the cached screenshot location
+ * at the end of each journey and construct equally sized blocks out
+ * of the individual screenshot image.
+ */
+export async function gatherScreenshots(
+  screenshotsPath: string,
+  callback: (data: Screenshot) => Promise<void>
+) {
+  if (isDirectory(screenshotsPath)) {
+    await totalist(screenshotsPath, async (_, absPath) => {
+      try {
+        const content = readFileSync(absPath, 'utf8');
+        const screenshot: Screenshot = JSON.parse(content);
+        await callback(screenshot);
+      } catch (_) {
+        // TODO: capture progarammatic synthetic errors under different type
+      }
+    });
+  }
+}
+
 export default class JSONReporter extends BaseReporter {
   _registerListeners() {
     /**
      * report the number of journeys that exists on a suite which
      * could be used for better sharding
      */
-    this.runner.on('start', ({ numJourneys }) => {
+    this.runner.on('start', ({ numJourneys, networkConditions }) => {
       this.writeJSON({
         type: 'synthetics/metadata',
         root_fields: {
           num_journeys: numJourneys,
         },
+        payload: networkConditions
+          ? {
+              network_conditions: networkConditions,
+            }
+          : undefined,
       });
     });
 
@@ -258,33 +386,47 @@ export default class JSONReporter extends BaseReporter {
         start,
         end,
         error,
-        screenshot,
         url,
         status,
+        pagemetrics,
+        traces,
         metrics,
+        filmstrips,
       }) => {
-        if (screenshot) {
-          this.writeJSON({
-            type: 'step/screenshot',
-            journey,
-            step,
-            blob: screenshot,
-            blob_mime: 'image/jpeg',
+        this.writeMetrics(journey, step, 'relative_trace', traces);
+        this.writeMetrics(journey, step, 'experience', metrics);
+        if (filmstrips) {
+          // Write each filmstrip separately so that we don't get documents that are too large
+          filmstrips.forEach((strip, index) => {
+            this.writeJSON({
+              type: 'step/filmstrips',
+              journey,
+              step,
+              payload: { index },
+              root_fields: {
+                browser: { relative_trace: { start: strip.start } },
+              },
+              blob: strip.blob,
+              blob_mime: strip.mime,
+            });
           });
         }
         this.writeJSON({
           type: 'step/end',
           journey,
-          step,
+          step: {
+            ...step,
+            duration: {
+              us: getDurationInUs(end - start),
+            },
+          },
           url,
           error,
           payload: {
             source: step.callback.toString(),
-            start,
-            end,
             url,
             status,
-            metrics,
+            pagemetrics,
           },
         });
       }
@@ -292,16 +434,45 @@ export default class JSONReporter extends BaseReporter {
 
     this.runner.on(
       'journey:end',
-      ({
+      async ({
         journey,
+        timestamp,
         start,
         end,
-        filmstrips,
         networkinfo,
         browserconsole,
         status,
         error,
+        options,
       }) => {
+        const { ssblocks, screenshots } = options;
+        const writeScreenshots =
+          screenshots === 'on' ||
+          (screenshots === 'only-on-failure' && status === 'failed');
+        if (writeScreenshots) {
+          await gatherScreenshots(
+            join(CACHE_PATH, 'screenshots'),
+            async screenshot => {
+              const { data, timestamp, step } = screenshot;
+              if (!data) {
+                return;
+              }
+              if (ssblocks) {
+                await this.writeScreenshotBlocks(journey, screenshot);
+              } else {
+                this.writeJSON({
+                  type: 'step/screenshot',
+                  timestamp,
+                  journey,
+                  step,
+                  blob: data,
+                  blob_mime: 'image/jpeg',
+                });
+              }
+            }
+          );
+        }
+
         if (networkinfo) {
           networkinfo.forEach(ni => {
             const { ecs, payload } = formatNetworkFields(ni);
@@ -315,37 +486,26 @@ export default class JSONReporter extends BaseReporter {
             });
           });
         }
-        if (filmstrips) {
-          // Write each filmstrip separately so that we don't get documents that are too large
-          filmstrips.forEach((strip, index) => {
-            this.writeJSON({
-              type: 'journey/filmstrips',
-              journey,
-              payload: {
-                index,
-                ...{
-                  startTime: strip.startTime,
-                  ts: strip.ts,
-                },
-              },
-              blob: strip.snapshot,
-            });
-          });
-        }
         if (browserconsole) {
-          browserconsole.forEach(({ timestamp, text, type, step }) => {
+          browserconsole.forEach(({ timestamp, text, type, step, error }) => {
             this.writeJSON({
               type: 'journey/browserconsole',
               journey,
               timestamp,
               step,
-              payload: { text, type } as Payload,
+              error,
+              payload: {
+                text,
+                type,
+              } as Payload,
             });
           });
         }
+
         this.writeJSON({
           type: 'journey/end',
           journey,
+          timestamp,
           error,
           payload: {
             start,
@@ -353,16 +513,65 @@ export default class JSONReporter extends BaseReporter {
             status,
           },
         });
+        process.nextTick(() => this.runner.emit('journey:end:reported', {}));
       }
     );
   }
 
+  async writeScreenshotBlocks(journey: Journey, screenshot: Screenshot) {
+    const { blob_mime, blocks, reference } = await getScreenshotBlocks(
+      Buffer.from(screenshot.data, 'base64')
+    );
+    for (let i = 0; i < blocks.length; i++) {
+      const block = blocks[i];
+      this.writeJSON({
+        type: 'screenshot/block',
+        timestamp: screenshot.timestamp,
+        _id: block.id,
+        blob: block.blob,
+        blob_mime,
+      });
+    }
+    this.writeJSON({
+      type: 'step/screenshot_ref',
+      timestamp: screenshot.timestamp,
+      journey,
+      step: screenshot.step,
+      root_fields: {
+        screenshot_ref: reference,
+      },
+    });
+  }
+
+  writeMetrics(
+    journey: Journey,
+    step: Step,
+    type: string,
+    events: Array<TraceOutput> | PerfMetrics
+  ) {
+    const metrics = Array.isArray(events) ? events : [events];
+    metrics.forEach(event => {
+      event &&
+        this.writeJSON({
+          type: 'step/metrics',
+          journey,
+          step,
+          root_fields: {
+            browser: {
+              [type]: event,
+            },
+          },
+        });
+    });
+  }
+
   // Writes a structured synthetics event
   // Note that blob is ultimately stored in ES as a base64 encoded string. You must base 64 encode
   // it before passing it into this function!
   // The payload field is an un-indexed field with no ES mapping, so users can put arbitary structured
   // stuff in there
   writeJSON({
+    _id,
     journey,
     type,
     timestamp,
@@ -376,6 +585,7 @@ export default class JSONReporter extends BaseReporter {
   }: OutputFields) {
     this.write({
       type,
+      _id,
       '@timestamp': timestamp || getTimestamp(),
       journey: journeyInfo(journey, type, payload?.status),
       step: stepInfo(step, type, payload?.status),