@mrporter/frontend-monitoring

MRP Front End Monitoring

Installation

npm install --save @mrporter/frontend-monitoring

Usage

import { setupMonitoring } from '@mrporter/frontend-monitoring';

setupMonitoring({
    projectId: 'abc123',
    writeKey: 'def456'
});

If no projectId is passed in, trackEvent will log events to the console ('dev mode') rather than attempt to fire off events to keen.

API

Track Event

import { trackEvent } from '@mrporter/frontend-monitoring';

trackEvent(event, sampleRate);

// event should be of the form:
{ 
    collection: 'timeTakenForThing',
    event_data: '123' // using 'snake_case' to match keen.io convention
};

The sampleRate is a float between 0 and 1, representing the proportion of events you want to track (e.g, 0 tracks nothing, 0.5 tracks half the events, 1 tracks all.)

The following global properties are sent with every event: (see https://keen.io/docs/api/#data-enrichment)

• ip_address
• user_agent
• page_url
• referrer.url
• referrer.info
• ip_geo_info
• parsed_user_agent
• parsed_page_url

Track Page Performance

import { trackPagePerformance } from '@mrporter/frontend-monitoring';

trackPagePerformance();

This uses javascript's navigation timing API to send a breakdown of load time to keen. This will send two 'page_performance' events to keen, one for timing details up to and including response, another for DOM complete/interactive/loaded.

now

import { now } from '@mrporter/frontend-monitoring';

const ms = now();

This is a wrapper around performance.now() - if this exists, then the microsecond precision value is used, otherwise Date.now() is used with millisecond precision.

Tasks

• npm run dist: transpile from ES6 to ES5
• npm test: run tests