Using ErrorBoundary for runtime errors

[St3Ko]

Hi everyone!

I am not quite sure if i understand how the ErrorBoundary component works with catching errors.
If i have a component which is a child of the boundary component and for example i throw an error inside a click event handler inside the child, the ErrorBoundary does not render its fallback prop.

Example here:
https://playground.solidjs.com/?hash=-2039119100&version=1.4.1

Do i need to handle this kind of errors on my own?

[ryansolid]

Yeah, inside a click handler is outside of the rendering flow. ErrorBoundaries handle issues with rendering, or reactive propagation, or view code. Throwing an error in an event handler there is no hierarchy there anymore as it is just attached to the DOM. There might be some ways to push that context in, but it isn't there by default right now.

[St3Ko]

Ok, that makes totally sense. Thank you!

[Robin40]

I also had the problem of wanting an Error Boundary to handle an error outside the rendering flow, so the user knows something went wrong and the app doesn't continue with a corrupted state.

I managed to solve it by creating a custom hook useThrowErrorsToErrorBoundary that uses runWithOwner under the hood. Maybe it's a hack, but I don't know how we are supposed to do it either.

Here are the relevant parts of my code as an example, maybe it helps someone with the same problem:

function useAuthStateChangeListener(listenerFunc: AuthStateChangeListener) {
    const throwErrorsToErrorBoundary = useThrowErrorsToErrorBoundary();

    onMount(() => {
        FirebaseAuthentication.addListener("authStateChange", change => {
            throwErrorsToErrorBoundary(() => {
                listenerFunc(change); // this may throw, but it's outside render
            });
        });
    });
}

function useThrowErrorsToErrorBoundary(): (fnThatMayThrow: () => void) => void {
    const owner = getOwner();

    return function throwErrorsToErrorBoundary(fnThatMayThrow: () => void): void {
        runWithOwner(owner, fnThatMayThrow);
    };
}