fusion-plugin-browser-performance-emitter

The plugin emits events of performance stats from the browser on initial page loads - with the following API when avaliable: (see https://developer.mozilla.org/en-US/docs/Web/API/Window/performance)

On the server-side, it calculate performance opinionate metrics from the stats emitted from the browser, then re-emits a new event. Refer to Events section for a list of events emitted.

Installation
Usage
Setup
API
Events
- Events emitted

Installation

yarn add fusion-plugin-browser-performance-emitter

Usage

To consume the calculated stats, listen to browser-performance-emitter:stats event on the server-side.

import {createPlugin} from 'fusion-core';
import {UniversalEventsToken} from 'fusion-plugin-universal-events';

export default createPlugin({
  deps: { emitter: UniversalEventsToken },
  provides: deps => {
    const emitter = deps.emitter;
    emitter.on('browser-performance-emitter:stats', e => {
      console.log(e); // log events to console
    });
  }
});

Setup

// src/main.js
import App from 'fusion-react';
import UniversalEvents, {UniversalEventsToken} from 'fusion-plugin-universal-events';
import BrowserPerformanceEmitter from 'fusion-plugin-browser-performance-emitter';

import PerformanceLogging from './performance-logging';

export default () => {
  const app = new App();
  // ...
  app.register(UniversalEventsToken, UniversalEvents);
  app.register(BrowserPerformanceEmitter);

  // (optional) a plugin to consume browser performance events
  app.register(PerformanceLogging);
  // ...
  return app;
}

API

Registration API

`BrowserPerformanceEmitter`

import BrowserPerformanceEmitter from 'fusion-plugin-browser-performance-emitter';

The browser performance emitter plugin. Typically, it doesn't need to be associated with a token.

Dependencies

`UniversalEventsToken`

import UniversalEvents, {UniversalEventsToken} from 'fusion-plugin-universal-events';

app.register(UniversalEventsToken, UniversalEvents);

An event emitter plugin to emit stats to, such as the one provided by fusion-plugin-universal-events.

Service API

This package has no public API methods. To consume performance events, add an event listener for the browser-performance-emitter:stats event on the server-side.

Events

Events emitted

`browser-performance-emitter:stats`

{
  calculatedStats: {
    // Metrics
  },
  timingValues: {
    // "Raw" timing values from `window.performance.timing`
  },
  resourceEntries: {
    // An array of serialized Resource Timing entries
  }
}

calculatedStats

name	calculation
`redirection_time`	`fetchStart` - `navigationStart`
`time_to_first_byte`	`responseStart` - `navigationStart`
`dom_content_loaded`	`domContentLoadedEventEnd` - `fetchStart`
`full_page_load`	`loadEventEnd` - `fetchStart`
`dns`	`domainLookupEnd` - `domainLookupStart`
`tcp_connection_time`	`connectEnd` - `connectStart`
`browser_request_time`	`responseEnd` - `responseStart`
`browser_request_first_byte`	`responseStart` - `requestStart`
`browser_request_response_time`	`responseEnd` - `responseStart`
`dom_interactive_time`	`domInteractive` - `responseEnd`
`total_resource_load_time`	`loadEventStart` - `responseEnd`
`total_blocking_resource_load_time`	`domContentLoadedEventStart` - `responseEnd`
`resources_avg_load_time`	One metric per resource type (e.g. CSS/JS/Image) that represents the mean time for resources of that type to be loaded. Example: `{js: 154, image: 405}`

timingValues

see https://www.w3.org/TR/navigation-timing/#sec-navigation-timing-interface for a complete list of properties

resourceEntries

see https://w3c.github.io/resource-timing/#sec-performanceresourcetiming for a complete list of properties

[
  {
    name: 'http://localhost:3000/_static/client-main.js',
    entryType: 'resource',
    // ...other resource timing properties
  },
  // more entries
]

Fusion.js