@procore/error-pages

Generic error pages and fallback components

Installation

In a web application, micro frontend or hydra client

yarn add @procore/error-pages

NOTE: Ensure that the following peer dependencies for @procore/error-pages are also installed:

• @procore/core-react: ^11.4.0
• react: >=16.8
• styled-components: ^5.3.0

In a npm package or library

yarn add -P @procore/error-pages^1.0.0 # adds the package as a peer dependency
yarn add -D @procore/error-pages # adds as a dev dependency, for tests, storybook, etc.

NOTE: Ensure that the following peer dependencies for @procore/error-pages are also installed as peer dependencies and as dev dependencies (for tests, storybook, etc.):

• @procore/core-react: ^11.4.0
• react: >=16.8
• styled-components: ^5.3.0

Usage

import { ErrorPage } from '@procore/labs-error-pages';

<ErrorPage title="Error!!" message={<>Error Explanation</>} code={404} />

Components

ErrorPage

Properties

• title: string or React.ReactChild (required): The title of the error page.
• code: ErrorCode (optional): the error code for the error, usually represented by a HTTP response code. The code value will be used as a label for the error page and to select an image to display with the error page. The list of error codes below shows the available values.
• image: React.ComponentType (optional): a custom image component to display instead of the image corresponding with the error code.
• label: string (optional): An optional label to display on the page. This will be used instead of the label accompanying a error code label.
• message: string or React.ReactChild (optional): The primary content of the message. Used for providing more information regarding the error.

Supported ErrorCode values:

• 401: unauthorized
• 403: forbidden
• 404: not found
• 408: request timeout
• 429: too many requests
• 500: internal server error
• 503: service unavailable
• "ChunkLoadError": special status for chunk load errors from webpack chunks.

Any other value will result in a generic error value and image.

Development

This project uses yarn, and supports the following commands:

• build: builds and bundles the project.
• format: runs prettier on the project.
• format:check: validates that the source code conforms to the prettier configuration.
• lint: lints the source code.
• storybook: starts up the storybook development server on port 6006.
• build-storybook: generates a static version of the storybook.
• test: runs the unit test suite.
• test:dev: run the unit test suite in watch mode.