How to use react error boundaries?

1

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
2

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
3

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

1 Like
4

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

5

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.

6

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

7

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

8

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
}
9

@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>
}
10

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

:thinking:

11

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