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	Full page request (HTTP)	Partial page request (AJAX)
401 Unauthorized - See reference	Bad, missing, or expired token. Specifically for use when authentication is required and has failed or has not yet been provided (e.g Login has timed out)	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 - See reference	For use when the user does not have the necessary permissions for a resource (e.g An administrator only page)		Render the LUX template (VerinTop© and navigation) but the full content area should render the error message	Render the LUX template (VerinTop© and navigation) but the container area should render the error message
404 Not Found - See reference	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 (VerinTop© and navigation) but the full page should render the error message	Render the LUX template (VerinTop© and navigation) but the container area should render the error message
5XX Server Error - See reference	Server Infrastructure errors. For use when the server is unable to respond for any number of server issues		Do not render the LUX template (VerinTop and navigation) but the full page should render the error message	Do not render the LUX template (VerinTop and navigation) but the full page should render the error message
Generic	Catch all. For use when none of the system errors above are suitable		Do not render the LUX template (VerinTop© and navigation) but the full page should render the error message	Render the LUX template (VerinTop© 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.

System error structure example

Placement and Positioning

• The system error is centered vertically and horizontally on the full page 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 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