ErrorBoundaryApp.kt

import react.*
import react.dom.p
import react.dom.h3
import kotlinext.js.jsObject
import styled.styledDiv


val App = functionalComponent<RProps> {
    errorBoundary {
        p {
            +"Test"
            throw RuntimeException("whatever")
        }
    }
}

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

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