<iframe src="https://www.googletagmanager.com/ns.html?id=GTM-5HGSQD2L" height="0" width="0" style="display:none;visibility:hidden" title="GTM"></iframe>

Error Boundary

A React feature to detect if there has been a code error, and if so, display a fallback UI.

An error boundary is a React feature that lets you wrap part of your UI, and if an error occurs within that boundary, you display some fallback UI (such as an error message for the user).

SWAN provides an in-box utility component for this. It even accepts a prop called fallback if you want your custom handling; otherwise, SWAN will show the error details. You also have the option to see your custom fallback as well as error details, by passing true to the boolean prop forceShowError.

The preview has been updated.

Props

ErrorBoundary
This component is implemented using the <div /> as the root element. You can utilize the native attributes supported by <div /> tag. The ref is directly assigned to the root element, allowing you to access and manipulate it as needed.
See core props for additional props that can be applied to this component.
proptyperequireddescriptiondefault
fallbackReactNodefalse
A React node that serves as a fallback UI when an error occurs.
null
forceShowErrorbooleanfalse
A boolean indicating whether to force showing the error details
null
errorDetailMsgstring | nullfalse
Context or a message related to the error.
null
Was this page useful?

Thanks for your feedback!

Feel free to include your name if you wish to have a follow up conversation.


Published: Nov 14, 2023Last updated: Sep 17, 2024