Error pages

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

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

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.

import {ForbiddenErrorPage} from '@pluralsight/ps-design-system-errors'
import React from 'react'

function Example() {
  return <ForbiddenErrorPage />
}

export default Example

Props

Name	Type	Description	Default
`href`	`string`	Destination of ”Contact support“ button	`https://help.pluralsight.com/help/contact-us`
`size`	`small \| large`	Size of error message	`large, 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.

import {NotFoundErrorPage} from '@pluralsight/ps-design-system-errors'
import React from 'react'

function Example() {
  return <NotFoundErrorPage />
}

export default Example

Props

Name	Type	Description	Default
`href`	`string`	Destination of ”Contact support“ button	`https://help.pluralsight.com/help/contact-us`
`size`	`small \| large`	Size of error message	`large, 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.

import {InternalServerErrorPage} from '@pluralsight/ps-design-system-errors'
import React from 'react'

function Example() {
  return <InternalServerErrorPage />
}

export default Example

Props

Name	Type	Description	Default
`href`	`string`	Destination of ”Contact support“ button	`https://help.pluralsight.com/help/contact-us`
`size`	`small \| large`	Size of error message	`large, 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.

import {ServiceUnavailableErrorPage} from '@pluralsight/ps-design-system-errors'
import React from 'react'

function Example() {
  return <ServiceUnavailableErrorPage />
}

export default Example

Props

Name	Type	Description	Default
`size`	`small \| large`	Size of error message	`large, 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.

import {GatewayTimeoutErrorPage} from '@pluralsight/ps-design-system-errors'
import React from 'react'

function Example() {
  return <GatewayTimeoutErrorPage />
}

export default Example

Props

Name	Type	Description	Default
`href`	`string`	Destination of ”Contact support“ button	`https://help.pluralsight.com/help/contact-us`
`size`	`small \| large`	Size of error message	`large, unless viewport cannot support size`

Size small

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

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:

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

Props

Name	Type	Description	Default
`illustration`	`ErrorPage.Illustration`	Icon display on error page
`heading`	`ErrorPage.Heading`	Heading of error page
`caption`	`ErrorPage.Caption`	Caption of error page
`errorCode`	`ErrorPage.ErrorCode`	Error code of error page
`actions`	`Button \| ReactNode`	Action of error page
`size`	`small \| large`	Size of error page	`large, unless viewport cannot support size`

ErrorPage.Illustration

Name	Type	Description	Default
`children`	`ReactNode`	Custom SVG if default icon is not desired

Accessibility

WCAG 2.1 AA Compliance

100% axe-core tests

Manual audit