How to use react error boundaries?

I wonder how to use React Error Boundaries with Rescript-React

I’ve never used them. Is there a hooks way to do that? I just see a class example in the reactjs docs.

I guess that my last resort would be to bind the class and methods.

There are bindings for error boundaries in rescript-react.

You should be able to use them like this:

  fallback={_error => <div> {"An error occurred"->React.string} </div>}
  // ... children

This is great, thanks!
For some reason I couldn’t find it in the docs.

1 Like

@mxthevs I just updated to react-rescript v0.11 and it changed the binding of RescriptReactErrorBoundary.
Have you figured out how to use it?

I tried the old way but doesn’t work anymore.

Sorry, i haven’t got a chance to use rescript-react@0.11 yet. Can you share what problem you are facing?

Also, maybe there is something in the release notes that indicates what changed, or how to upgrade.

This is what it was working for me prior to the v0.11 upgrade

    fallback={_err => <div> {"An error occurred"->React.string} </div>}>
     <Viewer />    

error in v0.11:

This has type:
  ~children: React.element,
  ~fallback: RescriptReactErrorBoundary.params<'a> => React.element,
) => React.element
Somewhere wanted: React.component<'b> (defined as 'b => Jsx.element)

the new binding:

@react.component @val
external make: (
  ~children: React.element,
  ~fallback: params<'error> => React.element,
) => React.element = "ErrorBoundary"


  • RescriptReactErrorBoundary component now implemented using @react.component, so it is compatible with JSX V4.

I’m not sure what am I missing

What version of compiler and rescript-react are you using? Can you show me your jsx configuration in bsconfig?


 "@rescript/react": "^0.11.0",
"rescript": "^10.1.2",

my bsconfig

  "name": "ventas",
  "sources": [
    { "dir": "src/" },
    { "dir": "src/tests", "subdirs": false, "type": "dev" }
  "package-specs": [
      "module": "es6",
      "in-source": true
  "bs-dependencies": ["@rescript/react"],
  "bs-dev-dependencies": ["rescript-test"],
  "jsx": { "version": 4, "mode": "automatic" },
  "suffix": ".mjs",
  "bsc-flags": ["-bs-super-errors"],
  "reanalyze": {
    "analysis": ["dce", "exception"]
  "warnings": {
    "number": "-44-102",
    "error": "+5"
  "namespace": true

@jorge I’ve run this code in the same dependencies and bsconfig, it looks fine.
Can you share how the Viewer component looks like?

module Viewer = {
  let make = () => React.null

module A = {
  let make = () =>
    <RescriptReactErrorBoundary fallback={_err => <div> {"An error occurred"->React.string} </div>}>
      <Viewer />

I tried replacing <Viewer/> with a normal component like the one you wrote and I had the same result.


If you can share the reproducable project, I’ll look into it.