React error boundary for rendering issues with fable, designed to be used with elmish architecture

ReactErrorBoundary.fs

module ReactErrorBoundary

open Fable.Core
open Fable.Import
open Fable.Helpers.React

type [<AllowNullLiteral>] InfoComponentObject =
    abstract componentStack: string with get

[<Pojo>]
type ErrorBoundaryProps =
    { Inner : React.ReactElement
      ErrorComponent : React.ReactElement
      OnError : exn * InfoComponentObject -> unit }

[<Pojo>]
type ErrorBoundaryState =
    { HasErrors : bool }

// See https://github.com/MangelMaxime/Fulma/blob/master/docs/src/Widgets/Showcase.fs
// See https://reactjs.org/docs/error-boundaries.html
type ErrorBoundary(props) =
    inherit React.Component<ErrorBoundaryProps, ErrorBoundaryState>(props)
    do base.setInitState({ HasErrors = false })

    override x.componentDidCatch(error, info) =
        let info = info :?> InfoComponentObject
        x.props.OnError(error, info)
        x.setState({ HasErrors = true })

    override x.render() =
        if (x.state.HasErrors) then
            x.props.ErrorComponent
        else
            x.props.Inner

let renderCatchSimple errorElement element =
    ofType<ErrorBoundary,_,_> { Inner = element; ErrorComponent = errorElement; OnError = fun _ -> () } [ ]

let renderCatchFn onError errorElement element =
    ofType<ErrorBoundary,_,_> { Inner = element; ErrorComponent = errorElement; OnError = onError } [ ]

Usage:

let view model dispatch =
    SubComponent.view model dispatch
    |> ReactErrorBoundary.renderCatchFn
            (fun (error, info) -> logger.Error("SubComponent failed to render" + info.componentStack, error))
            (ErrorComponent.view model dispatch)

let view model dispatch =
    SubComponent.view model dispatch
    |> ReactErrorBoundary.renderCatchSimple
            (ErrorComponent.view model dispatch)

Thanks, really nice. I changed errorElement to a function so that it's not constructed unnecessarily on every view cycle even when there are no errors.

How do I get rid of HasErrors once it's set though? I'd like to revert it once the view in question stops throwing.

@kerams Usually we resolve the error with some model update (user clicking retry for example) and the view is re-rendered