Related Pages: Field Validation

Description

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

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	HTTP full page request	AJAX partial page request
401 Unauthorized	Bad, missing, or expired token. Specifically for use when authentication is required and has failed or has not yet been provided	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
403 Forbidden	Not authorized. For use when the user does not have the necessary permissions for a resource		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
404 Not Found	Page or resource not found. For use when a URL or API is called that the server finds no page or resource for.		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
5XX Server Error	Server Infrastructure errors. For use when the server is unable to respond for a myriad or server issues		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. For use when non of the system errors above are suitable		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

Usage & Behavior

General guidelines

Structure

A system error generally consists of:

• An illustration that attempts to visualize and contextualize error.

• 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.

• Optional helper operations (such as ‘Back’ or ‘Retry’) to help the user recover from the error state.

??Who should developers contact to validate message copy text??

System error structure example

Placement and Positioning

• The system error is centered vertically and horizontally on the full page, content or container area.

• The illustrations are of ??fixed width and height??.

Interaction

System errors are mostly non interactive with the exception of optional helper operations (e.g. ‘Back’). The rest of the surrounding application should remain intractable when a system error is embedded in a content or container area.

Best practices

Don’t use

• As a substitute for form field validation.

General

• Minimize the potential for system errors

  • Do not show links or operations to a user that they do not have authorization for

  • When a resource expires or is deleted, the original URL should redirect to its replacement or new resource where possible

Accessibility Compliance

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

Design

Code