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

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

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