redux-appinsights-middleware

Redux AppInsights Middleware (Docs)

This middleware provides a more robust AppInsights API for Redux-based applications.

Installation

At first, install the package:

$ npm install redux-appinsights-middleware

Usage

Then use a middleware and reducer in your redux store:

import { applyMiddleware, combineReducers, compose, createStore } from "redux";
import { setup, createAppInsightsMiddleware, createAppInsightsReducer } from "redux-appinsights-middleware";
import { AppInsights } from "applicationinsights-js";

import * as reducers from "./reducers/";

const composeEnhancers = (window as any).__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

export const store = createStore<IState>(
    combineReducers<IState>({ ...reducers, appinsights: createAppInsightsReducer() }),
    composeEnhancers(applyMiddleware(createAppInsightsMiddleware(AppInsights) )),
);

// Now you can track events like this:
store.dispatch({
    type: "app/MY_ACTION",
    payload: { ... },
    appinsights: {
        method: "trackPageView",
        data: [ "Page Title", "http://page.url" ],
    }
});

// If you aren't dispatch this action, nothing will be sent to AppInsights
store.dispatch(setup(AI_KEY));