How can I implement an ErrorBoundary? I cannot fin...

# javascript

[iari]

How can I implement an ErrorBoundary?
I cannot find any code example or explanation on ErrorBoundaries for react.
What i did find however, is this ominous class RComponentClassStatics
and RStatics and some 'documentation' here:
https://github.com/JetBrains/kotlin-wrappers/blob/master/kotlin-react/src/main/kotlin/react/React.kt#L63-L77


So i tried implementing it like this:

external interface ErrorBoundaryState : RState {
    var error: Throwable?
}

class ErrorBoundary : RComponent<RProps, ErrorBoundaryState>() {
    init {
        state.error = null;
    }

    override fun componentDidCatch(error: Throwable, info: RErrorInfo) {
        //super.componentDidCatch(error, info)
        //state.error = error
        //state.errinfo = info
        console.log("ErrorBoundary encountered error:", error)
    }

    override fun RBuilder.render() {
        state.error?.let { e ->
            styledDiv {
                h3 {
                    +"Something went wrong"
                }
                p {
                    +e.toString()
                }
            }
        } ?: props.children()
    }

    companion object : RStatics<RProps, ErrorBoundaryState, ErrorBoundary, Nothing>(ErrorBoundary::class) {
        override var getDerivedStateFromError: ((Throwable) -> ErrorBoundaryState?)?
            get() = {
                object : ErrorBoundaryState {
                    override var error: Throwable?
                        get() = it
                        set(value) {}
                }
            }
            set(value) {
            }
    }
}

However, this fails and nothing is rendered, and I get this error:

Warning: ErrorBoundary: Error boundaries should implement getDerivedStateFromError(). In that method, return a state update to display an error message or fallback UI.
in ErrorBoundary
in Unknown

so how is this done properly?

[iari]

Now, reading the Readme.md of kotlin-react
https://github.com/JetBrains/kotlin-wrappers/blob/master/kotlin-react/README.md
(which i apparently missed before)
i got this instead:

companion object : RStatics<RProps, ErrorBoundaryState, ErrorBoundary, Nothing>(ErrorBoundary::class) {
    init {
        getDerivedStateFromError = {
            object : ErrorBoundaryState {
                override var error: Throwable? = it
            }
        }
    }
}

But is still does not work.

[turansky]

getDerivedStateFromProps = { p, s -> s }

[iari]

it still doesn't work - this is what i get

[iari]

companion object : RStatics<RProps, ErrorBoundaryState, ErrorBoundary, Nothing>(ErrorBoundary::class) {
    init {
        getDerivedStateFromError = {
            object : ErrorBoundaryState {
                override var error: Throwable? = it
            }
        }
        getDerivedStateFromProps = { p, s -> s }
    }
}

this is what the code looks like now

[turansky]

No videos 🙂

[turansky]

Props not initialized?

[iari]

The no videos thing is an actual error, but well, that's another unrelated problem ^^ ... i mean that error supposed to be caught by the error boundary, right ;)

[turansky]

getDerivedStateFromError = { t -> js<ErrorBoundaryState>{
throwable = t   
 } }

[turansky]

fromProps can be removed

[iari]

hm....that doesnt seem to compile

[turansky]

getDerivedStateFromError = { t -> jsObject<ErrorBoundaryState>{
throwable = t   
 } }

[turansky]

Works?

[iari]

thanks - this compiles, and looks nicer, than what i had before.
However, the error remains the same...

[iari]

ill opost the code where i use it i guess..

[iari]

ive minimized is, so all i do in my root App render is this:

errorBoundary {
        p {
            +"Test"
            throw RuntimeException("whatever")
        }
    }

[iari]

using that shortcut:

fun RBuilder.errorBoundary(handler: RBuilder.() -> Unit): ReactElement = child(ErrorBoundary::class, handler)

[iari]

again, ErrorBoundary code hasen't changed except for your suggestions in the companion:

external interface ErrorBoundaryState : RState {
    var error: Throwable?
}

class ErrorBoundary : RComponent<RProps, ErrorBoundaryState>() {
    override fun componentDidCatch(error: Throwable, info: RErrorInfo) {
        console.log("ErrorBoundary encountered error:", error)
    }

    override fun RBuilder.render() {
        val error = state.error
        if (error != null) {
            styledDiv {
                h3 {
                    +"Something went wrong"
                }
                p {
                    +error.toString()
                }
            }
        } else props.children()
    }

    companion object : RStatics<RProps, ErrorBoundaryState, ErrorBoundary, Nothing>(ErrorBoundary::class) {
        init {
            getDerivedStateFromError = {
                jsObject<ErrorBoundaryState> {
                    error = it
                }
            }
        }
    }
}

[turansky]

GitHub?

[iari]

should i make a gist?

[turansky]

Or this

Example.kt

[iari]

https://gist.github.com/IARI/69d3c941f3549362493aa7f59de84e0a

[turansky]

line 19 executed?

[turansky]

} else props.children()

[iari]

nope, it doesn't seem like it

[iari]

I updated it to test:

override fun RBuilder.render() {
    val error = state.error
    if (error != null) {
        styledDiv {
            h3 {
                +"Something went wrong"
            }
            p {
                +error.toString()
            }
        }
    } else {
        console.log("renderind children")
        props.children()
    }
}

got no "renderind children" log statement printed.

[turansky]

companion init called?

[iari]

Oh ... i'm stupid - if i lift the errorboundary up, so its around the App class, it works....

[turansky]

🙂

[iari]

the problem apparently was, that the error is caused within the App component itsself so it wasn't caught

[iari]

thanks for all the help! you'Re awesome!

[turansky]

Props, States - JS objects

[turansky]

Use jsObject builder for it

[turansky]

No object : required