redux-devtools trace tab is not showing action callee

user_9513421 0
Viewed 4006

I am using redux-devtools, I have configured my store like explained in the docs, but tracing is not showing callee

const composeEnhancers =
  (window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ &&
    window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({
      trace: true,
      traceLimit: 25
    })) ||
  compose;

Please help me how can I get working code. actual behavior

wanted behavior

redux-devtools react-redux redux trace
3 Answers

I am a complete beginner, I was experiencing the same issue while following a tutorial, and I came across this question while looking for a solution.

I managed to get the trace behavior to operate as expected by adding the following line to webpack.config.js under the devServer block:

},
devServer {
// block config
},
devtool: "source-map",
// rest of config

please note, I am just adding the extra lines for context - the only line I added was devtool: "source-map"

And of course, don't forget to stop and re-start your webpack dev server after confirming that it's loading the config file you just modified in package.json.

user_50921340

It looks like the setup and the stack trace feature are both working as intended.

A stack is being displayed, indicating that the DevTools was correctly configured to capture stack traces.

Based on the displayed stack trace, the Redux Saga middleware was responsible for dispatching that action. Given the internal complexity of that middleware, I'm not surprised that there isn't any obvious connection to other code in the rest of your app.

Being able to display original source code is reliant on having sourcemaps correctly defined for your app's build process. If you're using Create-React-App or other similar tools, that should already be handled automatically. If you're defining your own build configuration somehow, you should make sure that sourcemaps are actually being generated.

user_629370

Have been facing issues in setting this up as due to typescript the composeWithDevTools doesn't allow adding middleware and trace options. Hence replacing the two constants as below helped solve my problem - react 17.

const composeEnhancers = composeWithDevTools({
    trace: true,
});

const store = createStore(pReducer, composeEnhancers(middleware));
user_39095840
Related