ReasonReact

ReasonReact

  • Docs
  • Try
  • Examples
  • Community
  • Blog
  • Languages iconEnglish
    • 日本語
    • Español
    • Français
    • 한국어
    • Português (Brasil)
    • Русский
    • 中文
    • 繁體中文
    • Help Translate
  • GitHub

›ReactJS Idioms Equivalents

Getting Started

  • What & Why
  • Installation
  • Intro Example

Core

  • Components
  • JSX
  • Event
  • Style
  • Router
  • ReactDOM
  • Refs in React
  • Testing components

Hooks

  • useState
  • useReducer
  • useEffect
  • Custom Hooks

ReactJS Idioms Equivalents

  • Invalid Prop Name
  • Props Spread
  • Component as Prop
  • Ternary Shortcut
  • Context
  • Error boundaries

FAQ

  • I'm Having a Type Error
  • I Really Need Feature X From ReactJS
  • I want to create a DOM element without JSX
Edit

Error boundaries

Important note on the API described in this guide: As soon as React provides a mechanism for error-catching using functional component, ReasonReactErrorBoundary is likely to be deprecated and/or move to user space.

ReactJS provides a way to catch errors thrown in descendent component render functions in its class API using componentDidCatch, it enables you to display a fallback:

class MyErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      hasError: false,
    },
  }
  componentDidCatch(error, info) {
    this.setState({hasError: true})
  }
  // ...
  render() {
    if(this.state.hasError) {
      return this.props.fallback
    } else {
      return this.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 containing error and info to your fallback function:

module ErrorHandler = {
  [@react.component]
  let make = (~error, ~info) => {
    React.useEffect2(() => {
      reportError(error, info) // your analytics function
      None
    }, (error, info));
    "An error occured"->React.string
  }
};

<ReasonReactErrorBoundary
  fallback={({error, info}) => <ErrorHandler error info />}
 >
  <ComponentThatCanThrow />
</ReasonReactErrorBoundary>
← PreviousI'm Having a Type Error →