ErrorBoundary
helps to catch errors in reactivesearch components using a declarative API. When we want to safeguard the other parts of the UI from a error prone part then we can wrap it with a ErrorBoundary
. All the ErrorBoundary
must live inside the ReactiveBase
component.
Usage
Basic Usage
<ReactiveBase
{...configuration}
>
<ErrorBoundary>
<ReactiveComponent {...config}/>
</ErrorBoundary>
</ReactiveBase>
Props
componentIds
Type | Optional |
---|---|
string|string[] |
Yes |
By default ErrorBoundary
watches for network request errors in all components and runtime errors in all it's descendants. If we want to restrict the components for getting network request errors then we can use componentIds
.
renderError
Type | Optional |
---|---|
function |
Yes |
A function for customizing the error message. This passes two parameters, error
and componentId
, and returns a JSX component that would be shown on recieving error.
onError
Type | Optional |
---|---|
function |
Yes |
A function called for performing side-effects such as logging errors. It is passed the same parameters as renderError
, error
and componentId
.
Example
Below is an example using ErrorBoundary
. We simulate an error which causes a failed network request using dataField
as empty. However this would not break the whole UI and just be contained to the part enclosed by the ErrorBoundary
.
<ErrorBoundary
renderError={error => (
<div>
<h1>Oops! Error occured.</h1>
<p>{error.message}</p>
</div>
)}
>
<DynamicRangeSlider
dataField="_"
componentId="BookSensor"
rangeLabels={(min, max) => ({
start: `${min} book`,
end: `${max} books`,
})}
/>
</ErrorBoundary>
Below is a live example built using Codesandbox.