Fix Redux integration failing with reducer injection

[AntoineDuComptoirDesPharmacies]

Is there an existing issue for this?

• I have checked for existing issues https://github.com/getsentry/sentry-javascript/issues
• I have reviewed the documentation https://docs.sentry.io/
• I am using the latest SDK release https://github.com/getsentry/sentry-javascript/releases

How do you use Sentry?

Sentry Saas (sentry.io)

Which SDK are you using?

@sentry/react

SDK Version

9.9.0

Framework Version

18.2.0

Link to Sentry event

No response

Reproduction Example/SDK Setup

import { configureStore } from '@reduxjs/toolkit';
import { combineReducers } from 'redux';
import createSagaMiddleware from 'redux-saga';
import * as Sentry from '@sentry/react';

function createReducer(injectedReducers = {}) {
 const rootReducer = combineReducers({
 global: globalReducer,
 ...injectedReducers,
 });

 return rootReducer;
}


[...]

 const initialState = {};

 const sagaMiddleware = createSagaMiddleware();

 const sentryReduxEnhancer = Sentry.createReduxEnhancer({
 configureScopeWithState: (scope, state) => {
 console.log("configurescope", state);
 },
 });

 const store = configureStore({
 preloadedState: initialState,
 reducer: createReducer(),
 middleware: (getDefaultMiddleware) => {
 return getDefaultMiddleware().concat(sagaMiddleware)
 },
 enhancers: (getDefaultEnhancers) => {
 return getDefaultEnhancers().concat(sentryReduxEnhancer);
 },
 });

[...]

const injectedReducers= {
 newKey : (state, action) => {
 // simplification just for the reproducer
 return state;
 }
}

store.replaceReducer(createReducer(injectedReducers));

Steps to Reproduce

1. Code an app using code splitting for reducer injection (See : https://redux.js.org/usage/code-splitting#reducer-injection-approaches).
   Reducers are added on runtime depending of the section of the app loaded by user.
2. Load the app and go to the lazy loaded reducer section
3. Create a sentry issue that will upload redux state and check that your event redux state is missing keys/values modified after the reducer injection

Expected Result

Sentry Redux Enhancer should not be "evicted" when calling replaceReducer method and so configureScopeWithState should continue to be called on state change.

See this issue about how to code a redux enhancer that will remain even if replaceReducer is called :
reduxjs/redux#4127

Actual Result

Function 'replaceReducer' fully remove the Sentry Redux Enhancer from the chain.
As a result, the method configureScopeWithState is no longer called on redux state change.

Same problem occured here and likely to be the came cause :

• Redux state doesn't update with createReduxEnhancer sentry#22778

[lforst]

Only looking superficially at this, my main thought is whether there is anything that the Sentry SDK can even do here. Isn't this more an issue with redux toolkit and/or your setup?

[AntoineDuComptoirDesPharmacies]

Hi @lforst,

According to timdorr and markerikson :

That isn't an enhancer. It's just a wrapper function on createStore

According to Methuselah96, is it :

a bug in your enhancer. If your enhancer messes with the reducer, it needs to re-implement the replaceReducer function

Here is a commit that follow their principles, by overriding the replaceReducer method.
develop...LeComptoirDesPharmacies:sentry-javascript:bugfix/16017

I have to admit I am not perfect in TS and not have a build environmlent right now to test it, but I think it may be the solution.