Improve editor error boundaries and error messages

[talldan]

What problem does this address?

Whilst working through some issues on the forums lately, it's pretty clear the error boundaries in the editors could be improved. Here's how it looks right now for reference:

On the forums I've observed that users see someone else has posted a screenshot of this, and they'll post on the same thread saying they're experiencing the same bug. But this is actually just a generic error message and users most of the time are experiencing completely different issues.

Users also regularly fail to use the 'Copy Error' button, which is the most important part for developers.

'Copy Post Text' is fairly important for the user to keep their work, but that might not be so clear.

Finally, it's fairly common for multiple errors to be logged in the console, but the Copy Error button only copies the latest error message, which might not be entirely useful.

What is your proposed solution?

While it's not clean or tidy, this UI should only display in exceptional circumstances, and I think the most recent error message should always be visible so that the user can clearly tell if they're experiencing the same issue as someone else. Not necessarily the full stack-trace, but at least the error message.

Further error details could be available in a log that can be expanded using something like a <details> element - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details. It should be possible for the error boundary to capture all the errors and push them onto an array for display here (stack traces included).

'Attempt Recovery' almost never works because it recreates the same error. Maybe it could try an 'undo' before re-initialising everything.

And one last thing, whenever this error occurs, there's usually a fairly routine response on the forums (deactivate all plugins, then reactivate them one by one etc.). It'd be great to link the user to a help article that contains details of these steps, and if that doesn't help how to report the issue.

[karmatosed]

+1 for any space that can improve error messages. I really would love not to have any situations where we present three buttons in a row to anyone as a subsequent action.

As I also have experienced attempted recovery rarely (never) working, I wonder if we should even not show it? I understand the use, but it can do more harm, thinking it is an option and then not working. Maybe I am just unlucky.

I like the idea of perhaps offering default of copy, then other options even in this case. It would be a far cleaner interface.

[javierarce]

Here's a first idea for this error message.

We could show the error details inside a textarea. A button to copy the message would appear on hover (see it in action in the video below). A link below the textarea could teach users the necessary steps to report a problem.

As @talldan suggested, we could also put the details inside an expandable section.

Error.mp4

Figma file

[Mamaduka]

I recently shipped some minor design changes in #64245.

Can anyone from @WordPress/gutenberg-design comment on the proposed design? Should we go in this direction?