@mrporter/frontend-monitoring/README.md

Utils and Events for MRP front end 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