Utils and Events for MRP front end monitoring


5.0.43 years ago5 years agoMinified + gzip package size for @mrporter/frontend-monitoring in KB


MRP Front End Monitoring


npm install --save @mrporter/frontend-monitoring


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

    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.


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';


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.


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.


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

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.