Problem

The backend now sends both an error message and, when possible, an error detail. The user needs to be able to see both of them, but we also need to delineate or hide the detail in some way so that the error message doesn't look overwhelming or unprofessional.

Solution

• Display the error message, and have a collapsible section for the error detail.
• Make the component dismissible so that it can take the place of a snackbar error message, because a snackbar error message with a collapsible section is not great UX. This way we have the ephemerality of a snackbar but the user is in control, giving them time to read the detail if they want to.

Definition of done

There is a reusable component that displays error messages. It can be configured to:

• be dismissed by the user
• be expanded by the user to display the error detail

In order to support backend error messages with details on the frontend, we want to create a generic static component (as compared to the dynamic Snackbar) that displays the error message, show details in a collapsible section and can be configured to be dismissible.

Use cases for such a component can be to display generic error messages on top of the page, or on top of a form.