Generic error pages and fallback components
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
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
import { ErrorPage } from '@procore/labs-error-pages';
<ErrorPage title="Error!!" message={<>Error Explanation</>} code={404} />
-
title
:string
orReact.ReactChild
(required): The title of the error page. -
code
:ErrorCode
(optional): the error code for the error, usually represented by a HTTP response code. Thecode
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
orReact.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.
This project uses yarn
, and supports the following commands:
-
build
: builds and bundles the project. -
format
: runsprettier
on the project. -
format:check
: validates that the source code conforms to theprettier
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.