Redux middleware for reporting actions to third party APIs.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
src prune old examples, update deps Jun 9, 2017
test prune old examples, update deps Jun 9, 2017
.babelrc prune old examples, update deps Jun 9, 2017
.eslintrc prune old examples, update deps Jun 9, 2017
.gitignore prune old examples, update deps Jun 9, 2017
.npmignore
.npmrc prune old examples, update deps Jun 9, 2017
.travis.yml prune old examples, update deps Jun 9, 2017
LICENSE Initial commit Jun 9, 2017
README.md prune old examples, update deps Jun 9, 2017
package.json bump Jun 9, 2017
rollup.config.js prune old examples, update deps Jun 9, 2017
yarn.lock prune old examples, update deps Jun 9, 2017

README.md

redux-reporter

npm version

Redux middleware for reporting actions to third party APIs. This package is extremely useful for analytics and error handling. Can be used with various APIs such as New Relic, Sentry, Adobe DTM, Keen

Installation

npm install --save redux-reporter

Usage

General Reporting

Create your reporting middleware

// /middleware/myReporter.js
import reporter from 'redux-reporter';

export default reporter(({ type, payload }, getState) => {

    try {
        // report to external API
    } catch (err) {}

});

Attach meta data to your actions

// /actions/MyActions.js
export function myAction() {
    let type = 'MY_ACTION';
    return {
        type,
        meta: {
            report: {  // default attribute that is selected by redux-reporter
                type,
                payload: 'example payload'
            }
        }
    };
}

Configure store with your middleware

// /store/configureStore.js
import { compose, createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers/rootReducer';
import myReporter from './middleware/myReporter';  // import your reporter

const isBrowser = (typeof window !== 'undefined');
const enhancer = compose(
    applyMiddleware(...[thunk, myReporter]),
    isBrowser && window.devToolsExtension) ? window.devToolsExtension() : (f) => f
);

export default (initialState = {}) => {
  return createStore(rootReducer, initialState, enhancer);
}

Reporting to Multiple APIs: You can report to multiple APIs by configuring multiple middlewares and attaching additional attributes to your actions

// /actions/MyActions.js
export function myAction() {
    let type = 'MY_ACTION';
    return {
        type,
        meta: {
          analytics: {
              type,
              payload: 'example payload'
          },
          experiments: {
              type,
              payload: 'example payload'
          }
        }
    };
}

Example w/ New Relic

error reporting

// /middleware/newrelic.js
import { errorReporter as newrelicErrorReporter, crashReporter as newrelicCrashReporter } from 'redux-reporter';

const report = (error) => {
  try {
    window.newrelic.noticeError(error);
  } catch (err) {}
};

export const crashReporter = newrelicCrashReporter(report);
export const errorReporter = newrelicErrorReporter(report);

// /actions/MyActions.js
export function myAction() {
    let type = 'MY_ERROR_ACTION';
    return {
        type,
        error: true
        payload: new Error('My Handled Error')
    };
}

User behavior (New Relic browser/insights)

// /middleware/newrelic.js
import reporter from 'redux-reporter';

export const analyticsReporter = reporter(({ type, payload }) => {
  try {
    window.newrelic.addPageAction(type, payload);
  } catch (err) {}
}, ({ meta = {} }) => meta.analytics);

// /actions/MyActions.js
export function myAction() {
    let type = 'MY_ACTION';
    return {
        type,
        meta: {
          analytics: {
              type,
              payload: 'example payload'
          }
        }
    };
}