Integration with react error boundaries

[timmy-wright]

This has been asked a couple of times in the past, but I think I've got a good use case :)

Basically, on the odd occasion, our components throw errors that will be recoverable in time - once data has loaded from the server, etc. In an ideal world, the components would handle these errors, but our application is complex and programmers make mistakes. And we'd prefer if our application can recover from transient inconsistent states due to programmers making mistakes.

Anyway. If one of our react component does throw an error, we would like this to occur:

• Component has read from the state and thrown an error
• We show a pretty error status message using one of our components
• When mobx detects a change in the state that the erroring component has used, then the component is re-rendered and (hopefully) doesn't throw an error this time.

Currently, we have to wrap our components in an "ErrorBoundary" component (we wrote this). The way that react's error-boundary works is our component has a method called "componentDidCatch" that is passed the error. And our component either renders a nice pretty error message when that happens.

However, our component doesn't get callbacks from mobx to retry to render its children when the state changes - because mobx doesn't track what our components children use (as it shouldn't!). This means that once an error occurs, we don't retry to re-render children - even if our application has moved to a non-error state.

I can see two solutions to this:

1. Have a second argument to "observer()" where we can specify an error component to display. Then mobx can take care of determining when to attempt a re-render
2. Have a way for our error boundary component to get a notification if anything that any of the previous children have used has changed so our error boundary component knows when to try to re-render its children rather than rendering the error message.

There are prob other workarounds as well.

Here is a sample file that (hopefully) can reproduce the error. Typescript - I had to change the extension to .txt because github.

TestErrorBoundary.txt

[timmy-wright]

Here's a hack I did to wrap the observable method with some code to recover from errors. I really don't like it, but it appears to work:

import React, { FunctionComponent } from "react";
import { observer as mobxObserver } from "mobx-react";
import { Box } from "~/components/common/Box";
import { ReactComponent as ErrorIcon } from "~/images/azuretoolkit/Error.svg";
import { IReactComponent } from "mobx-react/dist/types/IReactComponent";

export function observer<Component extends IReactComponent>(component: Component): Component {
    const isFunctionComponent =
        typeof component === "function" &&
        (!component.prototype || !component.prototype.render) &&
        !Object.prototype.isPrototypeOf.call(React.Component, component);

    if (isFunctionComponent) {
        const errorWrapper = (props: any) => {
            try {
                return (component as FunctionComponent)(props);
            } catch (e: any) {
                return (
                    <span className={`statusbar statusbar-danger`}>
                        <Box className={"statusbar-danger"} display="flex" flexDirection="row">
                            <span className="statusbar-icon">{<ErrorIcon />}</span>
                            <Box flexGrow={1} whiteSpace="normal" wordWrap="break-word">
                                Could not render component due to: {e.message || "an unknown error"}
                            </Box>
                        </Box>
                    </span>
                );
            }
        };

        return mobxObserver(errorWrapper as any as Component);
    } else {
        return mobxObserver(component);
    }
}

[urugator]

How would you solve this without Mobx?

One simple thing we could probably do is to add the reaction to the error object. The ErrorBoundary can in principle introspect the reaction and subscribe for the same dependencies.

[timmy-wright]

Having the reaction on the error object would be perfect!

I'm honestly not sure how I'd solve it without MobX - I enjoy MobX too much to consider doing anything else.

Tim