redux-devtools trace tab is not showing action callee

Question

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

Have you solved it yet? I have exactly the same problem, the callstack is trapped inside the redux-saga, only the one dispatched from the application via redux dispatch can be traced. — Albert Gao, Apr 20 '20 at 01:37

score 7 · Answer 1 · answered May 09 '20 at 02:22

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.

score 1 · Answer 2 · edited Aug 31 '21 at 19:15

1

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));

edited Aug 31 '21 at 19:15

Adrian Mole

49,934
160
51
83

answered Aug 25 '21 at 10:45

wiqram

11
1

so basically, setup devtools with only trace = true and add it to createstore. – wiqram Aug 25 '21 at 10:48

score 1 · Answer 3 · answered Oct 18 '22 at 12:21

If you are using the redux toolkit and don't see the code trace its because it is set to 10 by default. To over right it add devTools: { trace: true, traceLimit: 25 } to configure store. If you still don't see the code block inside trace tab increase the traceLimit to 30 or 40

score 0 · Answer 4 · answered Apr 10 '20 at 19:26

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.

Thank you, for your answer, but: 1. here I have used create react app and wasn't adding any extra configuration \n 2. my colleagues with the same code base have traces showing the code from where request started. — Victor Orlyk, Apr 14 '20 at 12:15

redux-devtools trace tab is not showing action callee

4 Answers4