Related Pages: Field ValidationEmpty States

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 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	Icon	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

N/A - redirect

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 Added

Image Added

Image Removed

Image Added Render the LUX

template (VerinTop© and navigation) but

frame, including the VerinTop. Replace the full content area

should render

with the error message.

Image Removed

Image Added Render the

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

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

404 Not Found

- See reference

Page or resource not found.

For use

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

Image Removed

Image Added

N/A

Image Added The full page should be replaced by the error message. Do not render

the LUX template (VerinTop© and navigation) but the full page should render the error message

Image Removed

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

Image Removed

5XX Server Error - See reference

Server Infrastructure errors. For use

the LUX frame.	Image Added Render the LUX frame, including the VerinTop. Show the error message within the container area.
429 Too Many Requests	Resource is unavailable at that time because there is a load on the network or service.	Image Added	Image Added	Image Added The full page should be replaced by the error message. Do not render the LUX frame.	Image Added Render the permitted areas of the interface. Show the error message within the container area.
503 - Service unavailable	Service is not responsive or denies access.	Image Added	Image Added	Image Added The full page should be replaced by the error message. Do not render the LUX frame.	Image Added Render the permitted areas of the interface. Show the error message within the container area.
5XX Server Error	Server infrastructure errors. Use when the server is unable to respond for

any number of server issuesImage Removed

Do not render the LUX template (masthead and navigation) but the full page should render the error message

Image Removed

various reasons.

Image Added

Image Added

Image Added The full page should be replaced by the error message. Do not render the LUX

template (masthead and navigation) but the

frame.

Image Added The full page should

render

be replaced by the error message

Image Removed

. Do not render the LUX frame.
Generic	Catch all.

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

Use when none of the system errors above are suitable.

Image Added

Image Added

Image Removed

Image Added The full page should

render

be replaced by the error message

Image Removed

. Do not render the LUX frame.

Image Added Render the LUX

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

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

Usage & Behavior

General

...

Guidelines

Structure

A system error generally consists of:

• An illustration that attempts to visualize and contextualize an illustration which visualises and contextualises 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.

General

• Minimize Minimise 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 authorisation 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.

Download

Design

Code

...

https://zpl.io/jZLDEmq	Image Added

Code

...