Error boundary for the React ecosystem is provided via BcErrorBoundary component.

Wrap your higher-level component with BcErrorBoundary to catch any unexpected errors and display a nice error message to your user.

This ensures that the application / page does not crash because of unhandled errors in a component.

The component offers multiple props to ensure that the user can reset the component or in worse case report it to us.

Dependencies

• react-error-boundary

The BcErrorBoundary component is based on react-error-boundary. However, we wrap the ErrorBoundary component with the proper styling.

We also provide a default fallback component when there is an error. In most cases, that fallback component should be sufficient.

There is no HTML for the actual BcErrorBoundary component. However, the fallback component’s HTML structure looks as follows.

Use it if you need to have provide an error message for a broken UI in HTML / HAML.

<div class="bc-error-boundary">
  <span
    data-testid="bc-icons"
    class="bc-icons bc-icons--error bc-icons--lg bc-helper-inline-block"
  >
    <svg
      class="bc-icons__svg"
      viewBox="0 0 24 24"
      width="100%"
      height="100%"
      focusable="false"
      role="none"
      aria-hidden="true"
    >
      <use href="./assets/bc-icons-spritesheet.svg#error"></use>
    </svg>
  </span>
  <h6 class="bc-h6 bc-mt-2">We’re sorry. That’s our bad.</h6>
  <p>
    <span class="bc-hint">
      We are not sure what happened exactly, but it was an error on our end.
    </span>
  </p>
  <div class="bc-error-boundary__footer">
    <button class="bc-btn bc-btn--secondary bc-btn--small" type="button">
      Retry
    </button>
    <button class="bc-btn bc-btn--tertiary bc-btn--small" type="button">
      Report it
    </button>
  </div>
</div>

When approaching the design for an error boundary, the 2 following requirements were a must.

1. A button to allow the user to retry loading the broken UI
2. An action to allow the user to report it the error

Multiple elements on a page could potentially error. This means that there should be some aria-label indicating to screen readers which element has errored.

Otherwise, screen readers could potentially read out the text in the fallback component multiple times.

Consequently, the retry and report actions should also be properly labelled so users know which error they are trying to reload or report.

Most of the UI at Bugcrowd is now written with React. This means that our UI is now heavily relying on Javascript.

Furthermore, any errors in the a component can break the whole React component tree which means your whole application would be broken due to potentially a small component.

We would like to avoid this and just contains errors within a UI element so only that element appears broken whilst the rest of the application / page can still function.

The BcErrorBoundary will also be a fundamental component and will be provided from the create-bc-app frontend generator application.

• Blank state