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

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

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

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

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

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
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

Types: ErrorPage.Illustration

Name
Type
Description
Default
children
ReactNode
Custom 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'"