{"id":17912,"library":"redux-sentry-middleware","title":"Redux Sentry Middleware","description":"This package provides a Redux middleware designed to integrate Redux state and actions with Sentry's unified APIs (`@sentry/browser` and `@sentry/node`). It captures dispatched actions as Sentry breadcrumbs and attaches the last action and current Redux state as additional context to error reports. The package is a rewrite of `raven-for-redux` to support newer Sentry SDKs. The latest published version is 0.2.2, released on September 7, 2018, indicating it is no longer actively maintained and has been superseded by Sentry's official Redux integration, `Sentry.createReduxEnhancer`.","status":"abandoned","version":"0.2.2","language":"javascript","source_language":"en","source_url":"https://github.com/ViditIsOnline/redux-sentry-middleware","tags":["javascript","redux","middleware","sentry","logging"],"install":[{"cmd":"npm install redux-sentry-middleware","lang":"bash","label":"npm"},{"cmd":"yarn add redux-sentry-middleware","lang":"bash","label":"yarn"},{"cmd":"pnpm add redux-sentry-middleware","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Core dependency for Redux middleware functionality.","package":"redux","optional":false},{"reason":"Required for browser-based Sentry integration.","package":"@sentry/browser","optional":true},{"reason":"Required for Node.js-based Sentry integration.","package":"@sentry/node","optional":true}],"imports":[{"note":"This is a default export, not a named export.","wrong":"import { createSentryMiddleware } from 'redux-sentry-middleware';","symbol":"createSentryMiddleware","correct":"import createSentryMiddleware from 'redux-sentry-middleware';"},{"note":"Requires Sentry's main SDK for browser or Node, which must be initialized separately.","symbol":"Sentry","correct":"import * as Sentry from '@sentry/browser';\n// or\nimport * as Sentry from '@sentry/node';"},{"note":"Standard Redux utility for applying middleware. `redux-sentry-middleware` should generally be applied after other intercepting middlewares like `redux-thunk` but before any that might catch errors.","wrong":"const applyMiddleware = require('redux').applyMiddleware;","symbol":"applyMiddleware","correct":"import { applyMiddleware } from 'redux';"}],"quickstart":{"code":"import * as Sentry from '@sentry/browser';\nimport { createStore, applyMiddleware, combineReducers } from 'redux';\nimport createSentryMiddleware from 'redux-sentry-middleware';\n\n// Initialize Sentry SDK\nSentry.init({\n  dsn: process.env.SENTRY_DSN ?? 'https://examplePublicKey@o0.ingest.sentry.io/0',\n  tracesSampleRate: 1.0,\n  // It's recommended to increase normalizeDepth for Redux states in Sentry\n  normalizeDepth: 10 // Or however deep your state context needs to be\n});\n\n// Example Reducer\nconst initialState = { count: 0, user: { name: 'Guest', id: null } };\nfunction counterReducer(state = initialState, action) {\n  switch (action.type) {\n    case 'INCREMENT':\n      return { ...state, count: state.count + 1 };\n    case 'DECREMENT':\n      // Simulate an error for testing\n      if (action.payload === 'error') {\n        throw new Error('Intentional Redux error on DECREMENT');\n      }\n      return { ...state, count: state.count - 1 };\n    case 'SET_USER':\n      return { ...state, user: action.payload };\n    default:\n      return state;\n  }\n}\n\nconst rootReducer = combineReducers({ counter: counterReducer });\n\n// Create Sentry Middleware instance\nconst sentryMiddleware = createSentryMiddleware(Sentry, {\n  breadcrumbDataFromAction: action => {\n    // Log specific action data, ensuring it's flat and not too large\n    if (action.type === 'SET_USER') {\n      return { userId: action.payload.id, userName: action.payload.name };\n    }\n    return undefined;\n  },\n  actionTransformer: action => {\n    // Remove sensitive data from actions before sending to Sentry\n    if (action.type === 'SET_USER' && action.payload && action.payload.password) {\n      const { password, ...safePayload } = action.payload;\n      return { ...action, payload: safePayload };\n    }\n    return action;\n  },\n  stateTransformer: state => {\n    // Remove sensitive data from state before sending to Sentry\n    if (state.counter && state.counter.user && state.counter.user.sensitiveInfo) {\n      const { sensitiveInfo, ...safeUser } = state.counter.user;\n      return { ...state, counter: { ...state.counter, user: safeUser } };\n    }\n    return state;\n  }\n});\n\nexport const store = createStore(\n  rootReducer,\n  applyMiddleware(sentryMiddleware)\n);\n\n// Example usage\nstore.dispatch({ type: 'INCREMENT' });\nstore.dispatch({ type: 'SET_USER', payload: { id: 123, name: 'Alice', password: 'secret' } });\n\ntry {\n  store.dispatch({ type: 'DECREMENT', payload: 'error' });\n} catch (e) {\n  console.error('Caught expected error from Redux dispatch:', e.message);\n}\n\nconsole.log('Final state:', store.getState());","lang":"javascript","description":"This quickstart demonstrates setting up `redux-sentry-middleware` with a Redux store, initializing Sentry, and using the middleware to capture actions and state. It includes examples of `breadcrumbDataFromAction`, `actionTransformer`, and `stateTransformer` to manage what data is sent to Sentry, including handling sensitive information and simulating an error."},"warnings":[{"fix":"Migrate to Sentry's official Redux integration, `Sentry.createReduxEnhancer`, which is actively maintained and designed for current Sentry SDK versions.","message":"This package is considered abandoned and has not been updated since September 2018. It is built for older Sentry SDKs (`@sentry/browser` and `@sentry/node` versions from that era). Using it with modern Sentry SDKs (v7+) is likely to cause compatibility issues or miss out on new Sentry features. Sentry now provides an official `Sentry.createReduxEnhancer` for Redux integration.","severity":"breaking","affected_versions":">=0.2.3"},{"fix":"Carefully transform your action data within `breadcrumbDataFromAction` to ensure it is a flat object with string values. Only include essential, non-sensitive information.","message":"The `breadcrumbDataFromAction` option expects the returned `data` object to be 'flat' (values must be strings, not arrays or objects). Sending complex or deeply nested data here can lead to Sentry silently dropping the data or the entire event due to size limits.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"Implement these transformers to filter or truncate large or sensitive data, returning a new, modified object rather than mutating the original. Increase Sentry's `normalizeDepth` during initialization if your state is genuinely deep and needs to be captured.","message":"Both `actionTransformer` and `stateTransformer` should return serializable values. Attempting to send excessively large actions or state objects can exceed Sentry's payload limits, causing events to be dropped. Furthermore, ensure you do not mutate the original `action` or `state` objects within these transformer functions, as this can lead to unpredictable behavior in your Redux store.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"When applying middleware using `applyMiddleware`, ensure `redux-sentry-middleware` is positioned appropriately in the array based on your desired error reporting and action flow. The Sentry blog suggests it should be the first argument to `applyMiddleware` if you want it to capture errors from other middleware. However, the README for this specific package suggests preceding it with intercepting middlewares. This might imply different behavior than newer official Sentry enhancers. For modern Sentry integrations, `Sentry.createReduxEnhancer` is typically passed directly to `createStore` or `configureStore` as an enhancer, not via `applyMiddleware`.","message":"Order of middleware matters. `redux-sentry-middleware` should typically be placed after other middlewares that might intercept or emit actions (e.g., `redux-thunk`, `redux-promise`) to ensure it captures the final action being dispatched. However, it should be before any custom error-handling middleware if you intend Sentry to be the primary error reporter.","severity":"gotcha","affected_versions":">=0.1.0"}],"env_vars":null,"last_verified":"2026-04-23T00:00:00.000Z","next_check":"2026-07-22T00:00:00.000Z","problems":[{"fix":"Ensure `Sentry.init()` has been called successfully before creating the middleware and that you are using a version of `@sentry/browser` or `@sentry/node` compatible with this middleware (likely older versions, pre-v7).","cause":"The Sentry object passed to `createSentryMiddleware` is not properly initialized or is an incompatible version. This middleware expects a Sentry object with specific methods like `captureException`, `addBreadcrumb`, etc., typically from `@sentry/browser` or `@sentry/node`.","error":"TypeError: Sentry.captureException is not a function"},{"fix":"Confirm that `createSentryMiddleware` is imported as a default export (`import createSentryMiddleware from 'redux-sentry-middleware';`) and that it is called with the `Sentry` object as the first argument: `createSentryMiddleware(Sentry, options?)`.","cause":"This error can occur if `createSentryMiddleware` is imported incorrectly (e.g., as a named import when it's a default export) or if the arguments passed to it are incorrect or missing, causing it to return an invalid middleware function.","error":"Error: Middleware is not a function"},{"fix":"Review your `actionTransformer` and `stateTransformer` to ensure they return relevant, serializable data within Sentry's size limits. For `breadcrumbDataFromAction`, verify that the returned object is 'flat' (only string values). Consider increasing `normalizeDepth` in your `Sentry.init` call if your state is very deep and important for debugging.","cause":"The `breadcrumbDataFromAction`, `actionTransformer`, or `stateTransformer` options might be misconfigured, filtering out too much data, or returning data that exceeds Sentry's payload limits or type constraints (e.g., non-flat data for breadcrumbs).","error":"Sentry events are missing Redux state or action context, or data is truncated."}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}