@ember-performance-monitoring/tracerbench-compare-action v0.1.0

@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

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.