Skip to content

Containers swallow application errors and return cryptic errors back #319

@sporto

Description

@sporto

In Marty 0.9

We have a container like:

var EmailsLoader = Marty.createContainer(Emails, {

    propTypes: {
        personId: PT.any.isRequired
    },

    listenTo: store,

    fetch: {
        emails() {
            const personId = this.props.personId;
            const fetch = store.for(this).fetchPersonEmails(personId);
            return fetch;
        }
    },

    failed(errors) {
        return <div>{errors}</div>;
    },

    pending() {
        return <div><Loader /></div>;
    }
});

export default EmailsLoader;

And a component like:

class Emails extends React.Component {

    render() {
        const emails = this.props.emails;

        return (
            <section className={classAdder('')}>
                ...
            </section>
        );
    }
}

Everything works well.

But if we introduce an error in the component:

class Emails extends React.Component {

    render() {
        const emails = this.props.emails;
        throw "Some error"
        return (
            <section className={classAdder('')}>
                ...
            </section>
        );
    }
}

Then we just see this in the browser:

Error: Invariant Violation: findComponentRoot(..., .0.1.1.0.1.1.0.0.0): Unable to find element. This probably means the DOM was unexpectedly mutated (e.g., by the browser), usually due to forgetting a <tbody> when using tables, nesting tags like <form>, <p>, or <a>, or using non-SVG elements in an <svg> parent. Try inspecting the child nodes of the element with React ID ``.

Which is pretty useless.

This happens with anything in the Container chain i.e. if there is an error in emailsQueries or emailsProviders, emailsStore or the rendered component

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions