@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',
    globalProperties: {
        app_name: 'myaccount',
        business: 'mrporter'
    }
});

The globalProperties object can contain any default properties you want to pass with every event. You can specify an app_name property and business here to easily differentiate when querying keen. If these aren't set, a warning will be logged to the console in dev mode.

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