Attach Stack at setState Calls in DEV Mode

[sebmarkbage]

We have a queue for state transitions. There is a natural place for a new Error() stack frame to be stored there.

We could use this information to work our way back from errors to show information about which setState call was the source of the error.

Because of batching, it is not always possible to make the correct attribution. It could be one of several possible sources.

(Specifically I'd like to use this in Fiber when the starvation protection kicks in. We can show which state transition was kept getting deferred due to higher priority work.)

[gaearon]

Yes please. 😄

[sebmarkbage]

@bvaughn This could be an optional enhancement to the interaction tracking. E.g. in DEV mode.

[bvaughn]

Sorry, what's the enhancement you're suggesting?

[sebmarkbage]

We could attach a new Error() for every time a new work begins happens during an interaction. That lets us track the stack trace where these things happened so that if we put a break point in render or trace commits, we can display the stacks that caused a commit to happen in the first place.

[bvaughn]

Ah, so you're suggesting we could add a stack field to each interaction in DEV mode, and then make use of that info (somehow?) in the "Sources" tab integration (facebook/react-devtools#1085).

This seems tricky, since there might be multiple interactions active when an update is scheduled– and we store interactions on the FiberRoot (not an individual Fiber)– at least assuming my PR #13253 lands as-is. So we wouldn't have a good way of knowing which interaction caused the render. Am I misunderstanding something?