Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Related Pages: Field ValidationEmpty States

Table of Contents

Description

System errors occur when the application encounters a problem, such as with authentication or server communication.

...

Types

This full list of HTTP status codes shows all of the potential server request response codes.

LUX has specific designs for the 4 5 most common system errors, plus an additional generic design for rarer instances.

Type

Usage

Illustration

Icon

Full page request (HTTP)

Partial page request (AJAX)

401 Unauthorized

Bad, missing, or expired token, causing an authentication failure (e.g login has timed out).

N/A - redirect

N/A - redirect

Redirect to Login page.
Once login is complete, redirect back to originating page.

Redirect to Login page.
Once login is complete, redirect back to originating page.

403 Forbidden

The user does not have permission to access a resource (e.g an administrator-only page).

Image Removed
Errors_Access.gifImage Added

Door Closed.svgImage Added

Image Removed

image-20240709-102637.pngImage Added

Render the LUX frame, including the VerinTop.
Replace the full content area with the error message.

Image Removed

image-20240709-102801.pngImage Added

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

Image Removed

404 Not Found

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

Image Removed
Errors_404.gifImage Added

N/A

image-20240723-140936.pngImage Added

The full page should be replaced by the error message.

Do not render the LUX frame.

Image Removed
image-20240709-104045.pngImage 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.

Errors_HighDemand.gifImage Added

Empty High Demand.svgImage Added

image-20240724-165345.pngImage Added

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

image-20240724-165407.pngImage Added

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

.Image Removed

.

503 - Service unavailable

Service is not responsive or denies access.

Errors_ServiceDown.gifImage Added

Empty Service Down.svgImage Addedimage-20240724-165140.pngImage Added

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

image-20240724-165224.pngImage 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 various reasons.

Errors_server.gifImage Added

Image Removed

Power Plug.svgImage Added
N/A
image-20240723-140158.pngImage Added

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

Image Removed
image-20240723-140235.pngImage Added

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

Image Removed

Generic

Catch all. Use when none of the system errors above are suitable.

Errors_Pipes.gifImage Added
Image Removed
Leaking Pipe.svgImage Added
Image Removed
image-20240709-141912.pngImage Added

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

Image Removed

image-20240709-142014.pngImage Added

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

Image Removed

Usage & Behavior

General Guidelines

...

  • an illustration which visualises and contextualises the error.

  • a title which describes the basic nature of the error. This may also contain the error code.

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

Example:

...

Placement and Positioning

...

  • Minimise the potential for system errors.

    • Do not show links or options which the user does not have 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

View file
nameError States.zip

Design

Zeplin link

Screen thumbnail

https://zpl.io/jZLDEmq

Image Removed
image-20240709-143453.pngImage Added

Code

...