Crash
Crash is used to contain an error due to a network or load failure so users can continue interacting with the rest of the app.

Item | Name | Description |
---|---|---|
A | <Warning /> | Decorative element |
B | <Heading /> | Title of the Crash |
C | <Button /> | Action the user needs to take to resolve the error |


We can't load this page
import React from 'react'import { Crash } from '@gusto/workbench'function onRetry() {}export const Basic = () => {return (<CrashheadingText="We can't load this page"retryAriaLabel="Reload this page"onRetry={onRetry}/>)}
We can't load this section
import React from 'react'import { Crash } from '@gusto/workbench'function onRetry() {}export const Compact = () => {return (<CrashheadingText="We can't load this section"retryAriaLabel="Reload this section"onRetry={onRetry}size="medium"/>)}
Name | Type | Default | Description |
---|---|---|---|
size | medium large | large | Size of Crash. |
headingLevel | number | 3 | Semantic heading level that will be applied to the headingText. |
headingText Required | string | - | Title of the Crash. |
onRetry Required | function | - | Callback when the user clicks the "Try again" button. |
retryAriaLabel Required | string | - | Label that replaces the visible label on the “Try again” button for users who use assistive technology. |
- Use the right heading level based on the Crash’s placement on the page. For example, if Crash is the only heading on the page, use h1. If it appears after an h1 title, use h2.For more information, see footnote 1,
The following testing snippet(s) offer suggestions for testing the component using React Testing Library with occasional help from Jest.
import React from 'react';import { render, screen } from '@testing-library/react';import { Crash } from '@gusto/workbench';it('tests for basic render and functionality', () => {const mock = jest.fn();render(<CrashheadingText="We can't load this page"retryAriaLabel="Reload this page"onRetry={mock}/>,);expect(screen.getByRole('heading', { name: "We can't load this page" })).toBeInTheDocument();screen.getByRole('button', { name: 'Reload this page' }).click();expect(mock).toHaveBeenCalledTimes(1);});