Expose DEV-mode warnings in devtools UI

[bvaughn]

React has made recent developer experience improvements to lifecycle error handling and logging. Errors thrown during render can be recovered from using unstable_handleError componentDidCatch. Errors thrown during lifecycle methods are also automatically logged to the console with the component stack location to make them easier to identify (see #8785).

The team has discussed similar improvements for warnings- such as using a "yellow box" approach to make warnings stand out more in developer mode (see PRs #7360 and #8861). There has been some pushback though to the idea of React modifying the DOM for warning purposes (see issue #8784). I'm not sure how that will play out yet- but in the meanwhile, could we improve at least some of these use cases by making better use of the devtools?

For example, what if React exposed a new API that allowed associating a warning with one or more components in the devtools panel? (eg a method that- when called- recorded the current component stack and notified devtools if present) React could use this for things like missing or non-unique keys. 3rd party libraries may also benefit from this (eg react-virtualized could use this to warn about missing or incomplete positioning styles for cells).

Here's a rough outline of some of the features:

• Components with warnings could be highlighted in some emphasized way (eg yellow background) in devtools to make them easier to spot.
• A new toolbar option could be added to "Show All Warnings" (eg filter the tree view to show only components with warnings).
• Warning message could be shown inline in the settings panel for the selected component.

Here's a rough mockup:

Limitations:

• Not everyone uses devtools so this would not help a lot of people.
• This would not address issues like using the development mode of React for production sites.

Thoughts? Ideas? Suggestions?

[gaearon]

Beautiful 😍

[lxsmnsyc]

Any status on this? This seems to be a very helpful feature

[bvaughn]

@lxsmnsyc No updates. This was just an idea that hasn't been high priority enough for me to experiment with it. The DevTools backend has all of the info needed to associate errors/warnings with specific components in the tree– but we'd need to:

• Pass the information from the backend to the frontend with a new type of message.
• Design and implement new UI in the Components tree and the inspected element to surface the messages.
• Figure out what to do if the component is filtered out of the tree. (Do we not show the warning? Do we show it on a parent or a descendent?)
• Provide some mechanism for clearing/dismissing warnings for a component (and maybe for the entire tree).

If this is something you'd be interested in contributing to, maybe I could spare some cycles to chat about it. It's probably not something I'll have time to work on anytime soon though unfortunately :(

[eps1lon]

@bvaughn This feature sounds interesting and I could've used it in the past.

I started to bring #17053 back up-to-date and I'm now considering how this would be used.

We probably want add a filter that only displays components with warnings/errors. Additionally (or alternatively?) make it so that the console can link to the devtools (if that's possible).

Figure out what to do if the component is filtered out of the tree. (Do we not show the warning? Do we show it on a parent or a descendent?)

I think both options might be useful. Say we have the following owner tree A > B > C. If we filter B which logged an error we probably want to highlight both A and C. A because that might be responsible for the warning in B and C because that might exhibit undefined behavior because B is broken.

For some components/filters neither case might be interesting so we could add an option to the filter to ignore the warnings of the filtered out components.

Provide some mechanism for clearing/dismissing warnings for a component (and maybe for the entire tree).

As a start, a simple "dismiss" per warning and "dismiss all" button is probably sufficient? Though it's definitely interesting to dismiss only warnings matching a given pattern.

[bvaughn]

We probably want add a filter that only displays components with warnings/errors.

I think this would be confusing (and perhaps expensive to implement, especially with errors that may be logged frequently). Maybe instead we could implement a "show next/previous error" button– similar to how you step through search results, but for components with errors. Then you could jump through the full tree to see just the warning stuff.

Additionally (or alternatively?) make it so that the console can link to the devtools (if that's possible).

I don't think this is possible. (If it is, I am not aware of how to do it.)

I think both options might be useful.....ignore the warnings of the filtered out components.

My gut tells me that MVP for this feature would never show warnings for filtered out components. Getting the UX right (in terms of showing for the parent/child) seems like it would require some experimenting.

As a start, a simple "dismiss" per warning and "dismiss all" button is probably sufficient? Though it's definitely interesting to dismiss only warnings matching a given pattern.

Agreed. Those two dismiss buttons would probably be sufficient for MVP. Longer term, maybe:

1. Dismiss all matching pattern
2. Never show warnings/errors matching pattern
3. Toggle whether to show just warnings, just errors, or both (new UI in the Debugging settings panel)

[gaearon]

Seems like this is done in #20463?