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 Error.stackTraceLimit
). If 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 Error\n
).
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 atom-url-handler
.