Error boundary

Last modified:

Use error boundaries to catch unexpected component failures.

React documentation

Last modified:

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.


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


Last modified:

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">
    class="bc-icons bc-icons--error bc-icons--lg bc-helper-inline-block"
      viewBox="0 0 24 24"
      <use href="./assets/bc-icons-spritesheet.svg#error"></use>
  <h6 class="bc-h6 bc-mt-2">We’re sorry. That’s our bad.</h6>
    <span class="bc-hint">
      We are not sure what happened exactly, but it was an error on our end.
  <div class="bc-error-boundary__footer">
    <button class="bc-btn bc-btn--secondary bc-btn--small" type="button">
    <button class="bc-btn bc-btn--tertiary bc-btn--small" type="button">
      Report it


Last modified:

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


Last modified:

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.


Last modified:

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.

See also

Last modified:

  • Blank state