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.

1 Like

There are bindings for error boundaries in rescript-react.

You should be able to use them like this:

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

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

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

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"

The CHANGELOG says:

  • 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?

dependencies

 "@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 = {
  @react.component
  let make = () => React.null
}

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

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

:thinking:

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