Error pages

Error page components are meant to be full-page, layout components. These pages are standardized throughout the product experience.

Examples

403 Forbidden

403 Forbidden The requested resource could not be found but may be available in the future. Subsequent requests by the client are permissible.

You’re not authorized to view this page

Try contacting support or your plan administrator.

error code: 403

Contact support
import {ForbiddenErrorPage} from '@pluralsight/ps-design-system-errors'
import React from 'react'
function Example() {
return <ForbiddenErrorPage />
}
export default Example

Types

Name
Type
Description
Default
hrefstringDestination of ”Contact support“ button https://help.pluralsight.com/help/contact-us
size
small | large
Size of error messagelarge, unless viewport cannot support size

404 Not Found

404 Not Found The requested resource could not be found but may be available in the future. Subsequent requests by the client are permissible.

The page you are looking for can’t be found

Check the web address and try again.

error code: 404

Contact support
import {NotFoundErrorPage} from '@pluralsight/ps-design-system-errors'
import React from 'react'
function Example() {
return <NotFoundErrorPage />
}
export default Example

Types

Name
Type
Description
Default
hrefstringDestination of ”Contact support“ button https://help.pluralsight.com/help/contact-us
size
small | large
Size of error messagelarge, unless viewport cannot support size

500 Internal Server Error

500 Internal Server Error A generic error message, given when an unexpected condition was encountered and no more specific message is suitable.

There’s a problem loading this page

Please try again. If you continue to experience problems, let us know.

error code: 500

Contact support
import {InternalServerErrorPage} from '@pluralsight/ps-design-system-errors'
import React from 'react'
function Example() {
return <InternalServerErrorPage />
}
export default Example

Types

Name
Type
Description
Default
hrefstringDestination of ”Contact support“ button https://help.pluralsight.com/help/contact-us
size
small | large
Size of error messagelarge, unless viewport cannot support size

503 Service Unavailable

503 Service Unavailable The server is currently unavailable (because it is overloaded or down for maintenance). Generally, this is a temporary state.

The site is currently unavailable

We expect everything back in order shortly. Sorry for the inconvenience.

error code: 503

import {ServiceUnavailableErrorPage} from '@pluralsight/ps-design-system-errors'
import React from 'react'
function Example() {
return <ServiceUnavailableErrorPage />
}
export default Example

Types

Name
Type
Description
Default
size
small | large
Size of error messagelarge, unless viewport cannot support size

504 Gateway Timeout Error

504 Gateway Timeout Error The server, while acting as a gateway or proxy, did not receive a timely response from an upstream server it needed to access in order to complete the request.

There’s a problem loading this page

Please try again. If you continue to experience problems, let us know.

error code: 504

Contact support
import {GatewayTimeoutErrorPage} from '@pluralsight/ps-design-system-errors'
import React from 'react'
function Example() {
return <GatewayTimeoutErrorPage />
}
export default Example

Types

Name
Type
Description
Default
hrefstringDestination of ”Contact support“ button https://help.pluralsight.com/help/contact-us
size
small | large
Size of error messagelarge, unless viewport cannot support size

Size small

To display a small ErrorPage you can set the size prop to small like so.

You’re not authorized to view this page

Try contacting support or your plan administrator.

error code: 403

Contact support
import {ForbiddenErrorPage} from '@pluralsight/ps-design-system-errors'
import React from 'react'
function Example() {
return <ForbiddenErrorPage size={ForbiddenErrorPage.sizes.small}/>
}
export default Example

Custom Error

To display a custom ErrorPage using the ErrorPage component layout and styling see example:

Heading goes here

Error caption goes here

error code: ###

Contact support
import ErrorPage from '@pluralsight/ps-design-system-errors'
import Button from '@pluralsight/ps-design-system-button'
import React from 'react'
function Example() {
return (
<ErrorPage
illustration={ <ErrorPage.Illustration /> }
heading={ <ErrorPage.Heading>Heading goes here</ErrorPage.Heading> }
caption={ <ErrorPage.Caption>Error caption goes here</ErrorPage.Caption> }
errorCode={ <ErrorPage.ErrorCode>error code: ### </ErrorPage.ErrorCode>}
actions={<Button href={'https://help.pluralsight.com/help/contact-us'}>Contact support</Button>}
size={ErrorPage.sizes.large}
/>
)
}
export default Example

Types: ErrorPage

Name
Type
Description
Default
illustrationErrorPage.IllustrationIcon display on error page
headingErrorPage.HeadingHeading of error page
captionErrorPage.CaptionCaption of error page
errorCodeErrorPage.ErrorCodeError code of error page
actionsButton | ReactNodeAction of error page
size
small | large
Size of error pagelarge, unless viewport cannot support size

Types: ErrorPage.Illustration

Name
Type
Description
Default
childrenReactNodeCustom SVG if default icon is not desired

Usage

  • Version
  • Install
    npm install @pluralsight/ps-design-system-errors
  • Import
    import ErrorPage, { ForbiddenErrorPage, NotFoundErrorPage, InternalServerErrorPage, ServiceUnavailableErrorPage } from '@pluralsight/ps-design-system-errors'"