[Enhancement] Display Javascript error messages in a more meaningful way

[Will-Hoey]

Description

When displaying a 500 error on the frontend the way in which the messages are displayed to the user are difficult to read. We have non-technical people that use CMS for their websites and this current display is difficult for them to decipher

Screenshots

The above error has been manually raised on a pre-publish signal. Being able to raise an error with a custom message which is user friendly would be a welcome addition.

[fsbraun]

I guess there are several issues to resolve:

• White on yellow background is not a good color choice for errors
• The width of the box is far too small: Many line breaks
• Messages only show for a too short time (5 seconds, I guess, or less). Often it is extremely hard to identify the exception not to speak of any traceback ...
• Design question: Can the traceback go to the log (which can be configured to, say, mail admins)?
• Design question: What would be an adequate level of detail?
• Design question: Do we need a "dismiss" button?

[Will-Hoey]

@fsbraun Thanks for the reply.

• Agree with the colours. A standard error colour set (e.g 404 page) would be fine.
• A dismissible pop-up with only the relevant detail seems the best course here. We shouldn't need the full traceback in a pop-up as that can be traced in something like Sentry/mail to admins.

"Adequate level of detail" I imagine is a little subjective. Restricting the pop-up to only show the message of the error would be adequate in my opinion. However, some of those messages can still be cryptic/not user friendly.

Question. Should this respect the DEBUG setting? The current implementation can show the full traceback even with DEBUG off