Skip to content

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.
A pointing to the illustration within Crash; B pointing to the heading; C pointing to the 'Try again' button;
Crash and its sub-components
Anatomy of the Crash component
ItemNameDescription
A<Warning />Decorative element
B<Heading />Title of the Crash
C<Button />Action the user needs to take to resolve the error
Breakdown of Crash styles (padding, height, widths, etc.) when the default variant is used
The large size is recommended for most use cases where parent container height is >300px
Breakdown of Crash styles (padding, height, widths, etc.) when the compact variant is used
The medium size is used for errors where parent container height is <300px
An error occurred

We can't load this page

Show code
import { Crash } from '@gusto/workbench';

import React from 'react';

function onRetry() {}

export const Basic = () => {
  return (
    <Crash
      headingText="We can't load this page"
      retryAriaLabel="Reload this page"
      onRetry={onRetry}
    />
  );
};
An error occurred

We can't load this section

Show code
import { Crash } from '@gusto/workbench';

import React from 'react';

function onRetry() {}

export const Compact = () => {
  return (
    <Crash
      headingText="We can't load this section"
      retryAriaLabel="Reload this section"
      onRetry={onRetry}
      size="medium"
    />
  );
};
React props
NameTypeDefaultDescription
size  mediumlargelargeSize of Crash.
headingLevel  number3Semantic heading level that will be applied to the headingText.
headingText  Requiredstring-Title of the Crash.
onRetry  function-Callback when the user clicks the "Try again" button.
retryAriaLabel  Requiredstring-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 LibraryExternal link with occasional help from JestExternal link.

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(
<Crash
headingText="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);
});