2.5.3 • Published 1 year ago

fusion-plugin-browser-performance-emitter v2.5.3

Weekly downloads
37
License
MIT
Repository
github
Last release
1 year ago

fusion-plugin-browser-performance-emitter

Build status

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.


Table of contents


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
namecalculation
redirection_timefetchStart - navigationStart
time_to_first_byteresponseStart - navigationStart
dom_content_loadeddomContentLoadedEventEnd - fetchStart
full_page_loadloadEventEnd - fetchStart
dnsdomainLookupEnd - domainLookupStart
tcp_connection_timeconnectEnd - connectStart
browser_request_timeresponseEnd - responseStart
browser_request_first_byteresponseStart - requestStart
browser_request_response_timeresponseEnd - responseStart
dom_interactive_timedomInteractive - responseEnd
total_resource_load_timeloadEventStart - responseEnd
total_blocking_resource_load_timedomContentLoadedEventStart - responseEnd
resources_avg_load_timeOne 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
]
2.5.3

1 year ago

2.5.0

1 year ago

2.5.2

1 year ago

2.5.1

1 year ago

2.4.1

1 year ago

2.4.0

1 year ago

2.4.3

1 year ago

2.4.2

1 year ago

2.4.4

1 year ago

2.3.12

2 years ago

2.3.11

2 years ago

2.3.10

2 years ago

2.3.8

2 years ago

2.3.7

2 years ago

2.3.9

2 years ago

2.3.6

2 years ago

2.3.5

2 years ago

2.3.2

2 years ago

2.3.4

2 years ago

2.3.3

2 years ago

2.3.1

2 years ago

2.3.0

3 years ago

2.2.13

3 years ago

2.2.12

3 years ago

2.2.11

3 years ago

2.2.10

3 years ago

2.2.9

3 years ago

2.2.8

3 years ago

2.2.7

3 years ago

2.2.6

4 years ago

2.2.5

4 years ago

2.2.4

4 years ago

2.2.3

4 years ago

2.2.2

4 years ago

2.2.1

4 years ago

2.2.0

4 years ago

2.1.11

4 years ago

2.1.10

4 years ago

2.1.9

4 years ago

2.1.8

5 years ago

2.1.7

5 years ago

2.1.6

5 years ago

2.1.5

5 years ago

2.1.4

5 years ago

2.1.3

5 years ago

2.1.2

5 years ago

2.1.1

5 years ago

2.1.0

5 years ago

2.0.0

5 years ago

1.8.1

5 years ago

1.8.1-0

5 years ago

1.8.0

5 years ago

1.7.2-2

5 years ago

1.7.2-1

5 years ago

1.7.2-0

5 years ago

1.7.1

5 years ago

1.7.0

6 years ago

1.6.2-0

6 years ago

1.6.1

6 years ago

1.7.0-0

6 years ago

1.6.0

6 years ago

1.6.0-0

6 years ago

1.5.0

6 years ago

1.4.3

6 years ago

1.4.2

6 years ago

1.4.1

6 years ago

1.4.0

6 years ago

1.0.3

6 years ago

1.0.2

6 years ago

1.0.1

6 years ago

1.0.0

6 years ago

0.2.2

6 years ago

0.2.1

6 years ago

0.2.0

6 years ago

0.1.11

6 years ago

0.1.10

7 years ago

0.1.9

7 years ago

0.1.8

7 years ago

0.1.4

7 years ago

0.1.3

7 years ago

0.1.2

7 years ago

0.1.1

7 years ago

0.1.0

7 years ago