feat(redux): Add 'attachReduxState' option

packages/react/src/redux.ts

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { configureScope, getCurrentHub } from '@sentry/browser';
+import { addGlobalEventProcessor, configureScope, getCurrentHub } from '@sentry/browser';
 import type { Scope } from '@sentry/types';
 import { addNonEnumerableProperty } from '@sentry/utils';
 
@@ -49,6 +49,12 @@ type StoreEnhancerStoreCreator<Ext = Record<string, unknown>, StateExt = never>
 ) => Store<ExtendState<S, StateExt>, A, StateExt, Ext> & Ext;
 
 export interface SentryEnhancerOptions<S = any> {
+  /**
+   * Redux state in attachments or not.
+   * @default true
+   */
+  attachReduxState?: boolean;
+
   /**
    * Transforms the state before attaching it to an event.
    * Use this to remove any private data before sending it to Sentry.
@@ -71,6 +77,7 @@ const ACTION_BREADCRUMB_CATEGORY = 'redux.action';
 const ACTION_BREADCRUMB_TYPE = 'info';
 
 const defaultOptions: SentryEnhancerOptions = {
+  attachReduxState: true,
   actionTransformer: action => action,
   stateTransformer: state => state || null,
 };
@@ -89,6 +96,22 @@ function createReduxEnhancer(enhancerOptions?: Partial<SentryEnhancerOptions>):
 
   return (next: StoreEnhancerStoreCreator): StoreEnhancerStoreCreator =>
     <S = any, A extends Action = AnyAction>(reducer: Reducer<S, A>, initialState?: PreloadedState<S>) => {
+      options.attachReduxState &&
+        addGlobalEventProcessor((event, hint) => {
+          if (
+            event.contexts &&
+            event.contexts.state &&
+            event.contexts.state.state &&
+            event.contexts.state.state.type === 'redux'
+          ) {
+            hint.attachments = [
+              ...(hint.attachments || []),
+              { filename: 'redux_state.json', data: JSON.stringify(event.contexts.state.state.value) },
+            ];
+          }
+          return event;
+        });
+
       const sentryReducer: Reducer<S, A> = (state, action): S => {
         const newState = reducer(state, action);
 

packages/react/test/reduxStateAttachments.test.ts

@@ -0,0 +1,105 @@
+import * as Sentry from '@sentry/browser';
+import * as Redux from 'redux';
+
+import { createReduxEnhancer } from '../src/redux';
+
+const mockAddBreadcrumb = jest.fn();
+const mockSetContext = jest.fn();
+
+jest.mock('@sentry/browser', () => ({
+  ...jest.requireActual('@sentry/browser'),
+}));
+
+afterEach(() => {
+  mockAddBreadcrumb.mockReset();
+  mockSetContext.mockReset();
+});
+
+describe('Redux State Attachments', () => {
+  it('attaches Redux state to Sentry scope', () => {
+    const enhancer = createReduxEnhancer();
+
+    const initialState = {
+      value: 'initial',
+    };
+
+    const store = Redux.createStore((state = initialState) => state, enhancer);
+
+    const updateAction = { type: 'UPDATE_VALUE', value: 'updated' };
+
+    store.dispatch(updateAction);
+
+    const error = new Error('test');
+    Sentry.captureException(error);
+
+    Sentry.configureScope(scope => {
+      expect(scope.getAttachments()).toContainEqual(
+        expect.objectContaining({
+          filename: 'redux_state.json',
+          data: JSON.stringify({
+            value: 'updated',
+          }),
+        }),
+      );
+    });
+  });
+
+  it('does not attach when attachReduxState is false', () => {
+    const enhancer = createReduxEnhancer({ attachReduxState: false });
+
+    const initialState = {
+      value: 'initial',
+    };
+
+    const store = Redux.createStore((state = initialState) => state, enhancer);
+
+    const updateAction = { type: 'UPDATE_VALUE', value: 'updated' };
+
+    store.dispatch(updateAction);
+
+    const error = new Error('test');
+    Sentry.captureException(error);
+
+    Sentry.configureScope(scope => {
+      expect(scope.getAttachments()).not.toContainEqual(
+        expect.objectContaining({
+          filename: 'redux_state.json',
+          data: expect.anything(),
+        }),
+      );
+    });
+  });
+
+  it('does not attach when state.type is not redux', () => {
+    const enhancer = createReduxEnhancer();
+
+    const initialState = {
+      value: 'initial',
+    };
+
+    Redux.createStore((state = initialState) => state, enhancer);
+
+    Sentry.configureScope(scope => {
+      scope.setContext('state', {
+        state: {
+          type: 'not_redux',
+          value: {
+            value: 'updated',
+          },
+        },
+      });
+    });
+
+    const error = new Error('test');
+    Sentry.captureException(error);
+
+    Sentry.configureScope(scope => {
+      expect(scope.getAttachments()).not.toContainEqual(
+        expect.objectContaining({
+          filename: 'redux_state.json',
+          data: expect.anything(),
+        }),
+      );
+    });
+  });
+});

packages/types/src/context.ts

@@ -10,6 +10,15 @@ export interface Contexts extends Record<string, Context | undefined> {
   response?: ResponseContext;
   trace?: TraceContext;
   cloud_resource?: CloudResourceContext;
+  state?: ReduxStateContext;
+}
+
+export interface ReduxStateContext extends Record<string, unknown> {
+  state: {
+    [key: string]: any;
+    type: string;
+    value: any;
+  };
 }
 
 export interface AppContext extends Record<string, unknown> {