---
title: "Redux"
description: "Learn about Sentry's Redux integration."
url: https://docs.sentry.io/platforms/javascript/guides/react/features/redux/
---

# Redux | Sentry for React

To capture Redux state data, use `Sentry.createReduxEnhancer` in the same place that you initialize your Redux store.

```javascript
import { configureStore, createStore, compose } from "redux";
import * as Sentry from "@sentry/react";

// ...

const sentryReduxEnhancer = Sentry.createReduxEnhancer({
  // Optionally pass options listed below
});

// If you are using the `configureStore` API, pass the enhancer as follows:
const store = configureStore({
  reducer,
  enhancers: (getDefaultEnhancers) => {
    return getDefaultEnhancers().concat(sentryReduxEnhancer);
  },
});

// If you are using the deprecated `createStore` API, pass the enhancer as follows:
const store = createStore(reducer, sentryReduxEnhancer);
```

If you are using the deprecated `createStore` API and have other enhancers or middleware such as `thunk`:

```javascript
const store = createStore(
  rootReducer,
  compose(applyMiddleware(thunk), sentryReduxEnhancer),
);
```

##### Note

Because Sentry uses a redux **enhancer**, you should pass it as indicated above rather than passing it to `applyMiddleware`. Don't call the method when you pass it to `createStore`.

## [Normalization Depth](https://docs.sentry.io/platforms/javascript/guides/react/features/redux.md#normalization-depth)

By default, Sentry SDKs normalize any context to a depth of 3. You may want to increase this for sending Redux states by passing `normalizeDepth` to the `Sentry.init` call:

```javascript
Sentry.init({
  dsn: "___PUBLIC_DSN___",
  normalizeDepth: 10, // Or however deep you want your state context to be.
});
```

## [Redux Enhancer Options](https://docs.sentry.io/platforms/javascript/guides/react/features/redux.md#redux-enhancer-options)

To configure enhancer options, pass an options object as the first parameter to `Sentry.createReduxEnhancer`.

##### Note

While we try our best to filter out Personally Identifiable Information such as user passwords, we advise against sending sensitive information to Sentry.

`actionTransformer` (Function)

This can be used to remove sensitive information from actions. The first parameter passed to the function is the Redux action. We send all actions by default, if you don't want an action sent to Sentry, use `return null`.

```javascript
const sentryReduxEnhancer = Sentry.createReduxEnhancer({
  actionTransformer: (action) => {
    if (action.type === "GOVERNMENT_SECRETS") {
      // Return null to not log the action to Sentry
      return null;
    }
    if (action.type === "SET_PASSWORD") {
      // Return a transformed action to remove sensitive information
      return {
        ...action,
        password: null,
      };
    }

    return action;
  },
});
```

`stateTransformer` (Function)

This can be used to remove sensitive information from state. The first parameter passed to the function is the Redux state. We attach all state changes by default. If you don't want to attach state changes to events being sent to Sentry, use `return null`. Note, that if you choose not to send state to Sentry, your errors might not have the latest version attached.

```javascript
const sentryReduxEnhancer = Sentry.createReduxEnhancer({
  stateTransformer: (state) => {
    if (state.topSecret.doNotSend) {
      // Return null to not send this version of the state.
      return null;
    }

    // Transform the state to remove sensitive information
    const transformedState = {
      ...state,
      topSecret: {
        ...state.topSecret,
        // Replace sensitive information with something else
        nuclearLaunchCodes: "I love pizza",
        // or just remove it entirely
        hiddenTreasureLocation: null,
      },
      // You should also remove large data that is irrelevant to debugging to not clutter your Sentry issues
      giganticState: null,
    };

    return transformedState;
  },
});
```

`configureScopeWithState` (Function)

This is called on every state update. To use it, configure the Sentry Scope with the Redux state. The first parameter is the scope, which is the same scope instance that you would get when you call `Sentry.configureScope`. The second parameter is the latest Redux state.

```javascript
const sentryReduxEnhancer = Sentry.createReduxEnhancer({
  configureScopeWithState: (scope, state) => {
    // Set tag if the user is using imperial units.
    if (state.settings.useImperialUnits) {
      scope.setTag("user.usesImperialUnits", true);
    }
  },
});
```

`attachReduxState` (Boolean)

*(Available in version 7.69.0 and above)*

This is `true` by default. It attaches a file `redux_state.json` with Redux state to all error events sent to Sentry. It is beneficial where Redux states are too big. If the `stateTransformer` function is provided, it will attach the transformed state. If you don't want to attach the state to error events, set this to `false`.

```javascript
const sentryReduxEnhancer = Sentry.createReduxEnhancer({
  attachReduxState: false,
});
```

## [Next Steps:](https://docs.sentry.io/platforms/javascript/guides/react/features/redux.md#next-steps)

* [Return to **Getting Started**](https://docs.sentry.io/platforms/javascript/guides/react.md)
* [Return to the main integrations page](https://docs.sentry.io/platforms/javascript/guides/react/features.md)