redux-catch

1.3.1 verified Sat Apr 25 auth: no javascript

Error catcher middleware for Redux that intercepts errors thrown in reducers and synchronous middlewares. Version 1.3.1 is the latest stable release, with infrequent updates. It allows you to provide a custom error handler function that receives the error, current state via getState, the last dispatched action, and a dispatch function. Unlike Redux's built-in error handling, redux-catch supports logging, reporting to services like Sentry, and optionally dispatching actions on errors. It should be placed as the first middleware in the chain. Comes as ES module (no Babel build, uses arrow functions).

Common errors

error Uncaught TypeError: Cannot destructure property 'getState' of '...' as it is undefined. ↓

cause Using the error handler signature incorrectly; the getState parameter is the second argument, but may be destructured wrong if using older version.

fix

Use function(error, getState, lastAction, dispatch) { ... } for v1.3.0+.

error Uncaught ReferenceError: regeneratorRuntime is not defined ↓

cause The package uses async generators or ES6 features without proper transpiler setup.

fix

Ensure your build system supports ES6 features; redux-catch uses arrow functions. Add babel-polyfill if needed for older environments.

Warnings

gotcha redux-catch only catches errors from reducers and synchronous middlewares, not from asynchronous middlewares or dispatched action creators. ↓

fix Use a different error handling pattern for async middleware (e.g., wrap your async thunks in try-catch).

gotcha The middleware must be placed as the first middleware in the chain to catch errors from all subsequent middleware. ↓

fix Ensure reduxCatch is the first argument to applyMiddleware, or positioned before other middleware.

Install

npm install redux-catch

yarn add redux-catch

pnpm add redux-catch

Imports

default (reduxCatch)
wrong
```
const reduxCatch = require('redux-catch');
```
correct
```
import reduxCatch from 'redux-catch';
```
Package is ESM-only; commonJS require may fail in some bundlers.

Quickstart

Creates a Redux store with the redux-catch middleware to catch errors from reducers and sync middlewares, logging them and optionally dispatching actions.

import { createStore, applyMiddleware } from 'redux';
import reduxCatch from 'redux-catch';
import reducer from './reducer';

function errorHandler(error, getState, lastAction, dispatch) {
  console.error('Error caught by middleware:', error);
  console.debug('Current state:', getState());
  console.debug('Last action:', lastAction);
  // Optionally dispatch an error action: dispatch({ type: 'ERROR', payload: error });
}

const store = createStore(
  reducer,
  applyMiddleware(reduxCatch(errorHandler))
);

// Usage: dispatching an action that causes an error in reducer will trigger errorHandler
store.dispatch({ type: 'INVALID_ACTION' });