ErrorState

Consul UIs default 'error state' used when an error is returned form the backend. This component used EmptyState internally, so please refer to that for more details.

Using this component for all of our errors means we can show a consistent error page for generic errors.

This component show slightly different visuals and copy depending on the status of the error (the status is generally a HTTP error code).

Please note: The examples below use a hash for demonstration purposes, you'll probably just be using an error object in real-life.

Arguments

Argument	Type	Default	Description
`login`	`Function`	`undefined`	A login action to call when the login button is pressed (if not provided no login button will be shown
`error`	`Object`	`undefined`	'Consul UI error shaped' JSON `{status: String, message: String, detail: String}`

Specifically 403 errors always use the same header/body copy, this is hardcoded in and not currently overridable.

hbs

<ErrorState
  @error={{hash status='403'}}
/>

Other StatusCodes have a global default text but these are overridable by using the message/detail properties of the Consul UI shaped errors.

hbs

<ErrorState
  @error={{hash
    status='404'
    message="`message` is what is shown in the header"
    detail="`detail` is what shown in the body"
  }}
/>

As with EmptyState you can optionally chose to show a login button using the @login argument.

hbs

<ErrorState
  @error={{hash status='403'}}
  @login={{noop}}
/>