Lots of information in this stack trace is misleading and unhelpful as it points to internal mobx functions like trackDerivedFunction.
Why would this be misleading and unhelpful? This is the code that's being run. You obviously cannot include 100% of the code on this chart, it has to skip the shorter ones. It decides this dynamically.
Flamecharts make no distinction between kinds of sources. They just track how long a function runs, and display it if it's reasonable to do so.
If the chart contained all the information you want, it wouldn't even display properly as it would have thousands, if not millions, of tiny items.
You can see there are many calls to endAction is there any way to show what action that was?
A few simple ways to achieve this:
- Put a breakpoint in that function and inspect in scope values. This should easily tell you which action is being executed. The file corresponding to the item on the chart is always in the summary tab below.
- Modify your node_modules to slip in a
console.log. This might be more practical if the function is hit a lot of times.
- Zoom in on the graph. Probably you can see which derivation function is taking this long, as there's still items below
trackDerivedFunction.
- Artifically make code take longer to run: If you know something is being hit, but it just doesn't show (and it allows for async), you can insert a function to make it sleep for a second or so, and you'll be sure to find it. Another option is to insert a
confirm, which will block everything and so definitely will make the chunk of code visible on the graph.
