MelbJS - Metrics on the front, data at the back

bucky.js

import { metricsPrefix } from 'config';
import bucky from 'bucky';
import { log } from 'logger';
import superagentTiming from 'superagent-timing';

function urlToKey(url) {
  return `${bucky.requests.urlToKey(url).replace(/\./g, '-')}`;
}

function metricsHandler(metrics) {
  const { request: { url, method }, duration, response: { statusCode, text } } = metrics;
  const prefix = `${metricsPrefix}.api.${urlToKey(url)}.${method}`.toLowerCase();

  bucky.timer.send(`${prefix}.time`, duration);
  bucky.count(`${prefix}.count`);
  bucky.count(`${prefix}.status_code.${statusCode}`);
  bucky.send(`${prefix}.response_size`, text.length);
}

function errorHandler(error) {
  // hack until a generic error handler (works on client and server)
  // is added to the project
  if (ENV.CLIENT) {
    window.Raygun.send(error);
  }

  log.error(error, 'Error adding metrics request');
}

export default superagentTiming(metricsHandler, errorHandler);

createStore.js

// https://github.com/quangbuule/redux-example/blob/redux%40v1.0.0-rc/src/js/lib/createStore.js
import _ from 'lodash';
import { createStore, combineReducers, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import * as reducers from 'reducers';
import bucky from 'bucky';
import analytics from 'redux-analytics';

export function arrayMiddleware() {
  return next =>
    (action) => {
      if (_.isArray(action)) {
        action.forEach((item) => next(item));
        return;
      }

      next(action);
    };
}

const track = ({ type, payload = {} }) => {
  const { value = 1 } = payload;
  const key = `mymetricnamespace.actions.${type}`;
  bucky.count(key, value);
};
const analyticsMiddleware = analytics(track, ({ meta }) => meta.metrics);

export default function (initialState) {
  const createStoreWithMiddleware = applyMiddleware(
    arrayMiddleware,
    thunk,
    analyticsMiddleware
  )(createStore);

  const reducer = combineReducers(reducers);

  return createStoreWithMiddleware(reducer, initialState);
}

HelloApp.js

import bucky from 'bucky';

class HelloApp extends React.Component {
  constructor(props) {
    super(props);
    bucky.send('helloapp.constructor', 2432.43434);

    this.state = {
      filterType: 'all'
    };
  }

s_code.js

    <script type="text/javascript">
    //<![CDATA[
    s.businessUnit = 'ske';
s.country = 'au';
s.platform = 'd';
s.section = 'homepage';
s.trackingServer = 'info.seek.com';
s.trackingServerSecure = 'info.seek.com';

    require(['omniture'], function (omniture) {

        
        var queueTrackingOnly = 'false';
        if (queueTrackingOnly == 'true' && omniture.store) {
            omniture.store({"pageName":"home page","channel":"home","prop4":"home page","prop6":"home","prop11":"b19ee802-ce67-e511-80e9-6c3be5b017d4","prop12":"loggedin","prop54":"c79529bc-4559-49be-a5b6-8fc8b42c27be","eVar54":"c79529bc-4559-49be-a5b6-8fc8b42c27be"});
        }
        else if (omniture.post) {
            omniture.post({"pageName":"home page","channel":"home","prop4":"home page","prop6":"home","prop11":"b19ee802-ce67-e511-80e9-6c3be5b017d4","prop12":"loggedin","prop54":"c79529bc-4559-49be-a5b6-8fc8b42c27be","eVar54":"c79529bc-4559-49be-a5b6-8fc8b42c27be"});
        }
        else {
            s.pageName = 'home page';
s.channel = 'home';
s.prop4 = 'home page';
s.prop6 = 'home';
s.prop11 = 'b19ee802-ce67-e511-80e9-6c3be5b017d4';
s.prop12 = 'loggedin';
s.prop54 = 'c79529bc-4559-49be-a5b6-8fc8b42c27be';
s.eVar54 = 'c79529bc-4559-49be-a5b6-8fc8b42c27be';

            var s_code = s.t(); if (s_code) document.write(s_code);
        }
    });
    //]]>
</script>

server.js

import bucky from 'bucky';
import { metricsHost, metricsIsEnabled } from 'config';

bucky
  .setOptions({
    host: metricsHost,
    active: metricsIsEnabled
  });

some-redux-action.js

// Will result in the statsd metric ${metricsPrefix}.actions.my-analytics-event.special to be incremented by 3
const action = {
  type: 'MY_ACTION',
  meta: {
    analytics: {
      type: 'SOME_EVENT',
      metrics: {
        type: 'my-analytics-event',
        postfix: 'special', //
        value: 3 // default is 1
      }
    }
  }
};