Trace actions calls
One of the features of Redux DevTools is to select an action in the history and see the callstack that triggered it. It aims to solve the problem of finding the source of events in the event list.
By default it's disabled as, depending of the use case, generating and serializing stack traces for every action can impact the performance. To enable it, set
trace option to
true as in examples. See the API for more details.
For some edge cases where stack trace cannot be obtained with just
Error().stack, you can pass a function as
trace with your implementation. It's useful for cases where the stack is broken, like, for example, when calling
setTimeout. It takes
action object as argument and should return
stack string. This way it can be also used to provide stack conditionally only for certain actions.
There's also an optional
traceLimit parameter, which is
10 by default, to prevent consuming too much memory and serializing large stacks and also allows you to get larger stacks than limited by the browser (it will overpass default limit of
10 imposed by Chrome in
trace option is a function,
traceLimit will have no effect, that should be handled there like so:
trace: () => new Error().stack.split('\n').slice(0, limit+1).join('\n') (
+1 is needed for Chrome where's an extra 1st frame for
Apart from opening resources in Chrome DevTools, as seen in the demo above, it can open the file (and jump to the line-column) right in your editor. Pretty useful for debugging, and also as an alternative when it's not possible to use openResource (for Firefox or when using the extension from window or for remote debugging). You can click Settings button and enable that, also adding the path to your project root directory to use. It works out of the box for VSCode, Atom, Webstorm/Phpstorm/IntelliJ, Sublime, Emacs, MacVim, Textmate on Mac and Windows. For Linux you can use