Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including redux-catch with all npm packages installed. Try it out:

var reduxCatch = require("redux-catch")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

redux-catch v1.3.1

Error catcher middleware for Redux reducers and sync middlewares

redux-catch

Error catcher middleware for Redux reducers and sync middlewares.

Build Status XO code style

API

Apply middleware

import { createStore, applyMiddleware } from 'redux';

import reduxCatch from 'redux-catch';

import reducer from './reducer';

function errorHandler(error, getState, lastAction, dispatch) {
  console.error(error);
  console.debug('current state', getState());
  console.debug('last action was', lastAction);
  // optionally dispatch an action due to the error using the dispatch parameter
}

const store = createStore(reducer, applyMiddleware(
  reduxCatch(errorHandler)
));
  • reduxCatch receive a function to use when an error happen.
  • The error handler function could be just a console.error like the example above or a function to log the error in some kind of error tracking platform.
  • You should use this middleware as the first middleware in the chain, so its allowed to catch all the possible errors in the application.

Using it with Sentry

To use it with Sentry just download the Sentry script from npm:

npm i -S raven-js raven
  • raven-js: This is the client for browser usage.
  • raven-node: This is the client for server usage.

Now load and configure your client:

import Raven from 'raven-js';

const sentryKey = '<key>';

Raven
  .config(`https://${sentryKey}@app.getsentry.com/<project>`)
  .install();

And then use Raven.captureException as the error handler like this:

const store = createStore(reducer, applyMiddleware(
  reduxCatch(error => Raven.captureException(error));
));

Now redux-catch will start to send the errors of your reducers and middlewares to Sentry.

Add state as extra data

You can also add the state data as extra data for your errors so you can know the state at the moment of the error.

function errorHandler(error, getState, action) {
  Raven.context({
    state: getState(),
    action,
  });
  Raven.captureException(error);
}
RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free