@mrporter/frontend-monitoring
v5.0.4
Published
Utils and Events for MRP front end monitoring
Downloads
8
Readme
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 ES5npm test
: run tests