Related Pages: Field Validation

Description

System errors are application and server errors which occur from a failure of communication between the client application and its server.

<< Most communicative screenshot of the component >>

Types 

There are many different types of system errors that can occur during the hosting and operation of modern web applications. These take the form of the list of HTTP status codes attached to every client\server request. With LUX, we have created specific designs and illustrations for the 5 most common types of these system errors (including one for a ‘catch all’ situation).

Type	Usage	Illustration	‘Regular’ HTTP request flow	AJAX request flow with target container area	AJAX request flow without target container area
401 Unauthorized - Bad, missing, or expired token		N/A	Redirect to login page. Once login is completed, redirect back to originating page	Redirect to login page. Once login is completed, redirect back to originating page	Redirect to login page. Once login is completed, redirect back to originating page
403 Forbidden - Not authorized			Render the LUX template (masthead and navigation) but the full content area should render the error message	Render the LUX template (masthead and navigation) but the container area should render the error message	User closable toast error message
404 Not Found - Page or resource not found			Do not render the LUX template (masthead and navigation) but the full page should render the error message	Render the LUX template (masthead and navigation) but the container area should render the error message	User closable toast error message
5XX Server Error - Server Infrastructure errors			Do not render the LUX template (masthead and navigation) but the full page should render the error message	Do not render the LUX template (masthead and navigation) but the full page should render the error message	Do not render the LUX template (masthead and navigation) but the full page should render the error message
Generic - Catch all			Do not render the LUX template (masthead and navigation) but the full page should render the error message	Render the LUX template (masthead and navigation) but the container area should render the error message	User closable toast error message

Usage & Behavior

General guidelines

<<use the sub-section below for description, use only those which fit the component >>

Structure

A system error generally consists of:

• A title which describes the high level nature of the error. This may also contain the error code.

• A description paragraph that summaries (in a little more detail) the reason(s) why the application entered the error state.

• An illustration that attempts to visualize and contextualize error.

Examples:

Placement and Positioning

<<Where should the component be located on the screen. See example: Pagination placement and positioning>>

Default State

<<When there is more than one state for control or area. Including default values> see example: Numeric stepper default state >>

Content

<<Including labels, microcopy, number of items, order of items etc… See example: Buttons content >>

Interaction

<<for example, how to change value – type, arrows, use slider. See example: Numeric stepper interaction>>

Best practices

<Whenever a recommendation (not a must) is provided>>

Use:

• <…>

• <…>

Don’t use

• <…>

• <…>

General

• <…>

Accessibility Compliance

Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility

Design

Code