@elastic/synthetics 1.0.0-beta.8 → 1.0.0

package/src/reporters/junit.ts

@@ -23,8 +23,14 @@
  *
  */
 
-import { mkdirSync, writeFileSync } from 'fs';
+import { mkdir, writeFile } from 'fs/promises';
 import { dirname } from 'path';
+import {
+  JourneyEndResult,
+  JourneyStartResult,
+  StepEndResult,
+} from '../common_types';
+import { Journey, Step } from '../dsl';
 import { formatError, indent, now } from '../helpers';
 import BaseReporter from './base';
 
@@ -51,104 +57,103 @@ export default class JUnitReporter extends BaseReporter {
   private totalTests = 0;
   private totalFailures = 0;
   private totalSkipped = 0;
+  #journeyMap = new Map<string, XMLEntry>();
 
-  _registerListeners() {
-    const journeyMap = new Map<string, XMLEntry>();
+  override onJourneyStart(journey: Journey, {}: JourneyStartResult) {
+    if (!this.#journeyMap.has(journey.name)) {
+      const entry = {
+        name: 'testsuite',
+        attributes: {
+          name: journey.name,
+          tests: 0,
+          failures: 0,
+          skipped: 0,
+          errors: 0,
+        },
+        children: [],
+      };
+      this.#journeyMap.set(journey.name, entry);
+    }
+  }
 
-    this.runner.on('journey:start', ({ journey }) => {
-      if (!journeyMap.has(journey.name)) {
-        const entry = {
-          name: 'testsuite',
-          attributes: {
-            name: journey.name,
-            tests: 0,
-            failures: 0,
-            skipped: 0,
-            errors: 0,
-          },
-          children: [],
-        };
-        journeyMap.set(journey.name, entry);
-      }
-    });
+  override onStepEnd(
+    journey: Journey,
+    step: Step,
+    { status, error, start, end }: StepEndResult
+  ) {
+    if (!this.#journeyMap.has(journey.name)) {
+      return;
+    }
+    const entry = this.#journeyMap.get(journey.name);
+    const caseEntry = {
+      name: 'testcase',
+      attributes: {
+        name: step.name,
+        classname: journey.name + ' ' + step.name,
+        time: end - start,
+      },
+      children: [],
+    };
 
-    this.runner.on(
-      'step:end',
-      ({ journey, step, status, error, start, end }) => {
-        if (!journeyMap.has(journey.name)) {
-          return;
-        }
-        const entry = journeyMap.get(journey.name);
-        const caseEntry = {
-          name: 'testcase',
-          attributes: {
-            name: step.name,
-            classname: journey.name + ' ' + step.name,
-            time: end - start,
-          },
-          children: [],
-        };
+    entry.attributes.tests++;
+    if (status === 'failed') {
+      const { name, message, stack } = formatError(error);
+      caseEntry.children.push({
+        name: 'failure',
+        attributes: {
+          message,
+          type: name,
+        },
+        text: stack,
+      });
+      entry.attributes.failures++;
+    } else if (status === 'skipped') {
+      caseEntry.children.push({
+        name: 'skipped',
+        attributes: {
+          message: 'previous step failed',
+        },
+      });
+      entry.attributes.skipped++;
+    }
+    entry.children.push(caseEntry);
+  }
 
-        entry.attributes.tests++;
-        if (status === 'failed') {
-          const { name, message, stack } = formatError(error);
-          caseEntry.children.push({
-            name: 'failure',
-            attributes: {
-              message,
-              type: name,
-            },
-            text: stack,
-          });
-          entry.attributes.failures++;
-        } else if (status === 'skipped') {
-          caseEntry.children.push({
-            name: 'skipped',
-            attributes: {
-              message: 'previous step failed',
-            },
-          });
-          entry.attributes.skipped++;
-        }
-        entry.children.push(caseEntry);
-      }
-    );
+  override onJourneyEnd(journey: Journey, {}: JourneyEndResult) {
+    if (!this.#journeyMap.has(journey.name)) {
+      return;
+    }
+    const { attributes } = this.#journeyMap.get(journey.name);
+    this.totalTests += attributes.tests;
+    this.totalFailures += attributes.failures;
+    this.totalSkipped += attributes.skipped;
+  }
 
-    this.runner.on('journey:end', ({ journey }) => {
-      if (!journeyMap.has(journey.name)) {
-        return;
-      }
-      const { attributes } = journeyMap.get(journey.name);
-      this.totalTests += attributes.tests;
-      this.totalFailures += attributes.failures;
-      this.totalSkipped += attributes.skipped;
-    });
+  override async onEnd() {
+    const root: XMLEntry = {
+      name: 'testsuites',
+      attributes: {
+        name: '',
+        tests: this.totalTests,
+        failures: this.totalFailures,
+        skipped: this.totalSkipped,
+        errors: 0,
+        time: parseInt(String(now())) / 1000,
+      },
+      children: [...this.#journeyMap.values()],
+    };
 
-    this.runner.on('end', () => {
-      const root: XMLEntry = {
-        name: 'testsuites',
-        attributes: {
-          name: '',
-          tests: this.totalTests,
-          failures: this.totalFailures,
-          skipped: this.totalSkipped,
-          errors: 0,
-          time: parseInt(String(now())) / 1000,
-        },
-        children: [...journeyMap.values()],
-      };
-      const output = serializeEntries(root).join('\n');
-      /**
-       * write the xml output to a file if specified via env flag
-       */
-      const fileName = process.env['SYNTHETICS_JUNIT_FILE'];
-      if (fileName) {
-        mkdirSync(dirname(fileName), { recursive: true });
-        writeFileSync(fileName, output);
-      } else {
-        this.write(output);
-      }
-    });
+    const output = serializeEntries(root).join('\n');
+    /**
+     * write the xml output to a file if specified via env flag
+     */
+    const fileName = process.env['SYNTHETICS_JUNIT_FILE'];
+    if (fileName) {
+      await mkdir(dirname(fileName), { recursive: true });
+      await writeFile(fileName, output);
+    } else {
+      this.write(output);
+    }
   }
 }
 

package/src/sdk/lh-trace-processor.ts

@@ -16,10 +16,8 @@
  * 4. Return all those items in one handy bundle.
  */
 
-/** @typedef {Omit<LH.Artifacts.TraceTimes, 'firstContentfulPaint'|'firstContentfulPaintAllFrames'> & {firstContentfulPaint?: number, firstContentfulPaintAllFrames?: number}} TraceTimesWithoutFCP */
-/** @typedef {Omit<TraceTimesWithoutFCP, 'traceEnd'>} TraceTimesWithoutFCPAndTraceEnd */
-/** @typedef {Omit<LH.Artifacts.TraceOfTab, 'firstContentfulPaintEvt'|'firstContentfulPaintAllFramesEvt'|'timings'|'timestamps'> & {timings: TraceTimesWithoutFCP, timestamps: TraceTimesWithoutFCP, firstContentfulPaintEvt?: LH.Artifacts.TraceOfTab['firstContentfulPaintEvt'], firstContentfulPaintAllFramesEvt?: LH.Artifacts.TraceOfTab['largestContentfulPaintAllFramesEvt']}} TraceOfTabWithoutFCP */
-/** @typedef {'lastNavigationStart'|'firstResourceSendRequest'} TimeOriginDeterminationMethod */
+/** @typedef {Omit<LH.Artifacts.NavigationTraceTimes, 'firstContentfulPaintAllFrames'|'traceEnd'>} TraceNavigationTimesForFrame */
+/** @typedef {'lastNavigationStart'|'firstResourceSendRequest'|'lighthouseMarker'|'auto'} TimeOriginDeterminationMethod */
 /** @typedef {Omit<LH.TraceEvent, 'name'|'args'> & {name: 'FrameCommittedInBrowser', args: {data: {frame: string, url: string, parent?: string}}}} FrameCommittedEvent */
 /** @typedef {Omit<LH.TraceEvent, 'name'|'args'> & {name: 'largestContentfulPaint::Invalidate'|'largestContentfulPaint::Candidate', args: {data?: {size?: number}, frame: string}}} LCPEvent */
 /** @typedef {Omit<LH.TraceEvent, 'name'|'args'> & {name: 'largestContentfulPaint::Candidate', args: {data: {size: number}, frame: string}}} LCPCandidateEvent */
@@ -42,6 +40,10 @@ const SCHEDULABLE_TASK_TITLE_ALT3 =
   'TaskQueueManager::ProcessTaskFromWorkQueue';
 
 class TraceProcessor {
+  static get TIMESPAN_MARKER_ID() {
+    return '__lighthouseTimespanStart__';
+  }
+
   /**
    * @return {Error}
    */
@@ -63,6 +65,20 @@ class TraceProcessor {
     return new Error('No tracingStartedInBrowser event found');
   }
 
+  /**
+   * @return {Error}
+   */
+  static createNoFirstContentfulPaintError() {
+    return new Error('No FirstContentfulPaint event found');
+  }
+
+  /**
+   * @return {Error}
+   */
+  static createNoLighthouseMarkerError() {
+    return new Error('No Lighthouse timespan marker event found');
+  }
+
   /**
    * Returns true if the event is a navigation start event of a document whose URL seems valid.
    *
@@ -101,16 +117,16 @@ class TraceProcessor {
     traceEvents
   ) {
     /*
-     * We have two different sets of indices going on here.
-
-     *    1. There's the index for an element of `traceEvents`, referred to here as an `ArrayIndex`.
-     *       `timestampSortedIndices` is an array of `ArrayIndex` elements.
-     *    2. There's the index for an element of `timestampSortedIndices`, referred to here as a `TsIndex`.
-     *       A `TsIndex` is therefore an index to an element which is itself an index.
-     *
-     * These two helper functions help resolve this layer of indirection.
-     * Our final return value is an array of `ArrayIndex` in their final sort order.
-     */
+      * We have two different sets of indices going on here.
+
+      *    1. There's the index for an element of `traceEvents`, referred to here as an `ArrayIndex`.
+      *       `timestampSortedIndices` is an array of `ArrayIndex` elements.
+      *    2. There's the index for an element of `timestampSortedIndices`, referred to here as a `TsIndex`.
+      *       A `TsIndex` is therefore an index to an element which is itself an index.
+      *
+      * These two helper functions help resolve this layer of indirection.
+      * Our final return value is an array of `ArrayIndex` in their final sort order.
+      */
     /** @param {number} i */
     const lookupArrayIndexByTsIndex = i => timestampSortedIndices[i];
     /** @param {number} i */
@@ -406,25 +422,21 @@ class TraceProcessor {
   }
 
   /**
-   * Provides the top level events on the main thread with timestamps in ms relative to navigation
+   * Provides the top level events on the main thread with timestamps in ms relative to timeOrigin.
    * start.
-   * @param {LH.Artifacts.TraceOfTab} tabTrace
+   * @param {LH.Artifacts.ProcessedTrace} trace
    * @param {number=} startTime Optional start time (in ms relative to timeOrigin) of range of interest. Defaults to 0.
    * @param {number=} endTime Optional end time (in ms relative to timeOrigin) of range of interest. Defaults to trace end.
    * @return {Array<ToplevelEvent>}
    */
-  static getMainThreadTopLevelEvents(
-    tabTrace,
-    startTime = 0,
-    endTime = Infinity
-  ) {
+  static getMainThreadTopLevelEvents(trace, startTime = 0, endTime = Infinity) {
     const topLevelEvents = [];
     // note: mainThreadEvents is already sorted by event start
-    for (const event of tabTrace.mainThreadEvents) {
+    for (const event of trace.mainThreadEvents) {
       if (!this.isScheduleableTask(event) || !event.dur) continue;
 
-      const start = (event.ts - tabTrace.timeOriginEvt.ts) / 1000;
-      const end = (event.ts + event.dur - tabTrace.timeOriginEvt.ts) / 1000;
+      const start = (event.ts - trace.timeOriginEvt.ts) / 1000;
+      const end = (event.ts + event.dur - trace.timeOriginEvt.ts) / 1000;
       if (start > endTime || end < startTime) continue;
 
       topLevelEvents.push({
@@ -651,11 +663,10 @@ class TraceProcessor {
    * in milliseconds since the time origin in addition to the standard microsecond monotonic timestamps.
    * @param {LH.Trace} trace
    * @param {{timeOriginDeterminationMethod?: TimeOriginDeterminationMethod}} [options]
-   * @return {TraceOfTabWithoutFCP}
+   * @return {LH.Artifacts.ProcessedTrace}
    */
-  static computeTraceOfTab(trace, options) {
-    const { timeOriginDeterminationMethod = 'lastNavigationStart' } =
-      options || {};
+  static processTrace(trace, options) {
+    const { timeOriginDeterminationMethod = 'auto' } = options || {};
 
     // Parse the trace for our key events and sort them by timestamp. Note: sort
     // *must* be stable to keep events correctly nested.
@@ -722,22 +733,6 @@ class TraceProcessor {
       timeOriginDeterminationMethod
     );
 
-    // Compute the key frame timings for the main frame.
-    const frameTimings = this.computeKeyTimingsForFrame(frameEvents, {
-      timeOriginEvt,
-    });
-
-    // Compute FCP for all frames.
-    const fcpAllFramesEvt = frameTreeEvents.find(
-      e => e.name === 'firstContentfulPaint' && e.ts > timeOriginEvt.ts
-    );
-
-    // Compute LCP for all frames.
-    const lcpAllFramesEvt = this.computeValidLCPAllFrames(
-      frameTreeEvents,
-      timeOriginEvt
-    ).lcp;
-
     // Subset all trace events to just our tab's process (incl threads other than main)
     // stable-sort events to keep them correctly nested.
     const processEvents = TraceProcessor.filteredTraceSort(
@@ -752,46 +747,89 @@ class TraceProcessor {
     // Ensure our traceEnd reflects all page activity.
     const traceEnd = this.computeTraceEnd(trace.traceEvents, timeOriginEvt);
 
-    /** @param {number|undefined} ts */
-    const maybeGetTiming = ts =>
-      ts === undefined ? undefined : (ts - timeOriginEvt.ts) / 1000;
     // This could be much more concise with object spread, but the consensus is that explicitness is
     // preferred over brevity here.
     return {
       frames,
       mainThreadEvents,
+      frameEvents,
       frameTreeEvents,
       processEvents,
       mainFrameIds,
+      timeOriginEvt,
       timings: {
-        timeOrigin: frameTimings.timings.timeOrigin,
+        timeOrigin: 0,
+        traceEnd: traceEnd.timing,
+      },
+      timestamps: {
+        timeOrigin: timeOriginEvt.ts,
+        traceEnd: traceEnd.timestamp,
+      },
+    };
+  }
+
+  /**
+   * Finds key navigation trace events and computes timings of events in milliseconds since the time
+   * origin in addition to the standard microsecond monotonic timestamps.
+   * @param {LH.Artifacts.ProcessedTrace} processedTrace
+   * @return {LH.Artifacts.ProcessedNavigation}
+   */
+  static processNavigation(processedTrace) {
+    const { frameEvents, frameTreeEvents, timeOriginEvt, timings, timestamps } =
+      processedTrace;
+
+    // Compute the key frame timings for the main frame.
+    const frameTimings = this.computeNavigationTimingsForFrame(frameEvents, {
+      timeOriginEvt,
+    });
+
+    // Compute FCP for all frames.
+    const fcpAllFramesEvt = frameTreeEvents.find(
+      e => e.name === 'firstContentfulPaint' && e.ts > timeOriginEvt.ts
+    );
+
+    if (!fcpAllFramesEvt) {
+      throw this.createNoFirstContentfulPaintError();
+    }
+
+    // Compute LCP for all frames.
+    const lcpAllFramesEvt = this.computeValidLCPAllFrames(
+      frameTreeEvents,
+      timeOriginEvt
+    ).lcp;
+
+    /** @param {number} ts */
+    const getTiming = ts => (ts - timeOriginEvt.ts) / 1000;
+    /** @param {number=} ts */
+    const maybeGetTiming = ts => (ts === undefined ? undefined : getTiming(ts));
+
+    return {
+      timings: {
+        timeOrigin: timings.timeOrigin,
         firstPaint: frameTimings.timings.firstPaint,
         firstContentfulPaint: frameTimings.timings.firstContentfulPaint,
-        firstContentfulPaintAllFrames: maybeGetTiming(
-          fcpAllFramesEvt && fcpAllFramesEvt.ts
-        ),
+        firstContentfulPaintAllFrames: getTiming(fcpAllFramesEvt.ts),
         firstMeaningfulPaint: frameTimings.timings.firstMeaningfulPaint,
         largestContentfulPaint: frameTimings.timings.largestContentfulPaint,
         largestContentfulPaintAllFrames: maybeGetTiming(
           lcpAllFramesEvt && lcpAllFramesEvt.ts
         ),
-        traceEnd: traceEnd.timing,
         load: frameTimings.timings.load,
         domContentLoaded: frameTimings.timings.domContentLoaded,
+        traceEnd: timings.traceEnd,
       },
       timestamps: {
-        timeOrigin: frameTimings.timestamps.timeOrigin,
+        timeOrigin: timestamps.timeOrigin,
         firstPaint: frameTimings.timestamps.firstPaint,
         firstContentfulPaint: frameTimings.timestamps.firstContentfulPaint,
-        firstContentfulPaintAllFrames: fcpAllFramesEvt && fcpAllFramesEvt.ts,
+        firstContentfulPaintAllFrames: fcpAllFramesEvt.ts,
         firstMeaningfulPaint: frameTimings.timestamps.firstMeaningfulPaint,
         largestContentfulPaint: frameTimings.timestamps.largestContentfulPaint,
         largestContentfulPaintAllFrames: lcpAllFramesEvt && lcpAllFramesEvt.ts,
-        traceEnd: traceEnd.timestamp,
         load: frameTimings.timestamps.load,
         domContentLoaded: frameTimings.timestamps.domContentLoaded,
+        traceEnd: timestamps.traceEnd,
       },
-      timeOriginEvt: frameTimings.timeOriginEvt,
       firstPaintEvt: frameTimings.firstPaintEvt,
       firstContentfulPaintEvt: frameTimings.firstContentfulPaintEvt,
       firstContentfulPaintAllFramesEvt: fcpAllFramesEvt,
@@ -843,6 +881,21 @@ class TraceProcessor {
    * @return {LH.TraceEvent}
    */
   static computeTimeOrigin(traceEventSubsets, method) {
+    const lastNavigationStart = () => {
+      // Our time origin will be the last frame navigation in the trace
+      const frameEvents = traceEventSubsets.frameEvents;
+      return frameEvents.filter(this._isNavigationStartOfInterest).pop();
+    };
+
+    const lighthouseMarker = () => {
+      const frameEvents = traceEventSubsets.keyEvents;
+      return frameEvents.find(
+        evt =>
+          evt.name === 'clock_sync' &&
+          evt.args.sync_id === TraceProcessor.TIMESPAN_MARKER_ID
+      );
+    };
+
     switch (method) {
       case 'firstResourceSendRequest': {
         // Our time origin will be the timestamp of the first request that's sent in the frame.
@@ -855,14 +908,20 @@ class TraceProcessor {
         return fetchStart;
       }
       case 'lastNavigationStart': {
-        // Our time origin will be the last frame navigation in the trace
-        const frameEvents = traceEventSubsets.frameEvents;
-        const navigationStart = frameEvents
-          .filter(this._isNavigationStartOfInterest)
-          .pop();
+        const navigationStart = lastNavigationStart();
         if (!navigationStart) throw this.createNoNavstartError();
         return navigationStart;
       }
+      case 'lighthouseMarker': {
+        const marker = lighthouseMarker();
+        if (!marker) throw this.createNoLighthouseMarkerError();
+        return marker;
+      }
+      case 'auto': {
+        const marker = lighthouseMarker() || lastNavigationStart();
+        if (!marker) throw this.createNoNavstartError();
+        return marker;
+      }
     }
   }
 
@@ -872,7 +931,7 @@ class TraceProcessor {
    * @param {Array<LH.TraceEvent>} frameEvents
    * @param {{timeOriginEvt: LH.TraceEvent}} options
    */
-  static computeKeyTimingsForFrame(frameEvents, options) {
+  static computeNavigationTimingsForFrame(frameEvents, options) {
     const { timeOriginEvt } = options;
 
     // Find our first paint of this frame
@@ -885,6 +944,10 @@ class TraceProcessor {
       e => e.name === 'firstContentfulPaint' && e.ts > timeOriginEvt.ts
     );
 
+    if (!firstContentfulPaint) {
+      throw this.createNoFirstContentfulPaintError();
+    }
+
     // fMP will follow at/after the FP
     let firstMeaningfulPaint = frameEvents.find(
       e => e.name === 'firstMeaningfulPaint' && e.ts > timeOriginEvt.ts
@@ -918,25 +981,26 @@ class TraceProcessor {
 
     /** @param {{ts: number}=} event */
     const getTimestamp = event => event && event.ts;
-    /** @type {TraceTimesWithoutFCPAndTraceEnd} */
+    /** @type {TraceNavigationTimesForFrame} */
     const timestamps = {
       timeOrigin: timeOriginEvt.ts,
       firstPaint: getTimestamp(firstPaint),
-      firstContentfulPaint: getTimestamp(firstContentfulPaint),
+      firstContentfulPaint: firstContentfulPaint.ts,
       firstMeaningfulPaint: getTimestamp(firstMeaningfulPaint),
       largestContentfulPaint: getTimestamp(lcpResult.lcp),
       load: getTimestamp(load),
       domContentLoaded: getTimestamp(domContentLoaded),
     };
 
+    /** @param {number} ts */
+    const getTiming = ts => (ts - timeOriginEvt.ts) / 1000;
     /** @param {number=} ts */
-    const maybeGetTiming = ts =>
-      ts === undefined ? undefined : (ts - timeOriginEvt.ts) / 1000;
-    /** @type {TraceTimesWithoutFCPAndTraceEnd} */
+    const maybeGetTiming = ts => (ts === undefined ? undefined : getTiming(ts));
+    /** @type {TraceNavigationTimesForFrame} */
     const timings = {
       timeOrigin: 0,
       firstPaint: maybeGetTiming(timestamps.firstPaint),
-      firstContentfulPaint: maybeGetTiming(timestamps.firstContentfulPaint),
+      firstContentfulPaint: getTiming(timestamps.firstContentfulPaint),
       firstMeaningfulPaint: maybeGetTiming(timestamps.firstMeaningfulPaint),
       largestContentfulPaint: maybeGetTiming(timestamps.largestContentfulPaint),
       load: maybeGetTiming(timestamps.load),

package/src/sdk/trace-metrics.ts

@@ -24,10 +24,14 @@
  */
 
 import { Filmstrip, TraceOutput } from '../common_types';
-import type { LHTrace, TraceEvent } from './trace-processor';
+import type {
+  LHProcessedNavigation,
+  LHProcessedTrace,
+  TraceEvent,
+} from './trace-processor';
 
 export class UserTimings {
-  static compute(trace: LHTrace) {
+  static compute(trace: LHProcessedTrace) {
     const { processEvents } = trace;
     const measuresMap = new Map();
     const userTimings: Array<TraceOutput> = [];
@@ -96,7 +100,7 @@ export class ExperienceMetrics {
     };
   }
 
-  static compute(trace: LHTrace) {
+  static compute(trace: LHProcessedNavigation) {
     const traces: Array<TraceOutput> = [];
     const { timestamps, timings, lcpInvalidated } = trace;
 
@@ -226,7 +230,7 @@ export class CumulativeLayoutShift {
     return maxScore;
   }
 
-  static compute(trace: LHTrace) {
+  static compute(trace: LHProcessedTrace) {
     const layoutShiftEvents = this.getLayoutShiftEvents(trace.frameTreeEvents);
     const traces: Array<TraceOutput> = layoutShiftEvents.map(event => {
       return {

package/src/sdk/trace-processor.ts

@@ -23,13 +23,14 @@
  *
  */
 
-import { PerfMetrics } from '../common_types';
 import LighthouseTraceProcessor from './lh-trace-processor';
 import {
   ExperienceMetrics,
   CumulativeLayoutShift,
   UserTimings,
 } from './trace-metrics';
+import { PerfMetrics } from '../common_types';
+import { log } from '../core/logger';
 
 const ACCEPTABLE_NAVIGATION_URL_REGEX = /^(file|https?):/;
 
@@ -81,16 +82,22 @@ type LHTraceTime = {
   traceEnd: number;
 };
 
-export type LHTrace = {
+export type LHProcessedNavigation = {
   domContentLoadedEvt: TraceEvent;
   firstContentfulPaintEvt: TraceEvent;
   largestContentfulPaintEvt: TraceEvent;
   loadEvt: TraceEvent;
-  timeOriginEvt: TraceEvent;
+  timestamps: LHTraceTime;
+  timings: LHTraceTime;
   lcpInvalidated: boolean;
+};
+
+export type LHProcessedTrace = {
   processEvents: Array<TraceEvent>;
+  frameEvents: Array<TraceEvent>;
   mainThreadEvents: Array<TraceEvent>;
   frameTreeEvents: Array<TraceEvent>;
+  timeOriginEvt: TraceEvent;
   timestamps: Partial<LHTraceTime>;
   timings: Partial<LHTraceTime>;
 };
@@ -104,7 +111,7 @@ export type LHTrace = {
  * metrics based on multiple navigations instead of a single navigation.
  */
 export class TraceProcessor extends LighthouseTraceProcessor {
-  static _isNavigationStartOfInterest(event) {
+  static override _isNavigationStartOfInterest(event) {
     return (
       event.name === 'navigationStart' &&
       (!event.args.data ||
@@ -118,15 +125,23 @@ export class TraceProcessor extends LighthouseTraceProcessor {
     const options = {
       timeOriginDeterminationMethod: 'lastNavigationStart',
     };
-    const trace = super.computeTraceOfTab({ traceEvents }, options);
-    const userTiming = UserTimings.compute(trace);
-    const { traces: expTraces, metrics } = ExperienceMetrics.compute(trace);
-    const { cls, traces: layoutTraces } = CumulativeLayoutShift.compute(trace);
-    const perfMetrics: Partial<PerfMetrics> = { cls, ...metrics };
+    try {
+      const processedTrace = this.processTrace({ traceEvents }, options);
+      const processedNavigation = this.processNavigation(processedTrace);
+      const userTiming = UserTimings.compute(processedTrace);
+      const { traces: expTraces, metrics } =
+        ExperienceMetrics.compute(processedNavigation);
+      const { cls, traces: layoutTraces } =
+        CumulativeLayoutShift.compute(processedTrace);
+      const perfMetrics: Partial<PerfMetrics> = { cls, ...metrics };
 
-    return {
-      traces: userTiming.concat(expTraces, layoutTraces),
-      metrics: perfMetrics,
-    };
+      return {
+        traces: userTiming.concat(expTraces, layoutTraces),
+        metrics: perfMetrics,
+      };
+    } catch (e) {
+      log(e);
+      return {};
+    }
   }
 }