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.
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.
HTML
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">
<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>
Design
Last modified:
When approaching the design for an error boundary, the 2 following requirements were a must.
- A button to allow the user to retry loading the broken UI
- An action to allow the user to report it the error
Accessibility
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.
Rationale
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