Error stops components from rendering, without error message or console feedback

[achobanov]

This feels like a bug.

I had a faulty code - trying to bind undefined function (I forgot to pass it down from parent). However there was no Cannot read propery bind of undefined error thrown and no console errors as well. It took me a while to figure out what the problem was.

For the past 30 minutes I have tried reproducing the error with different data, without any luck. I even copied the minimal amount of source files into another project and the error was thrown. I don't know what else to do. If you want to investigate: I setup this branch. The described behavior can be observed in home / root. I cannot provide more information, since I don't have any. I really spent some time trying to replicate it, but to no success.

Expected behavior would be throwing an error, obviously.

I have no idea about previous versions of React, because I only now encounter it. I haven't updated React in the meantime. Version is 15.6.1, as shown in package.json. I am using latest Chrome and Windows 10.

[gaearon]

Where can I find the exact instructions to reproduce the problem in this project?

Never mind, I misread. You’re saying it doesn’t reproduce there.

[aweary]

@achobanov this kind of issue is almost always caused by some other code swallowing the error. I suggest using the "Pause on caught exceptions" option in Chrome devtools to try and locate the source.

[gaearon]

One common example of how this happens:

promise.then(() => {
  this.setState(...);
  // or store.dispatch(...);
}).catch(() => {
  this.setState(...);
  // or store.dispatch(...);
});

Note how in code like this errors from the first then are completely swallowed.

[achobanov]

I could not reproduce it, but you can observe it in home. Two images should appear, but they don't. I think that code execution stops when trying to render Post element for the first time, because of the phantom error. @gaearon I understand your example, but that that's not what's happening here, because I don't use any form of catch. @aweary I will try that.

[achobanov]

@aweary You were right, it does pause with that option selected, but the error thrown is a jQuery one, not the one I know is causing the issue, so something is a miss here. Error message: Failed to execute 'querySelectorAll' on 'Element': '*,:x' is not a valid selector.. I have also updated the repo, to include some instructions and I also made small edit to my issue text. @gaearon To clear any and all confusion - I could not replicate the issue, but it is there, inside the repo, under home page.

[gaearon]

Have you tried fixing the jQuery error?

[achobanov]

I have no idea what is this jQuery error. But if you look at the examples, whatever is happening - it's happening internally, since I don't use jQuery specifically. It's only imported because of bootstrap at this point. Just to clarify - I don't have a problem, I fixed that long time ago. I was curious as to why no error was thrown and I though it would be good to report this behavior. If you don't think react is responsible and you don't find this issue worth investigating - by all means close it. I just though it might be helpful to write it down.

[aweary]

@achobanov it's very likely that the error is being caught and unhandled somewhere in your code path. We get reports like this frequently (errors being swallowed) and it's almost always due to some user or third-party code mishandling errors. You can try to debug it pausing on uncaught exceptions and walking the call stack, looking for any functions calls that may be wrapped in catch blocks or Promises with catch clauses that don't handle the error.

[gaearon]

For what it’s worth we just released React 16 Beta which logs any errors inside React to the console in development. Even if the application code swallows them. So I think we can close this, and I hope this helps you find the issue!