React-beautiful-dnd: It appears to be catching all errors...

[tnrich]

In the codesandox I'm throwing an error in an unrelated component. For whatever reason react-beautiful-dnd appears to catch any error that bubbles up to the window..

https://codesandbox.io/s/5w2r1n53j4

Seems like a strange practice. Is this on purpose? In my actual app it is making it harder for me to tell where my issues with dragging are actually coming from.

Thanks!

[alexreardon]

We catch errors all errors so we can cancel any drag. If the error is ours then we eat the error. If we do not own it we re-throw it. Perhaps this is worth calling out in the docs :)

[tnrich]

@alexreardon this is still very much an issue. I don't think that you should be catching all errors on the page. First of all it makes debugging errors and understanding their stack traces harder because the rethrown error's stack trace appears to be duplicated because it shows up twice instead of once.

Also the message from react-beautiful is incorrect in many cases. It says that there is a drag occurring when actually there is no drag occurring. That is confusing.

If you look at the fiddle I posted above (https://codesandbox.io/s/5w2r1n53j4) you'll see both issues occurring quite clearly.

Here is the component that errors:

class ThrowAfter3Seconds extends Component {
    state = {
        cool: false
    };
    componentDidMount() {
        setTimeout(() => {
            this.setState({ cool: true });
        }, 3000);
    }
    render() {
        console.log(this.state.cool);
        return this.state.cool ? { yikes: true } : 'hello';
    }
}

Please open up the fiddle and compare the error logs with this fiddle: https://codesandbox.io/s/z286rmj6vp
which does not have the react-beautiful mounted and you'll see how the one with react-beautiful is much more confusing.

Even codesandbox complains:

Could not consume error: Error: Something is *really* wrong.
    at VM144 sandbox.81b209af.js:1

[lakesare]

@alexreardon, I have the same issue, it's very hard to debug with react-beautiful-dnd on the page.

[alexolivas]

+1 on experiencing this issue

[govorov]

It also makes react error boundaries useless when errors are swallowed this way. Ideally, there should be a way to configure how this interceptor logic works.

[alexreardon]

I agree. I should be together a RFD about error boundaries

On Thu, May 9, 2019 at 8:05 AM Stanislav E. Govorov <
[email protected]> wrote:

It also makes react error boundaries useless when errors are swallowed
this way. Ideally, there should be a way to configure how this interceptor
logic works.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/atlassian/react-beautiful-dnd/issues/941#issuecomment-490668082,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAQU33NIV7SFGFN5UOTSKYLPUNFEBANCNFSM4GFPI5JQ
.