rollbar-redux-middleware

0.2.0 verified Sat Apr 25 auth: no javascript

Redux middleware that integrates with Rollbar error reporting. Version 0.2.0 is the current stable release. It assumes Flux Standard Action (FSA) actions where errors are indicated by an error: true flag and the payload contains the Error object. It automatically includes the Redux store state with reported errors and provides state sanitization via keypaths or a custom sanitizer function. Additionally, it offers an option to wrap all dispatched actions in a try/catch block. Differentiators: simplifies attaching Redux state to Rollbar errors and offers flexible state redaction compared to manual integration.

Common errors

error TypeError: rollbar is not a constructor ↓

cause rollbar package may be imported incorrectly; rollbar v2+ uses default export.

fix

Use import Rollbar from 'rollbar'; or const Rollbar = require('rollbar').default; for CommonJS.

error Cannot read property 'apply' of undefined ↓

cause The Rollbar instance passed to rollbarMiddleware is not properly configured or undefined.

fix

Ensure Rollbar is instantiated with an accessToken: const Rollbar = new rollbar({ accessToken: '...' });

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

cause The middleware does not handle async actions like thunks; it expects plain FSA objects.

fix

Apply redux-thunk or other async middleware before this middleware in the chain.

Warnings

gotcha Assumes action is a Flux Standard Action with error: true to report errors; other error patterns are ignored unless try/catch wrapping is enabled. ↓

fix Ensure actions conform to FSA pattern (error: true, payload: Error) or set third parameter to true to wrap all actions in try/catch.

gotcha The second parameter to rollbarMiddleware can be either an array of keypaths or a function; passing a non-array, non-function will cause unexpected behavior. ↓

fix Provide either an array of strings (keypaths) or a function (stateSanitizer) as the second argument.

gotcha The rollbar instance must be passed as the first argument; it is not imported internally. ↓

fix Remember to import and instantiate rollbar separately before passing it to rollbarMiddleware.

Install

npm install rollbar-redux-middleware

yarn add rollbar-redux-middleware

pnpm add rollbar-redux-middleware

Imports

rollbarMiddleware

wrong

const rollbarMiddleware = require('rollbar-redux-middleware');

correct

import rollbarMiddleware from 'rollbar-redux-middleware';

Default export is a function. CJS require works but ESM is preferred.

Quickstart

Shows basic setup: importing rollbar and middleware, creating a Rollbar instance, and applying the middleware with state sanitization keypaths.

import { createStore, applyMiddleware } from 'redux';
import rollbar from 'rollbar';
import rollbarMiddleware from 'rollbar-redux-middleware';

const Rollbar = new rollbar({ accessToken: process.env.ROLLBAR_ACCESS_TOKEN ?? '' });

const initialState = { user: { name: 'Alice' } };
const rootReducer = (state = initialState, action) => state;

const rollbarRedux = rollbarMiddleware(Rollbar, ['user.name']);

const store = createStore(
  rootReducer,
  initialState,
  applyMiddleware(rollbarRedux)
);

store.dispatch({ type: 'TEST' });
console.log('Middleware configured. Errors will be reported to Rollbar.');