Important note on the API described in this guide:As soon as React provides a mechanism for error-catching using functional component,
ReasonReactErrorBoundaryis likely to be deprecated and/or move to user space.
ReactJS providesa way to catch errors thrown in descendent component render functions in its class API usingcomponentDidCatch, it enables you to display a fallback:
classMyErrorBoundaryextendsReact.Component{constructor(props) {super(props);this.state = {hasError:false, }, } componentDidCatch(error, info) {this.setState({hasError:true}) }// ... render() {if(this.state.hasError) {returnthis.props.fallback }else {returnthis.props.children } }};<MyErrorBoundary><ComponentThatCanThrow /></MyErrorBoundary>We're providing a lightweight component that does that just for you:ReasonReactErrorBoundary.
<ReasonReactErrorBoundary fallback={_ =>"An error occured"->React.string} > <ComponentThatCanThrow /></ReasonReactErrorBoundary>In case you need to log your errors to your analytics service, we pass a record containingerror andinfo to your fallback function:
moduleErrorHandler = {[@react.component]let make = (~error, ~info) => {React.useEffect2(() => { reportError(error, info)// your analyticsfunctionNone }, (error, info));"An error occured"->React.string }};<ReasonReactErrorBoundary fallback={({error, info}) => <ErrorHandler error info />} > <ComponentThatCanThrow /></ReasonReactErrorBoundary>