2.4 KiB
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 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.