Redux Mixpanel Middleware

1.0.1 verified Sat Apr 25 auth: no javascript maintenance

A Redux middleware that sends Mixpanel events from dispatched actions. Version 1.0.1 integrates with mixpanel-browser client library and intercepts actions with a `meta.mixpanel` property to track events and properties. No active maintenance, few downloads, and limited flexibility compared to more modern analytics middlewares like redux-beacon.

Common errors

error Uncaught TypeError: mixpanel.init is not a function ↓

cause Missing or incorrect import of mixpanel-browser library.

fix

Ensure mixpanel-browser is installed and imported: import mixpanel from 'mixpanel-browser';

error Actions must be plain objects. Use custom middleware for async actions. ↓

cause Using middleware with async actions that return functions (e.g., redux-thunk) before this middleware in the chain.

fix

Apply async middleware (e.g., redux-thunk) before MixpanelMiddleware in applyMiddleware.

Warnings

gotcha Middleware requires `meta.mixpanel` object; without it no event is sent and no error is thrown. ↓

fix Ensure every action you want tracked includes `meta: { mixpanel: { event: 'EventName', props: {} } }`.

gotcha Uses `mixpanel-browser` which may not work in server-side Node.js environments without proper polyfills. ↓

fix Only use in browser or configure a mock mixpanel client for SSR.

deprecated Library is no longer actively maintained; consider migrating to redux-beacon or custom middleware for more flexibility. ↓

fix Replace with redux-beacon or write a custom Redux middleware using mixpanel's track method directly.

Install

npm install redux-mixpanel-middleware

yarn add redux-mixpanel-middleware

pnpm add redux-mixpanel-middleware

Imports

MixpanelMiddleware

wrong

const MixpanelMiddleware = require('redux-mixpanel-middleware');

correct

import MixpanelMiddleware from 'redux-mixpanel-middleware';

Default export; CJS require works but type definitions may be missing.

Quickstart

Initialize Mixpanel browser client, create middleware instance, apply to Redux store, and dispatch action with mixpanel meta to track event.

import mixpanel from 'mixpanel-browser';
import MixpanelMiddleware from 'redux-mixpanel-middleware';
import { createStore, applyMiddleware } from 'redux';

const MIXPANEL_TOKEN = process.env.MIXPANEL_TOKEN ?? 'your-token';
mixpanel.init(MIXPANEL_TOKEN);
const mixpanelMiddleware = new MixpanelMiddleware(mixpanel);

const reducer = (state = {}, action) => state;
const store = createStore(reducer, applyMiddleware(mixpanelMiddleware));

store.dispatch({
  type: 'ADD_TO_CART',
  payload: { id: 1, name: 'Widget' },
  meta: {
    mixpanel: {
      event: 'Add to cart',
      props: {
        id: 1,
        name: 'Widget',
        price: 10
      }
    }
  }
});