Introduction
In the app, we use an Error Wrapper to define specific boundaries around card components and app sections. The error wrapper catches Javascript errors within components inside the wrapper and displays a fallback error message populated using the empty state component or other UI components.
This error handling guidance relates to missing content and sections of the app that are failing to load. This page doesn’t have information about form input errors which are covered on input and notification component pages.
Error states
There are 4 types of predefined error state types which are shown when there is a problem loading either the app, or a screen within the app or a UI card.
The error and empty states are populated using either the empty state components (of which there is an icon and illustration version) or the balance card component.
User connection issue
An error which the user must rectify themselves. This variant will use bespoke copy to highlight the issue and solution. Specific, connection error.
Balance loading issue – an OVO error
To be used when we cannot load the user’s balance.
Soft, human copy.
App – an OVO error
An error which is OVO’s issue and the user cannot rectify themselves. This variant will inform the user of the problem and that we are working on a solution (come back later)
Specific error.
Generic – a non-specified error
To be used when we do not know what the issue is. This variant will use generic copy inform the user that the issue is being looked into.
Generic copy.
Empty states
We use 2 types of empty state when there is no content to display in a certain area that is accessible to a user.
Specific
A state designed for a specific page, which has not yet had content added to it. e.g. a user has not yet accrued any rewards in the rewards centre.
Specific copy with solution
Generic
To be used when we do not know why there is no content available yet, but there is no recognised error.
Generic, please come back later
When not to use an error state
Sometimes, it’s more user friendly to hide a card with an error rather than to replace a it with an error/empty state.
To determine whether an error state is required vs hiding the card with the error, the question 'would hiding this component cause customer confusion or negatively impact their account health?' must be answered.
Components essential to display to avoid confusion or negative impact to account health (therefore, display error message)
Balance card
Alert
Usage
Components NOT essential to account health (therefore, hide card)
Promotions
Energy insights
Available platforms
|
Platform |
Available |
|---|---|
|
Figma |
v5+ |
|
Web (@ovotech/element) |
- |
|
App (@ovotech/element-native) |
v5.3.0 |