@ember-performance-monitoring/tracerbench-compare-action

Commit over Commit Performance Analysis Automation for Web Applications.

Samples and Analysis are gathered using Tracerbench Compare

What is it?

Think "Lighthouse CI" but with statistical rigor and more meaningful data.

This library is general enough it could be used to benchmark any Web Application with any CI setup via Tracerbench; however, it comes finely tuned for benchmarking Ember applications and Addons via a Github Action.

Initial Setup

To use this, place markers with performance.mark(<markerName>) in your application at key points. You can then conigure tracerbench to use a subset (or all) of these markers to create a segmented analysis.

Currently, in order for Tracerbench to know when to stop analyzing your application it needs to redirect to about:blank after the Paint event following the last marker you care about. Typically in an Ember Application this means adding the following in whichever route is being benchmarked. This constraint may be removed in the future.

class MyRoute extends Route {
 afterModel() {
     if (document.location.href.indexOf('?tracing') !== -1) {
     endTrace();
   }
 }
}

function endTrace() {
 // just before paint
 requestAnimationFrame(() => {
   // after paint
   requestAnimationFrame(() => {
     document.location.href = 'about:blank';
   });
 });
}

Usage as a GithubAction

You can use this action by adding it to an existing workflow or creating a new workflow in your project.

For example, the below adds a check for the users route to all pull requests to the master branch.

name: PerformanceCheck

on:
  pull_request:
    branches:
      - master

jobs:
  analyze-users-route:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v1
        with:
          fetch-depth: 0
      - uses: ember-performance-monitoring/tracerbench-compare-action@master
        with:
          experiment-url: 'http://localhost:4201/users'
          control-url: 'http://localhost:4200/users'
          markers: 'end-users-model-load'
          regression-threshold: 25
          fidelity: high

Local Usage and Usage with other CI Systems

The GithubAction this project provides is actually a small wrapper that pipes the configuration into the project's main. This allows for easy use in any setup (local or CI) by adding this action as a dependency.

yarn add @ember-performance-monitoring/tracerbench-compare-action

For example, you could mirror the above check in an Ember Application by doing the following.

{
  "experiment-url": "http://localhost:4201/users",
  "control-url": "http://localhost:4200/users",
  "markers": "end-users-model-load",
  "regression-threshold": 25,
  "fidelity": "high"
}

const analyze = require('@ember-performance-monitoring/tracerbench-compare-action');
const config = require('./perf-test-config.json');

analyze(config);

Configuration Options

| Option | Default | Description | | ------ | ------- | ----------- | | build-control | true | Whether to build assets for the control case | | build-experiment | true | Whether to build assets for the experiment case | | control-dist | ./dist-control | The location of the control assets once a build has been performed (or if build-control is false the location they are already) | | experiment-dist | ./dist-experiment | The location of the experiment assets once a build has been performed (or if build-control is false the location they are already) | | control-sha | git rev-parse --short=8 origin/master | SHA to be built for the control commit | | experiment-sha | git rev-parse --short=8 HEAD | SHA to be built for the experiment commit | | experiment-ref | current branch or tag | The reference being built for the experiment | | control-build-command | ember build -e production --output-path ${control-dist} | command to execute to build control assets if build-control is true | experiment-build-command | ember build -e production --output-path ${experiment-dist} | command to execute to build experiment assets if build-experiment is true | use-yarn | true | When building control/experiment whether to use yarn for install (npm is used otherwise) | | control-serve-command | ember s --path=${control-dist} | command to execute to serve the control assets | | experiment-serve-command | ember s --path=${experiment-dist} | command to execute to serve the experiment assets | | clean-after-analyze | true if experiment-ref is preset, false otherwise | whether to try to restore initial repository state after the benchmark is completed. Useful for local runs. |

Tracerbench Config

The following options are supplied directly to the tracerbench compare command that is run once the assets for control and experiment are being served.

| Option | Default | Description | | ------ | ------- | ----------- | | control-url | http://localhost:4200?tracing=true | url to benchmark at which the control assets are being served | | experiment-url | http://localhost:4201?tracing=true | url to benchmark at which the experiment assets are being served | | fidelity | low | how many runs to perform. high (50) is recommended for CI | | markers | domComplete | comma separated list of markers to consider in the report | | runtime-stats | false | whether to analyze chrome runtime stats (expensive and degrades the rigor of the rest of the test) } | report | true | whether to produce a report PDF | | headless | true | whether to run Chrome in headless mode | | regression-threshold | 50 | milliseconds of change at which to fail the test |