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 occur when the application encounters a problem, such as with authentication or server communication.

...

Types

This full list of HTTP status codes attached to every client\ shows all of the potential server request response codes. With LUX, we have created

LUX has specific designs and illustrations for the 5 4 most common types of these system errors (including one for a ‘catch all’ situation), plus an additional generic design for rarer instances.

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

, causing an authentication failure (e.g

Login

login has timed out).

N/A

Redirect to

login

Login page. Once login is

completed

complete, redirect back to originating page.

Redirect to

login

Login page. Once login is

completed

complete, redirect back to originating page.

403 Forbidden

- See referenceFor use when the

The user does not have

the necessary permissions for

permission to access a resource (e.g

An

an administrator-only page).

Image Modified

Render the LUX

template (VerinTop© and navigation) but

frame, including the VerinTop. Replace the full content area

should render

with the error message. Image Modified

Render the

LUX template (VerinTop© and navigation) but the container area should render

permitted areas of the interface. Show the error message within the container area. Image Modified

404 Not Found

- See reference

Page or resource not found.

For use the

Use when a URL or API is called that the server finds no page or resource for.

Image Modified

Do not render the LUX template (VerinTop© and navigation) but

The full page should

render

be replaced by the error message. Do not render the LUX frame. Image Modified

Render the LUX

template (VerinTop© and navigation) but the container area should render

frame, including the VerinTop. Show the error message within the container area. Image Modified

5XX Server Error

- See reference

Server

Infrastructure

infrastructure errors.

For use

Use when the server is unable to respond for

any number of server issuesImage RemovedDo not render the LUX template (VerinTop and navigation) but the

various reasons.

Image Added

The full page should

render

be replaced by the error message

Image Removed

. Do not render the LUX

template (VerinTop and navigation) but the

frame. Image Added

The full page should

render

be replaced by the error message. Do not render the LUX frame. Image Modified
Generic	Catch all.

For use

Use when none of the system errors above are suitable.

Image Modified

Do not render the LUX template (VerinTop© and navigation) but the

The full page should

render

be replaced by the error message. Do not render the LUX frame. Image Modified

Render the LUX

template (VerinTop© and navigation) but the container area should render

frame, including the VerinTop. Show the error message within the container area. Image Modified

Usage & Behavior

General guidelines

...

A system error generally consists of:

• An illustration that attempts to visualize and contextualize an illustration which visualizes and contextualizes the error.

• A a title which describes the high level basic 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’) a description that provides more detail on why the error has occurred.

• action options such as Back or Retry, to help the user recover from the error state. (Optional).

Image Removed

System error structure example

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 action options such as Back, where shown.

When a system error is embedded in a container area, the rest of the application should remain interactive.

Best practices

Don’t use:

• As as a substitute for form field validation.

...

• Minimize the potential for system errors.

  • Do not show links or operations to a user that they do options which the user does not have authorization for.

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

Accessibility Compliance

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

Design

Code

...