Redux Sentry Middleware (Legacy)

1.2.0 verified Thu Apr 23 auth: no javascript abandoned

Redux middleware for sending error reports to Sentry through raven-js. This package, currently at version 1.2.0, was last published in January 2017, making it effectively abandoned. It automatically intercepts JavaScript errors that occur during action dispatch, capturing the error, the action that caused it, and the entire Redux application state for detailed crash reports. A key differentiating feature at the time was its deep integration with Redux state for context. However, its core dependency, `raven-js`, was officially deprecated by Sentry in Q2 2020 in favor of the modern `@sentry/browser` SDK. This means while the middleware itself may technically still function with older Sentry setups, it relies on a legacy library that no longer receives updates and lacks many features of the current Sentry ecosystem. Users should consider migrating to `redux-sentry-middleware` or a custom solution built with `@sentry/browser` for modern Sentry integration.

Common errors

error Error: Raven has not been configured. ↓

cause This error occurs when `Raven.config().install()` has not been called or has failed before `redux-raven-middleware` attempts to initialize or capture an error.

fix

Ensure raven-js is properly configured and installed before the Redux store is created and redux-raven-middleware is applied. Check for duplicate raven-js bundles or incorrect DSNs.

error HTTP Error: 413 Request Entity Too Large ↓

cause The data payload (especially the Redux state and action) being sent to Sentry exceeds Sentry's maximum allowed event size (typically 100 KB).

fix

Use the stateTransformer and actionTransformer options to filter, redact, or reduce the size of the Redux state and action objects before they are sent to Sentry.

error TypeError: Cannot read properties of undefined (reading 'config') ↓

cause This usually indicates that `Raven` from `raven-js` is not available in the global scope or correctly imported when `redux-raven-middleware` tries to access it.

fix

Verify that raven-js is correctly installed, imported, and initialized in your application. If raven-js is loaded via a <script> tag, ensure it's loaded before your application code that uses redux-raven-middleware.

Warnings

breaking The underlying `raven-js` library is officially deprecated by Sentry in favor of `@sentry/browser`. This package will not work with modern Sentry SDKs without significant rework and `raven-js` receives no further updates or new features. ↓

fix Migrate to `redux-sentry-middleware` or implement a custom Redux middleware using `@sentry/browser` or `@sentry/react` (for React applications) to ensure compatibility with current Sentry features and security updates.

breaking This package is effectively abandoned, with its last update occurring over 9 years ago (January 2017). It is not maintained, and there are open issues on its GitHub repository. ↓

fix Consider alternatives like `redux-sentry-middleware` which is an API-compatible fork supporting the modern Sentry SDKs, or roll your own integration using the official Sentry SDKs.

gotcha Sending the entire Redux state can lead to 'Request too large' errors from Sentry, especially with complex or large state trees. Sentry has payload limits (e.g., 100 KB per event). ↓

fix Utilize the `stateTransformer` option within the middleware to prune or serialize the state before sending, including only relevant debugging information. For example, `{ stateTransformer: state => ({ user: state.user.id, currentRoute: state.router.location.pathname }) }`.

gotcha The `RavenMiddleware` should generally be placed early in the `applyMiddleware` chain. If placed after other middleware that might throw errors (e.g., `redux-thunk`), those errors might not be captured by `redux-raven-middleware`. ↓

fix Ensure `RavenMiddleware` is one of the first arguments passed to `applyMiddleware` in your Redux store configuration.

deprecated Sentry's API and best practices for configuring context (e.g., user, tags, extra data) have evolved significantly since this middleware was last updated. This package uses older `raven-js` methods (like `Raven.config`) which may not align with current `@sentry/browser` SDK patterns. ↓

fix When migrating to modern Sentry SDKs, review Sentry's current documentation for setting user context, tags, and extra data, which typically involves `Sentry.setUser()`, `Sentry.setTag()`, `Sentry.setContext()`, or using `beforeSend` callbacks.

Install

npm install redux-raven-middleware

yarn add redux-raven-middleware

pnpm add redux-raven-middleware

Imports

RavenMiddleware

wrong

import { RavenMiddleware } from 'redux-raven-middleware';
// Or for CommonJS:
const RavenMiddleware = require('redux-raven-middleware'); // Will return the function directly due to module.exports behavior

correct

import RavenMiddleware from 'redux-raven-middleware';

This package exports a default function. For CommonJS, `require('redux-raven-middleware')` directly resolves to the middleware function.

applyMiddleware

wrong

const applyMiddleware = require('redux').applyMiddleware;

correct

import { applyMiddleware } from 'redux';

Standard named import from Redux library.

createStore

wrong

const createStore = require('redux').createStore;

correct

import { createStore } from 'redux';

Standard named import from Redux library.

Quickstart

Demonstrates setting up `redux-raven-middleware` with `applyMiddleware`, including options for transforming actions and state, and intentionally triggering an error to show Sentry integration.

import { applyMiddleware, createStore } from 'redux';
import RavenMiddleware from 'redux-raven-middleware';

// A dummy reducer for demonstration purposes
const initialState = { count: 0 };
function rootReducer(state = initialState, action) {
  switch (action.type) {
    case 'INCREMENT':
      // Intentionally cause an error for testing Sentry integration
      if (action.fail) {
        throw new Error('Simulated Redux error!');
      }
      return { ...state, count: state.count + 1 };
    default:
      return state;
  }
}

// Replace 'YOUR_SENTRY_DSN' with your actual DSN, ideally from environment variables
const SENTRY_DSN = process.env.SENTRY_DSN ?? 'https://examplePublicKey@o0.ingest.sentry.io/0';

const createStoreWithMiddleware = applyMiddleware(
  RavenMiddleware(SENTRY_DSN, {
    // Optional Sentry configuration
    environment: process.env.NODE_ENV || 'development',
  }, {
    // Optional middleware configuration
    actionTransformer: action => {
      // Prevent sensitive data from being sent to Sentry
      if (action.type === 'LOGIN' && action.payload && action.payload.password) {
        return { ...action, payload: { ...action.payload, password: '[REDACTED]' } };
      }
      return action;
    },
    stateTransformer: state => {
      // Limit the size of the state sent to Sentry to avoid 'Request too large' errors
      return { sensitiveData: '[REDACTED]', count: state.count };
    },
    logger: console.warn // Use console.warn instead of console.error for internal logs
  })
)(createStore);

const store = createStoreWithMiddleware(rootReducer);

console.log('Initial state:', store.getState());
store.dispatch({ type: 'INCREMENT' });
console.log('State after increment:', store.getState());

try {
  store.dispatch({ type: 'INCREMENT', fail: true });
} catch (e) {
  console.error('Caught expected error from Redux dispatch:', e.message);
  // Sentry would have captured this error via the middleware
}

// To run this, ensure 'raven-js' is installed: npm install raven-js
// Set SENTRY_DSN environment variable or replace placeholder.