Containers swallow application errors and return cryptic errors back

[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

[jhollingworth]

OK, I will investigate and get back to you

[idolizesc]

I'm experiencing this as well

[sporto]

This has gone away in 0.9.17, now I see proper errors :)

[sporto]

I'm still having some trouble with this. If I introduce an error in the store or component I see the error, e.g.

locally: function() {
    ...
    [].foo()
    ...
}

TypeError: [].foo is not a function

But if I introduce the error in the Container:

    fetch: {
        status() {
            ...
            [].foo()
            ...
        }
    },

I just see:

TypeError: inst is null

[sporto]

Correction, if I introduce the error in the component:

    render() {
        ...
        [].foo()
        ...
    }

I get:

"Fetch error" TypeError: prevComponentInstance is null

[jhollingworth]

This is an odd one. I've seen this bug before myself but just tried to replicate it in a test and can't seem to. Will investigate further

[sporto]

@jhollingworth I would like to help replicating the issue, by any chance do you have a fiddle or plunkr with a minimum Marty app using 0.9?