@mrporter/frontend-monitoring

    5.0.4 • Public • Published

    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

    Install

    npm i @mrporter/frontend-monitoring

    DownloadsWeekly Downloads

    1

    Version

    5.0.4

    License

    none

    Unpacked Size

    10.9 kB

    Total Files

    5

    Last publish

    Collaborators

    • mrporteradmin
    • mrporterjenkins